TypeScript 4.1 の Template Literal Types を試してみよう
更新情報
2020/08/19: TypeScript 4.1.0の Beta 版リリースがアナウンスされましたので、本文内の TypeScript パッケージバージョンを4.1.0-dev.20200910から4.1.0-betaに修正しました（Playgroundのバージョンは4.1.0-dev.20200910のまま）
2020/11/19: TypeScript 4.1 が正式リリースされましたので、今後はバージョン指定せずにインストールすれば TypeScript 4.1 を使用できます。
TL;DR
ローカルで試す場合：
yarn add typescript@4.1.0-beta
Playgroundで試す場合：
Template Literal Types とは
Template Literal Types は TypeScript 4.1 に追加予定の新機能です。
TypeScript はこれまで、文字列を扱うのが苦手でした。
たとえば、次のようなテンプレートリテラルを含む文字列操作を TypeScript で表現できませんでした。
const dateString = (year: number, month: number, date: number) => {
return `${year}/${month}/${date}`;
};
dateString(2020, 10, 10);
// js: '2020/10/10'
// ts: string
この関数で Template Literal Types を使用すると、返り値の型を JavaScript のランタイムと同等のものに推論できます。
const dateString = <
Y extends number,
M extends number,
D extends number
>(year: Y, month: M, date: D) => {
return `${year}/${month}/${date}` as `${Y}/${M}/${D}`;
};
dateString(2020, 10, 10);
// js: '2020/10/10'
// ts: '2020/10/10'
このように、文字列を結合したり文字列から一部の文字列を抜き出す機能を提供しています。
Template Literal Types を試す
Template Literal Types は TypeScript 4.1 に向けた新機能のため、安定版ではまだ利用できません。
試すためには、TypeScript の開発版か Playground を使用するしかありません。
ローカルで試す
ローカルやプロジェクトで Template Literal Types を試すには、 typescript@v4.1.0-beta 以降の TypeScript の開発版をインストールします。
$ yarn add typescript@4.1.0-beta
また、VSCodeで開発する場合は、ワークスペースで使用する TypeScript をプロジェクトの依存関係に指定する必要があります。
VSCodeのコマンドパレットから TypeScript: TypeScriptバージョンを選択 を選択します。
表示されたバージョンの一覧から ワークスペースのバージョンを使用 を選択します。
これで、VSCode上でも Template Literal Types を使用できるようになります。
Playground で試す
手軽にコードを書いて試したい場合は TypeScript Playground でも Template Literal Types を使用できます。
Playground のURLに ?ts=4.1.0-dev.20200910 を追加して TypeScript バージョンを指定します。
Playground v4.1.0-dev.20200910
UI上に指定したバージョン名が表示されていれば Template Literal Types を使用できます。
まとめ
TypeScript 4.1 の新機能、 Template Literal Types は、これまで苦手としていた文字列操作・参照を可能にするパワフルな機能です。
TypeScript 4.1 の正式リリースはまだのようなので、それまでに試してみたい方はこの記事に記載されている方法で試してみてください。
Discussion