本セッションの登壇者
セッション動画
私は鹿野壮(@tonkotsuboy_com)といいます。今はマネーフォワードビジネスカンパニーというところで経理財務プロダクト本部開発部副部長というのをやっております。
最近、「JavaScriptコードレシピ集」(技術評論社)という書籍を書いたり、「日経ソフトウェア」（日経BP）でCSSやJavaScriptの最新記事を書いております。
本日伝えたいことのまとめですが、「as const satisfiesを使うと、wideningの防止と型推論結果の保持ができる」ということです。
satisfiesでできること
まず、as const satisfiesのsatisfiesの部分なんですけども、satisfiesとは何なのかというと、これは式 satisfies 型という形で使います。式が型にマッチするかどうか？をチェックします。TypeScript 4.9、現時点(2023/01/18)の最新バージョンでリリースされました。
satisfiesの発音ですが、カタカナで起こすのであれば「サティスファイズ」かなと思います。意味は、
- 満足させる、満たす
- satisfiyの動詞に三単現のsが付いた形
です。
satisfiesがどういうことをするかというと、まずひとつ目がたとえば
const foo = "豚骨大学" satisfies string;
と書いた場合、「豚骨大学」という文字列が、stringにマッチするかどうかをチェックしています。当然、「豚骨大学」はstring型にマッチするので、ここはOKになります。
一方、
const foo = 14 satisfies string;
のようなコードの場合は「14」がstring型にマッチしないのでNGとなり、コンパイルエラーが出ます。これがsatisfiesの動作です。
オブジェクトの場合でも同様で、type Personという型を定義して、ageとnameがそれぞれnumberとstring型というプロパティを持っているtype Personです。これに対して、satisfies Personという書き方をして、my Personというオブジェクトを定義しました。nameがstringを期待しているところに、["ラーメン", "うどん"]という配列を入れてしまうと、当然nameはstringではないのでNGです。ここ(配列)を文字列にすると正しく通るようになります。
「これは型注釈と何が違うのか」という疑問についてですが、「推論結果を保持するかどうか」というのが答えになります。
型注釈とsatisfiesについてですが、上が型注釈、下がsatisfiesです。
たとえば、このようなColorListという型を定義したとします。keyが"red | "green" | "blue""で、値はなんでもいいという型とします。
このgreenに対して、map()関数を使おうとすると、当然greenはunknownとしか注釈されていないので、配列用の関数を使うことができないわけですね。
一方で、これをsatisfiesに書き換えると、greenが正しく配列として型注釈されるので、配列用のmap()関数が使えるようになります。
こういった違いがあります。なので「satisfiesは型チェックをしながらも、型推論結果を保持できる」というメリットがあります。
wideningの防止とreadonly化ができるas const
「satisfiesにas constを組み合わせると便利」というのが本日の主題です。
as constについてですが、本日のセッションを聞いている皆様であれば、ふだん使っているかと思います。
式 as const
という使い方になります。これはTypeScript 3.4で導入され、文字列や数値、真偽値といったリテラル型をwidenigしない、また、オブジェクト内のすべてのプロパティがreadonlyになり、配列リテラルの推論結果がタプル型になるという特徴があります。
wideningというのは、リテラル型がプリミティブ型に拡大するというものです。左がリテラル型、右がプリミティブ型です。
wideningが起こるケースは
const name = "田中";
と定義した場合、nameの推論結果は"田中"型ですが、
let name2 = name;
とすると、string型にwideningしてしまいます。
配列もwideningします。myArrayに["ラーメン", "うどん", "梅が枝餅"]を定義した場合の推論結果はstringの配列です。["ラーメン", "うどん", "梅が枝餅"]というタプル型にはならないというのがポイントです。
オブジェクトも同様で、myObjectに具体的な値を入れていたとしても、wideningしてしまいます。
しかし、このようにwideningしないと配列もオブジェクトも書き換えができないからこのような仕様になっています。ここでas constを使うと、wideningの防止とreadonly化ができます。
たとえば、先ほどのnameの"田中"に対してas constを設定すると、
let name2 = name;
としても”田中”というリテラル型がそのまま保持されます。
配列に対してもas constを付けることで、["ラーメン", "うどん", "梅が枝餅"]というタプル型に推論されます。readonlyなので、書き換えることはできません。
オブジェクトも同様です。
とくに定数をexportするときは非wideningでreadonlyの場合が多いので、積極的にas constを使うことが多いかなと思います。
as constとsatisfiesを組み合わせていいとこ取り！
このas constとsatisfiesを組み合わせるというのが本日のポイントで、
as constはwidening防止とreadonly化ができるsatisfiesは型チェックができる
これを組み合わせると、両方のいいとこ取りをした素晴らしいものができます。
サンプルをお見せします。たとえば「Person型」を作ったとします。これにマッチするオブジェクトを作ってみましょう。
まず両方とも使わない場合は、IDEの推論結果を見るとwideningしてますし、age: numberのところに文字列を入れていますが、もちろん型チェックができていません。
ここでas constだけを付けておくと、wideningを防止できていますが、まだ型チェックができていないので、誤って文字列を入れてもチェックしてくれません。
satisfiesだけ使った場合は、正しく型チェックをしているけど、wideningしてしまいます。
両方を付けると、wideningの防止と型チェックをすることができます。
どのような場面で活用できるかというと、たとえばアプリケーションのバージョン管理定数です。これは、${number}.${number}.${number}というテンプレートリテラルにしています。こうすることで、バージョンを130としても通らないようにしてます。
あとは、URLの一覧を以下のように管理することができます。この場合は、値がhttps://で始まる値に限定してas const satisfiesしています。
ほかにも、カラーコードの列挙やステータスの配列などでも使うことができます。
##まとめ - as const satisfiesでwideningの防止と型推論結果の保持ができる
まとめです。
とくに定数をexportする場合は、使う人のことを考えてas const satisfiesしておきましょう。今日の話はzennの記事でも詳しく解説していますのであわせてご覧ください。
ご清聴ありがとうございました。
TechFeed Experts Night#11 で話した内容が、動画公開 + 文字起こしされました💐
TypeScript 4.9のas const satisfiesについて、デモと各用語の解説を交えつつ、できるだけ丁寧に解説しています。
自分で見返して復習中…