[TypeScript] satisfiesの使い所、威力を発揮する時

[TypeScript] satisfiesの使い所、威力を発揮する時

mattさんの動画から

playground

Example 1

const score: Record<string, number> = {} // 広い型である必要がある
score.english = 100
score.math = 40

// Record<string, number>は変数自体を操作している

const score2 = {} satisfies Record<string, number> // このsatisfiesの使い方は「条件を満たしているか確認することを目的」としているので、条件にないenglish等はエラーを起こす
score2.english = 100
score2.math = 40
// この例はsatisfiesを使うケースではない。割り当てることができない為、satisfiesが行っていることは限定している。asとは違い実際にその型にしようとはしない
// より広い型の解釈にするほうが良いためRecordが適している
// ただRecordだとauto completeが得られない。広すぎて

Example 2

// satisfiesが必要なのはより狭い型が必要なとき
const config: Record<string, number | string> = {
    width: "100px",
    narrow: 200,
}
// これだと推論されない
config.width
config.narrow
//string | number

const config2 = {
    width: "100px",
    narrow: 200,
} satisfies Record<string, number | string>
config2.width
config2.narrow
//推論される

// typeで指定するが、値は拡張させないのがsatisfies。
// 実際は
// const config2 = {
//     width: "100px",
//     narrow: 200,
// } 
// と同じ