Typescriptのsatisfiesが便利だと言う話

TypeScript 4.9で追加されたsatisfiesオペレータが便利なので紹介します。

一時変数が不要になる

例えばwindow間通信でpostMesssageを送りたい時

window.parent.postMessage({
    type: 'start',
    value: 'hoge'
});

ここでpostMessageで受け取る引数の型はany型なのでオブジェクトが期待する値なのかチェックするためには別の変数で一旦定義する必要がありました。

type WindowRequest = {
    type: string;
    value: string;
}

const req:WindowRequest = {
    type: 'start',
    value: 'hoge'
}

window.parent.postMessage(req);

satisfiesオペレータを使うことで次のように記載することができるようになります。

type WindowRequest = {
    type: string;
    value: string;
}

window.parent.postMessage({
    type: 'start',
    value: 'hoge'
} satisfies WindowRequest);

satisfiesを使うことで一旦別の変数を経由する手間を省くことができました。

as constとの組み合わせで型チェックしつつ型推論を残す

オブジェクトの型をチェックしたいが型推論を残したい時にも利用できます。

例えばUser型を満たす定数hogeUserを定義したとします。
この時型注釈のみつけた場合

type User = {
    name:string;
    age:number;
}

const hogeUser:User = {
    name:"hoge";
    age:20;
}

次のように後から値の書き換えが可能になってしまい定数としての補償ができなくなっていしまいます。

hogeUser.name = "fuga"

ここで as constオペレータを付けることで値の書き換えをしようとするとエラーが出るようになりました。

type User = {
    name:string;
    age:number;
}

const hogeUser: User = {
    name:"hoge";
    age:20;
} as const

しかしこの定義の仕方だとhogeUserはas constをつけているので値は必ずhogeと20で推論されて欲しいところhogeUserの型推論がname:string; age:number;となってしまいます。
これは型注釈をつけた場合は型推論が失われてしまうため起こります。

この時satisfiesを用いて次のように定義することで

type User = {
    name:string;
    age:number;
}

const hogeUser = {
    name:"hoge";
    age:20;
} as const satisfies User

hogeUserの型推論が{readonly name: "hoge", readonly age: 20}となり

型チェックを行いかつ型推論結果を保持することができるようになります。