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