項目9　型アノテーションを型アサーションより優先的に使用する

TypeScriptには変数に代入する型の指定方法が2つある

code:ts

interface Person { name: string };

const alice: Person = { name: 'Alice' };

const bob = { name: 'Bob' } as Person;

値が型に適合することを保証する

TypeScriptの型推論を実装者が後から型を上書きする

型アノテーション

一般的には型アノテーションを優先して利用する

TypeScriptによる型推論によって型エラーを検知できるため

型アサーションでは、型エラーが無視される

code:ts

const alice: Person = {};

// ~~~~~ Property 'name' is missing in type '{}' but required in type 'Person'

// プロパティ 'name' は型 '{}' にありませんが、型 'Person' では必須です。

const bob = {} as Person; // エラーなし

型アノテーションを使った場合のみ有効

code:ts

const alice: Person = {

name: 'Alice',

occupation: 'TypeScript developer'

// ~~~~~~~~~ Object literal may only specify known properties,

// and 'occupation' does not exist in type 'Person'

// オブジェクト リテラルは既知のプロパティのみ指定できます。

// 'occupation' は型 'Person' に存在しません。

};

const bob = {

name: 'Bob',

occupation: 'JavaScript developer'

} as Person; // エラーなし

hr.icon

アロー関数で型アノテーションを使う場合

アロー関数の戻り値に型アノテーションをつける

code:ts

(name): Person => ({name})

);

code:ts

型アサーション

TypeScriptが把握し得ない、DOM要素の型など

code:ts

document.querySelector('#myButton')?.addEventListener('click', e => {

e.currentTarget

// ^? (property) Event.currentTarget: EventTarget | null

const button = e.currentTarget as HTMLButtonElement;

});

code:ts

const el = document.getElementById('foo')!;

// ^? const el: HTMLElement

型アサーションの限界

型アサーションを使って型を変換できる場合は、それらが互いに「比較可能」なときのみ

ただ、抜け道としてunknown型にアサーションすることで回避できる

code:ts

const el = document.body as unknown as Person;

ジェネリック型を利用した型アサーションはアンチパターン

TypeScriptが型推論していないのに、している風の動きに見えるため

as const

型をより正確にするためのもので、完全に安全