技術向上

プログラミングの学び、気になるテクノロジーやビジネストレンドを発信

型【TypeScript】

TypeScriptの基本型には次の3つがあります。

  • number
  • string
  • boolean

型宣言をするときは「: 型名」というように型アノテーションを用います。

変数

var 変数名: 型名

関数

function 関数名(引数名: 引数の型): 関数の返り値の型{}


返り値を持たない関数は、返り値の型にvoidを指定します。

function someF(num: number): void {
    a = num
}


型推論というものがあり、これら型アノテーションを省略することも可能です。
省略した場合、初期化時の値、関数の返り値から読み取って推測されます。ただし、これは「推測できる時」に限られるので、例えば後述する、型に別名を指定した時などは省略できません。

var age = 21;   // 初期化の値からnumber型と推測される


他にもany型やnull型、undefined型などがあります。any型はどんな型でも許容するため、コード補完やエラーチェックの恩恵を受けられません。
null型とundefined型は単体で使うよりも、次のような使い方をします。

var someV: string | null | undefined;
if (someV) {
    // 何かしらの処理
} else {
    // 何かしらの処理
}

someVはstringかnullかundefined型のものが代入されます。
上記のようにtype guards(型の保護。一致やnullでない場合にtrueを返すことを利用する条件分岐)を使うことで型に応じた処理を書くことができるため、複数の型を受け取る記述が可能になります。if(x)の代わりに、!=などの不等号を使って判定することもできます。
さらに、type ofを使って型を指定した条件分岐も可能です。

if (type of someV === "number") {
    // 何かしらの処理
}

複数の型を「|」を使って記述する(共用型。Union Types)ときに、その数が異なるものは別の型として認識されるので注意が必要です。

var someV: string | null | undefined;
var someV2: string | null |;

console.log(type of someV === type of someV2) // false



TypeScriptには、nullやundefinedをチェックする際の厳格さを決める環境変数があります。tsconfig.jsonにてstrictNullChecksをtrueに指定します(他の環境変数(noImplicitAny, noImplicitThis, alwaysStrict)についても同時にtrueにするにはstrictをtrueに指定すればOKです )。
strictNullChecksをtrueにしない場合、全ての型はnullとundefinedを包含します。nullとundefinedを受け付けるという意味です(nullとundefinedが全ての型に対するsubtypeである)。strictNullChecksをtrueにすると、nullはnull型とany型、undefinedはundefined型とany型にしか認められません。

// strictNullChecksがtrueの場合
var someV: string | undefined    // undefinedが許容される
var someV2: string    // undefinedは許容されない



型は別名をつけることもできます。例えば別名をつけることでコメントなしに何のデータが入るのかがわかるようになったり、複雑な型を別名定義することでわかりやすくなったり、複数登場する場合には記述量を減らしたりできます。

type LotID = number;
interface Box {
id: number
name: string
}

const boxMap =  new Map<LotID, Box>()    // numberである時と違い、コードからLotのIDであることがわかる。

type checkFunc = (boxes: Box[]) => boolean
function check(callback: checkFunc) {    // 引数の記述がシンプルになる
    // 何かしらの処理
}


また、typeの別名定義はexportすることもできますので、ファイルをまたいで複数の場所で利用することが可能です。

export type checkFunc = (boxes: Box[]) => boolean



ここで紹介した以外にも、Type Assertionなどがあります。下記にあげた参考資料に掲載されていますので必要に応じて参照ください。

TypeScript 2.0 | TypeScript 日本語ハンドブック | js STUDIO

TypeScript の tsconfig.json を 考える - コンパイル・オプション編 | 験なきものを思はずは

TypeScript Handbook を読む (10. Advanced Types) - Qiita

お気楽 TypeScript 超入門

[TypeScript] Type Alias を使って分かりやすいコードを書こう - YoheiM .NET