TypeScript でタグ付けされたTemplate literalを使う

前回の記事：JavaScript で String.format したいで、テンプレートリテラルの使い方は何となくわかりましたが、いざ TypeScript で使うぞってなったときにタグ関数の引数の型がよく分からなかったのでメモ。

function template(strings: TemplateStringsArray, ...keys: any[]) {
    console.log(keys);
}

let obj = {foo: 'bar'};
let fn = (hoge) => hoge;
template`aa${1}${'a'}${obj}${fn}`

ひとまずこんな感じです。第一引数の型はインテリセンスで「TemplateStringsArray」っていうのをたまたま見つけて正しそうなので使ってます。第二引数は rest パラメーターなので配列、かつ何が来るのか分からないので any にしてます。さすがに理解せずになんでも any はありえないので、console.log で吐き出してちょっと調べてみます。

結果は以下の通りです。

[ 1, 'a', { foo: 'bar' }, [Function: fn] ]

よく考えてみたら、${} の中身が入ってくる、${} の中には変数入る、って考えるとなんでも入りますよね。関数が渡せるっていうのは何かに使えるんですかね。頭固くて使い道わかりませんが、型は any で正しかったことになります。何に使うかで調整する形ですね。

ということで、前回の記事のコードを TypeScript で書くと以下のような感じでしょうか。（${} は number しか入らない想定）

interface TemplateRenderer {
    (...values: string[]) : string;
}

function template(
    strings: TemplateStringsArray,
    ...keys: number[]
): TemplateRenderer {
    return ((...values) => {
        let result = [strings[0]];
        keys.forEach((key, i) => {
            let value = values[key];
            result.push(value, strings[i + 1]);
        });
        return result.join('');
    });
}