TypeScriptの応用的な型

型アサーション

コンパイル時に推論される型を自由に指定することで、コンパイル時のエラーを避ける仕組み。
書き方は2種類あるが、JSXの記法との混同を避けるため、asを使った書き方が推奨される。

let input: unknown = 'hello'

let inputLength = (input as string).length;

この例では、unknown型のinput変数の型がstringであることを仮定することによって、コンパイルエラーを事前に防いでいる。

x_tatsuru

仮にinput as stringの記述がなかった場合、TypeScriptはunknown型にはlengthプロパティがないと考え、エラーを出してしまう。

注意点として、型アサーションを利用する際には、自分が指定している型が正しいことを確認しなければならない。

つまり、プログラマー自身が「私はこの型が正しいと信じています。だから私の指定している型に従ってください」といえる状況でのみ型アサーションを使用するべきである。

x_tatsuru

Union型（共同体型）

Union型は複数の型をあらかじめ指定し、その中のどれか一つの型を受け入れる型である。この特性により、代入される型が一つに絞れないときに活躍する。

Union型では以下のようにバーティカルバー|を用いて型をつなぐ。

let input: string | number | undefined; // 入力を格納する変数

Union型は変数にどの型が入っているかわからないため、実際には次のようにして変数の型をチェックする。

let input: string | number | undefined; // 入力を格納する変数

input = '私は何の型でしょうか'; // 何かしらの入力

if (typeof input === 'string') {
    console.log('入力は文字列型です');
} else if (typeof input === 'number') { 
    console.log('入力は数値型です');
} else {
    console.log('入力されていません')
}

x_tatsuru

リテラル型

指定した値そのものを型にすることができる。
以下の例では、'red', 'green', 'blue'の３つのリテラル型をColor型に指定し、それ以外のあらゆる値が代入されたときにエラーを返すようになっている。

type Color = 'red' | 'green' | 'blue';
let myColor: Color;
myColor = 'red'; // OK
myColor = 'white'; // エラーになる

状態の管理、イベント種類の管理などに応用可能

x_tatsuru

型エイリアスとインターフェイスの型

型エイリアスとインターフェイスの名前は基本的にパスカルケース（PascalCase）で書く。
パスカルケースは単語ごとに先頭を大文字にする記法である。

※変数の場合は基本的にキャメルケース（camelCase）で書く。