はじめに
- 前回の記事の続き px-wing.hatenablog.com
型アサーション
- 推論、分析された型は、任意の方法で上書きできます
- 純粋にコンパイラよりもその型をより良く理解していることだけでなく、後で推測するべきではないことをコンパイラに伝えています。
- 下記の2つの記述方法があるがReactで実装する際はasの方を利用する
const input = <HTMLInputElement>document.getElementById('input') const input = document.getElementById('input') as HTMLInputElement
Non-null assertion operator
- コンパイラが自動的にその式を推論できない場合、式がnullでもundefinedもないことを宣言できます。
- !がついている時はnullやundefinedの可能性はないと認識しておけば良い
参考文献 dev.classmethod.jp
const input = <HTMLInputElement>document.getElementById('input')!
インデックスシグネチャ
- インデックスや要素のデータ型を指定できる
- 指定すると、インデックスシグネチャーで指定された型が優先され、インデックスシグネチャーで指定した以外のnumberなどのプロパティ属性を追加するとエラーになる。だが、string型なら指定しなくても、任意で属性を追加することができる
- 基本的には使わない方がよい。
interface Engineer { name: string, [index: string]: string } const engineer: Engineer = { name: 'Yamada Taro', sill: 'PHP', age: 20 // この指定はnumber型になってしまうので、エラーになってしまう }
関数のオーバーロード
function toUpperCase(x: string): string function toUpperCase(x: number): number // オーバーロードされた関数の実装 function toUpperCase(x: string | number) { if (typeof x === 'string') { return x.toUpperCase(); } return x; } // string型と認識される const upperHello = toUpperCase('hello') // number型と認識される const upperAge = toUpperCase(32)
Optinal Chaining
TypeScriptの3.7.0から利用出来る機能 developer.mozilla.org
Railsでいう'&.'と同じ役割
interface DownLoadedDate { id: number user?:{ name?:{ first: string; last: string; } } } const downloadedDate: DownLoadedDate = { id: 1 } console.log(downloadedDate.user?.name?.first)