template.ts

// https://www.typescriptlang.org/play/?#code/MYewdgzgLgBFCmBbADgGwIYJgXgFAwJgB4AVGeADwTABMIYAFAJxGXiagE8BpeTgPgAUCFBgQBlKEwCWYAOYQAXDBJI0meJJnyIAQSZN0nADQwAdBaggA1vDABJOspIBtALoBKHP3yE-wmzsAWXRkZQZ0Dml0VCIAJXhQJhpSU2htORgAHxgAbzgQLVk5ZUEvbH4YdOKYAF9+fnKfPxbCIvkzQwB3YTUxTSliiFMLMytbBzoAfjNEUMEAiccmgomQ5Bdxu0c3GCmpmAAiQ48PAG5cXAB6K5gAUQp0UXgYAEZlAHUQJmt6LukoAALKqDeQwWycYYwdC0GAgABGACtErB0PQtmAYHNkDBcKBILBKE80PBVKINK8cHA+hoAAZEGjSABu-AAJLkAOQIaAc2qmdkcmy8-mc7lQXlEK6Mlm0vHgCAgVDwMyoEByQRE55k9QIV6CfJi5QcwHSDmmGzKAAsACY6qcYDcjgzmfwTaYbaYTZLpfxDrjrrcHsSlTBrZ9vr8YP8gTAwABXRDw9jgvhQmE0aEGIzQ9GBTHYuUE8iPLU0hC27DU8kIek+9kABj5MHZrybDdq3pdsvxCqVKrVGpLJO1-WtghchxNh3d1s8Xkdh2dLLdMA9MC9UpdfsujqDzxgAGZlOI48hkN8oPRKGhpMAATA5HZ2LeYD2pOhZFBC9Bi8HSWX4APKkRB1eAiC5eAeWyGBBWsDl+FrF0BTFYVm05IU21FSDxQ7TcZW-RVlVVdVNWHACD31aloCNE0zThawrVtWp7QXJdXWkGdPWkTsWW3IA

const template =
  <T extends PropertyKey>(templateStrings: TemplateStringsArray, ...tokenIds: T[]) =>
    (tokenMap: Partial<Record<T, string | { toString: () => string }>>) =>
      String.raw(templateStrings, ...tokenIds?.map((tokenId) => tokenMap[tokenId] ?? ""));

// Example 1: Works with string keys, and object as token map 
const exampleTemplate1 = template`<div>${'test'}, ${'ok'}, ${'test'}</div>`
console.log(exampleTemplate1({ test: 'hi', ok: 42 })) // "<div>hi, 42, hi</div>" 

// Example 2: Works with number keys, and array as token map
const exampleTemplate2 = template`<div>${0}, ${1}, ${0}</div>`
console.log(exampleTemplate2(["hi", 42])) // "<div>hi, 42, hi</div>" 

// Example 3: Supports explicit generic constraint
const exampleTemplate3 = template<'test' | 'ok'>`<div>${'test'}, ${'ok'}, ${'test'}</div>`
console.log(exampleTemplate3({ test: 'hi', ok: 42 })) // "<div>hi, 42, hi</div>"