TypeScript - 模板字面量类型

模板字符串字面量用于在 JavaScript 中创建包含变量的动态字符串。类似地，在 TypeScript 中，您可以使用模板字面量类型来创建动态类型，这是在 TypeScript 4.1 版本中引入的。TypeScript 中模板字面量类型的语法与 JavaScript 模板字符串字面量非常相似。

语法

您可以按照以下语法在 TypeScript 中使用模板字面量类型。

type type_name = `some_text ${variable_name}`

在上述语法中，“type_name”是类型的名称。
您需要使用反引号 (``) 来定义模板字面量类型。
“some_text”可以是任何将保持不变的字符串值。
要在类型中添加任何动态值，您需要在“${}”结构内添加变量名。

示例

让我们通过一些 TypeScript 示例来详细了解模板字面量类型。

示例：基本用法

在下面的代码中，我们定义了“World”类型，其中包含“World”作为值。“Greeting”类型是一个模板字面量类型，其值会根据“World”变量的值而改变。

接下来，我们创建了类型为“Greeting”的“greeting”变量，其中包含“Hello World”值。如果我们尝试为其分配另一个值，TypeScript 编译器将抛出错误。

type World = "world";
// Defining a template literal type
type Greeting = `Hello, ${World}`;
const greeting: Greeting = "Hello, world"; // Correct
// const wrongGreeting: Greeting = "Hello, everybody"; // Error: This type is "Hello, world" specifically.
console.log(greeting);

编译后，它将生成以下 JavaScript 代码

const greeting = "Hello, world"; // Correct
// const wrongGreeting: Greeting = "Hello, everybody"; // Error: This type is "Hello, world" specifically.
console.log(greeting);

上面的示例代码将产生以下输出

Hello, world

示例：与联合类型结合

在此代码中，“size”类型包含多个类型值的联合。“ResponseMessage”类型是一个模板字面量类型，其值会根据“Size”类型的值而改变。

selectSize() 函数采用类型为“Size”的字符串作为参数，并返回类型为“ResponseMessage”的值。

接下来，我们通过传递“medium”作为函数参数来调用该函数。如果我们尝试传递除“small”、“medium”和“large”之外的任何其他字符串值作为函数参数，它将抛出错误。

// Creating a type using literal type
type Size = "small" | "medium" | "large";
// Custom template literal type
type ResponseMessage = `${Size} size selected`;

// Function to select size
function selectSize(size: Size): ResponseMessage {
    return `${size} size selected`;
}

// Call the function
const response: ResponseMessage = selectSize("medium"); // "medium size selected"
console.log(response);

编译后，它将生成以下 JavaScript 代码

// Function to select size
function selectSize(size) {
    return `${size} size selected`;
}

// Call the function
const response = selectSize("medium"); // "medium size selected"
console.log(response);

其输出如下所示

medium size selected

示例：条件字符串模式

在此示例中，我们使用了带有约束的泛型类型。这里的“T extends Status”表示 T 的值只能来自 status。statusMessage 类型是类型“T”和“status”字符串的组合。

printStatus() 函数采用类型 T 作为参数，该参数可以是“Status”类型中的任何一个值，并返回类型为“statusMessage”的值。

接下来，我们通过传递“loading”值（它是“Status”类型的一部分）来调用 printStatus() 函数。

// Definition of the Status type
type Status = "loading" | "success" | "error";
// T can be any of the values in the Status type
type StatusMessage<T extends Status> = `${T}Status`;

// Function to return a message based on the status
function printStatus<T extends Status>(status: T): StatusMessage<T> {
    return `${status} Status` as StatusMessage<T>;
}

// Call the function with the "loading" status
const loadingMessage = printStatus("Loading"); // "loadingStatus"
console.log(loadingMessage);

编译后，它将生成以下 JavaScript 代码

// Function to return a message based on the status
function printStatus(status) {
    return `${status} Status`;
}

// Call the function with the "loading" status
const loadingMessage = printStatus("Loading"); // "loadingStatus"
console.log(loadingMessage);

其输出如下所示

Loading Status

示例：API 路由生成

以下示例演示了模板字面量类型的实际应用。

然后，我们定义了 Method 类型，它可以具有 REST API 方法类型中的任何值。Entity 类型定义实体对象。

getRoute() 方法分别采用类型为 Entity 和 Method 的 entity 和 method 作为参数。它在组合 entity 和 method 值后返回类型为 APIRoute 的字符串值。

// Defining the Method and Entity types
type Method = "get" | "post" | "delete";
type Entity = "user" | "post";

// Defining the ApiRoute type
type ApiRoute = `/${Entity}/${Method}`;

// Defining the getRoute function
function getRoute(entity: Entity, method: Method): ApiRoute {
    return `/${entity}/${method}` as ApiRoute;
}

// Using the getRoute function
const userRoute = getRoute("user", "post"); // "/user/post"
console.log(userRoute);

编译后，它将生成以下 JavaScript 代码

// Defining the getRoute function
function getRoute(entity, method) {
    return `/${entity}/${method}`;
}

// Using the getRoute function
const userRoute = getRoute("user", "post"); // "/user/post"
console.log(userRoute);

其输出如下所示

/user/post

在 TypeScript 中，模板字面量类型主要用于需要创建动态类型的情况。

打印页面