Typescript 模板文字类型

Question

有没有人曾经运行过 Typescript 模板文字如果之前使用变量构造，则无法识别类型？

这是代码片段：

const namespace = 'myNamespace';

type Keys = 'a' | 'b';

type NamespacedKeys = `${typeof namespace}/${Keys}`;

type NamespacedObjects = Record<NamespacedKeys, string>;

const foo: NamespacedObjects = {
  [`${namespace}/a`]: 'bar',
  [`${namespace}/b`]: 'toto',
} // this would have an error -> Type '{ [x: string]: string; }' is missing the following properties

const baz: NamespacedObjects = {
  'myNamespace/a': 'bar',
  'myNamespace/b': 'yolo',
} // this works 

Answer 1

问题是编译器在遇到模板文字表达式时不会自动推断模板文字类型。 例如：

const key = `${namespace}/a`; 
// const key: string

推断的key类型只是string而不是字符串文字。 如果您希望编译器为此推断字符串文字类型，则需要使用const断言明确要求它这样做：

const key2 = `${namespace}/a` as const; 
// const key2: "myNamespace/a"

想知道为什么这不会自动发生？ 好吧，在microsoft/TypeScript#41891中完成了这项工作......它显然破坏了一堆已经使用模板文字表达式但取决于其类型只是string而不是某些字符串文字的现实世界代码。 所以这在microsoft/TypeScript#42588中被恢复了。 现在我们只需要使用一个const断言，至少在 TS 团队弄清楚如何在不破坏太多现有代码的情况下获得更好的行为之前：

const foo: NamespacedObjects = {
  [`${namespace}/a` as const]: 'bar',
  [`${namespace}/b` as const]: 'toto',
} // okay

Playground 代码链接