TypeScript 4.1 の Template Literal Types を試してみよう

公開:2020/09/17
更新:2020/09/19
4 min読了の目安(約2800字TECH技術記事

この記事では 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のまま)

TL;DR

ローカルで試す場合:
yarn add typescript@4.1.0-beta

Playgroundで試す場合:
https://www.typescriptlang.org/play?ts=4.1.0-dev.20200910

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'

実行結果

Playground で試す

このように、文字列を結合したり文字列から一部の文字列を抜き出す機能を提供しています。

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 の正式リリースはまだのようなので、それまでに試してみたい方はこの記事に記載されている方法で試してみてください。