TypeScriptのAdvanced Type②

はじめに

• 前回の記事の続き px-wing.hatenablog.com

型アサーション

• 推論、分析された型は、任意の方法で上書きできます
• 純粋にコンパイラよりもその型をより良く理解していることだけでなく、後で推測するべきではないことをコンパイラに伝えています。
• 下記の２つの記述方法があるが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)