模板字面类型如何在TypeScript中工作

让我们来看看模板字面类型是如何工作的。

模板字面在JavaScript中很常见：它们让我们在JavaScript中轻松地组合变量和字符串。TypeScript还引入了Template Literal Types的概念，我们可以在Template Literals的输入上执行类型。这给我们提供了控制，以确保文本处于某种格式中。让我们来看看它们是如何工作的。

TypeScript中的模板字面类型

模板字面类型可能有用的一个完美例子是创建特定格式的ID。例如，假设我们有一个以'ga-'或'ua-'开头的ID，后面是一个字符串或数字。我们可以像这样用类型字面定义一个新的类型。

TypeScript

type startOfId = "ga-" | "ua-";
type ID = `${startOfId}${string | number}`;

这意味着type ID 的第一部分需要符合类型startOfId ，而第二位可以是string 或number 。整个类型ID 必须是一个字符串，因为模板字面意味着一个字符串类型。

现在我们可以在我们想要符合这个模式的变量上使用我们的类型。

比如说:

TypeScript

type startOfId = "ga-" | "ua-";
type ID = `${startOfId}${string | number}`;

let newId:ID = "ga-12abc3456";

与通用类型的结合

如果你想更进一步，你可以将模板字面类型与通用类型结合起来。下面，我们有两种类型，genericType 和user 。

TypeScript

type genericType<Type> = {
    name: `${string & keyof Type} object property`
}

type user = {
    name: string,
    age: number,
    description: string
}
let myObject:genericType<user> = {
    name: "age object property"
}

由于genericType 接受另一个类型作为参数，我们可以传入user ，所以现在myObject 中的name 属性只能是age object property ，name object property 或description object property.