TypeScript4.1から正式に登場したテンプレートリテラル型について

ついにTypeScript4.1がリリースされましたね。
今回のリリースの目玉はなんと行ってもテンプレートリテラル型なのではないでしょうか。

今回はテンプレートリテラル型とはなにか、具体的な使い所について触れていこうと思います。

テンプレートリテラルとはなんだったか

まずはテンプレートリテラルとはなんだったか確認です。
テンプレートリテラルとは組み込み式を扱うことが可能な文字リテラルのことです。
粗雑な覚え方としてはバックティック文字で囲まれた文字列のことです。

`hogehuga`

これがテンプレートリテラルです。

またこのテンプレートリテラルは連結が可能です。

console.log(`hoge` + `huga`);

またこのような糖衣構文での表現が可能です。

const huga: string = 'huga'
console.log(`hoge${huga}`); // -> "hogehuga"

これ意外にもテンプレートリテラルでできることは数多くあります。

テンプレートリテラルの詳細はMNDを参考にして下さい。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

テンプレートリテラル型とは？

テンプレートリテラルの使い方について復習も済んだところで今回の主題であるテンプレートリテラル型について触れていきましょう。
テンプレートリテラル型とはテンプレートリテラルと同じ型空間に生成されます。
テンプレートリテラルと同じくバックテイク文字でとじられていおり、＄｛T｝にstring, number, boolean, bitを型として持つことができます。
${}の中身はTypeScriptの式として評価されます。

const a = "1";
const b: number = 1;
console.log(`＄｛a + b}`);  // ->11

となります。
テンプレートリテラル型ではテンプレートリテラルの連結や非プリミティブ型のリテラルを文字リテラルに変換が可能で
型推論から簡単ではありますが文字リテラルのパターンマッチができます。

またプレースホルダー内のunion型はテンプレートリテラル型に分散されます。
なので${A|B}は${A}|${B}に変換され、${A|B}, ${C|D}は${A},${C} | ${A},${D} | ${B},${C} | ${B},${D}
プレースホルダー内にnever型を持つ場合にはテンプレートリテラルはneverに変換されます。

具体的な使い所

ここまでテンプレートリテラル型の基本的な機能にふれてきました。
では実際にどんなことができるのか確認していきましょう。

const x = 'hoge'
const y = '${x}huga'
A extends `${infer B}huga`? B : never

この書き方できます。
この書き方ではAが"hogehuga"のときBがhogeに推論されます。
このような書き方ができるとパターンマッチで文字列の分割が可能です。

このようなTypeScriptが今まであまり得意でなかった文字列の操作と参照がパワフルにできるようになります。
ぜひとも活用してより良い開発ライフを！！