2022年3月16日りあクト TypeScript - りゅうじの学習blog

TypeScriptを学び始めたので少しずつ要点をまとめていきます。

型アノテーション

value: Type というフォーマットで宣言時の変数に型の注釈がつけられます。

let n: number = 3;
console.log(n); // => 3

変数 n は number 型しか受け付けないという事

試しに文字列を再代入してみます。

let n: number = 3;
n = 'foo';
// => Main.ts(3,1): error TS2322: Type 'string' is not assignable to type 'number'.

エラーが発生しています。

またJavaScriptの暗黙の型変換がTypeScriptにはありません。

const a = '1';
const b = 2;
const c = a * ３;

console.log(c);

// => Main.ts(3,15): error TS1127: Invalid character.

JavaScriptでは文字列と数値を計算してもできていたがTypeScriptではエラーになります。

次の例はエラーになりません。

const a = '1';
const b = 2;
const c = a + b;

console.log(c);
// => 12

+ が加算ではなく文字列の結合と評価されているためです。

またこの二つの例では型アノテーションを省略していますが、出力できているのは型推論(Type Inference)が働いているためです。

JavaScriptとTypeScriptの違い

TypeScriptは大規模なアプリケーション開発のために作られたJavaScriptに静的型付けの型システムとクラスベースオブジェクト指向を加えた完全上位互換の言語です。

JavaScriptとTypeScriptの違いはほぼ型システムだけといえます。

TypeScriptのプリミティブ型はJavaScriptと同じです。

Boolean ⇒ true falseの真偽値
Number ⇒ 数値
BigInt ⇒ numberでは表現できない大きな数値(253以上)
String ⇒ 文字列
Symbol ⇒ シンボル値という固有の識別子を表現する値
Null ⇒ 何のデータも含まれない状態を明示的に表す
Undefined ⇒ 未定義であることを表す

TypeScriptでは型アノテーションを記述するので覚えておくと良いでしょう。

配列の型

const numArr: number[] = [1, 2, 3];
console.log(numArr); // => [ 1, 2, 3 ]

型名の後に配列リテラルをつけるとその型データの配列になります。

オブジェクトの型

Objectはプリミティブ型以外の全てのオブジェクトのプロトタイプなので型注釈としては使えません。

const a: object = ['a', 'b', 'c'];
console.log(a); // => [ 'a', 'b', 'c' ]

配列もObjectのプロトタイプなので通ってしまっています。

どうするか？

const a: { a: string, b: number } = { a: 'yuno', b: 1 };
console.log(a); // => { a: 'yuno', b: 1 }

オブジェクトリテラルの中でキーとバリューの両者に型を定義しています。

これを毎回書くのは大変なのでインターフェース(interface)と呼ばれるものがあります。

interface Color {
    readonly rgb: string;
    opacity: number;
    name?: string;
}

const turquoise: Color = { rgb: '00afcc', opacity: 1 };
turquoise.name = 'Turquoise Blue';
console.log(turquoise); // => { rgb: '00afcc', opacity: 1 }
console.log(turquoise.name); // => Turquoise Blue
// もしrgbを書き換えようとすると
turpuoise.rgb = 'ffff'; // => Main.ts(11,1): error TS2552: Cannot find name 'turpuoise'. Did you mean 'turquoise'?
// エラーになります。

インターフェースでオブジェクトリテラルにColorという名前をつけています。
name? に ? をつける事でこの型は省略可能になっています。
readonly 装飾子を rgb につけているから書き換えができなくなっています。

インデックスシグネチャ

インターフェースの3行目がインデックスシグネチャです。

interface Status {
    level: number;
    maxHp: number;
    [attr: string]: number;
}

const myStatus: Status = {
    level: 99,
    maxHp: 1000,
    attack: 1000,
    defense: 1000
};

console.log(myStatus);

attack defince がインデックスシグネチャで定義できています。
インデックスシグネチャのキーに使えるのは文字列と数値の2種類のみです。
通常はキーにシンボルは使えますが、インデックスシグネチャでは使えません。(キーにシンボルを使う事はまずないので気にしなくても良いです)

参考

りあクト！【Ⅰ.言語・環境編】