TypeScript がジェネリック型を推論する流れ

2021年2月24日

type MyEvent<T> = {
    target: T
    type: string
}

function triggerEvent<T>(event: MyEvent<T>){
    //...
}

triggerEvent({
    target: document.querySelector('#myButton'),
    type: 'mouseover'
})

1. triggerEventを、オブジェクトを渡して呼び出す
2. TypeScriptは関数のシグネチャから、渡された引数がMyEvent<T>という型をもっていなければならないことを理解する。また、MyEvent<T>が {target:T, type: string}が定義されていることに気が付く
3. TypeScriptは、渡されたオブジェクトのtargetフィールドdocument.querySelectorであることを理解する。ここからTからElement | null であることを理解する
4. すべてのTをElement | nullに置き換える
5. 型が割り当て可能かをチェックする