型指定はsatisfiesを使っておけば大体大丈夫な理由【Typescript】
satisfiesの挙動を勉強した際に、一般的に型指定に使われる「型注釈」やasと比較して優秀な特徴があることが分かったので記事にしてみました
vs 「型注釈」
「型注釈」とsatisfiesは、型を満たしているかどうかを判定するという点では同じです
しかし、
「型注釈」はオブジェクトが保持している型を上書きしてしまうのに対して、
satisfiesは元の型の情報を保持した上で型を判定してくれます
これを具体的なコードで説明すると、「型注釈」の場合、下記のコードでエラーが発生します
// 「型注釈」の場合
const result: {type: 'success' | 'error'} = {type: 'success'};
const success: {type: 'success'} = result;
// ^^^^^^^^ Error発生！
このエラーが発生する理由は、resultの型が「型注釈」により{type: 'success' | 'error'}に上書きされてしまい、型{type: 'success'}を満たさなくなってしまうからです
一方で、satisfiesを使うと、このようなエラーは発生しません
// satisfiesの場合
const result = {type: 'success'} satisfies {type: 'success' | 'error'};
const success: {type: 'success'} = result;
satisfiesでは、resultの型が{type: 'success'}のまま保持されるため、successに代入することができます
これを図で表すと、
元の型の状態を保持したまま、型の判定をしたい場合は、satisfiesを使うのが有効です
vs as
asは型指定が間違えててもエラーが検出されず、実際に動かしてみるまで分からない場合があるのに対して、satisfiesは型指定を間違えていたらエラーを検出してくれます
例えば、次のコードのような挙動を引き起こします
// asの場合
const result = {type: 'success'};
const error: {type: 'error'} = result as {type: 'error'};
// Errorが検出されない！
// satisfiesの場合
const result = {type: 'success'};
const error: {type: 'error'} = result satisfies {type: 'error'};
// ^^^^^^^^^ Error検出
asを使ってしまうと、実際に動かしてみるまで型の間違いに気付けないので、特別な理由がない限りはsatisfiesを使う方が安全です
まとめ
satisfiesが、「型注釈」やasと比較してどのように有用か解説してみました
とはいえ、satisfiesだと実現できない挙動もあったり、チームによってはsatisfiesを知らない人もいると思うので、上手に使い分けていきたいなと思います
また余談ですが、型の挙動を簡単に確認したい場合は、TypeScript Playgroundを使うのがおすすめです
Discussion