TypeScript - 类型别名

In TypeScript 中，type aliases 是一种定义类型的方式。它允许你为类型赋予一个特定的名称，或者使用 type 关键字定义自定义类型。基本上，你可以对原始类型和非原始数据类型进行一些修改，并使用 type aliases 定义自定义数据类型。

语法

你可以使用下面的语法在 TypeScript 中定义 type aliases。

type aliasName = Type;

在上方的代码中，type 是一个关键字。AliasName 是 type aliases 的名称。Type 可以是 primitive、非 primitive 或任何自定义数据类型。

为 Primitive Types 创建别名

type alias 的基本用法是为 primitive types 创建别名，即创建 primitive type 的副本。例如，在实时应用中，与其直接为 userID 变量使用 string 或 number 数据类型，我们可以创建 userID alias 并将类型存储其中，以提高代码的可维护性。

示例

在下面的代码中，我们定义了 number 类型的 UserID type alias。变量 user1 只能包含 number 值，因为其类型是 UserID。

// 定义 type alias
type UserID = number;
// 定义 type alias 的变量
let user1: UserID = 101;
console.log(user1);

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

// 定义 type alias 的变量
let user1 = 101;
console.log(user1);

输出如下

101

为 Union Types 创建别名

每当你想定义一个可以包含多种类型值的变量时，就可以使用 union types。例如，如果你在开发一个接受多种类型输入（例如 string 和 number）的 function，使用 type alias 可以使 function signatures 更加简洁。否则，如果在整个代码中重复 union type，会使代码变得复杂。

示例

在下面的代码中，StringOrNumber type alias 包含 string 和 number 的 union。logMessage() function 接受 string 或 numeric 值作为参数，因为参数类型是 StringOrNumber。

接下来，我们传递 string 和 number 作为参数来执行该 function。

type StringOrNumber = string | number;
function logMessage(message: StringOrNumber): void {
    console.log(message);
}
logMessage("Hello");
logMessage(123);

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

function logMessage(message) {
    console.log(message);
}
logMessage("Hello");
logMessage(123);

上方代码的输出如下

Hello
123

为 Tuples 创建别名

tuple alias 用于定义固定大小数组的结构，该数组可以按照特定顺序包含特定类型的数值。

示例

在下面的代码中，我们定义了 RGBColor tuple 来存储颜色的 RGB 值。在这个 tuple alias 中，所有值都是 numeric 类型。

type RGBColor = [number, number, number];
let red: RGBColor = [255, 0, 0];
console.log(`Red color: ${red}`);

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

let red = [255, 0, 0];
console.log(`Red color: ${red}`);

上方代码的输出如下

Red color: 255,0,0

对象类型别名

对象可以具有键值对格式的属性。有时，你需要定义多个具有相同结构的 object，可以使用对象类型别名。通过为对象类型创建别名，你可以复用它。

示例

在下面的代码中，我们定义了 'User' 类型，它包含 string 类型的 id 和 name 属性。

'user' 对象包含 string 类型的 id 和 name。

// 为 User 对象定义类型别名
type User = {
    id: string;
    name: string;
};

// 使用 User 类型别名定义 user 对象
let user: User = { id: "101", name: "Alice" };
console.log(user);

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

// 使用 User 类型别名定义 user 对象
let user = { id: "101", name: "Alice" };
console.log(user);

上述代码的输出如下

{ id: '101', name: 'Alice' }

函数类型别名

为函数类型创建别名在处理高阶函数或回调时特别有用，它为函数应该接受和返回什么提供了清晰的契约。

示例

在下面的代码中，'GreeterFunction' 定义了函数的类型。它接受 string 值作为参数，并返回 string 值。

'greet' 变量存储类型为 'GreeterFunction' 的函数表达式。

// 定义函数类型
type GreeterFunction = (name: string) => string;
// 定义匹配该类型的函数
const greet: GreeterFunction = name => `Hello, ${name}!`;
console.log(greet("TypeScript"));

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

// 定义匹配该类型的函数
const greet = name => `Hello, ${name}!`;
console.log(greet("TypeScript"));

输出如下

Hello, TypeScript!

与泛型一起使用类型别名

泛型用于创建自定义类型。它接受类型 'T' 作为参数，并基于类型 'T' 创建新类型。

示例

在下面的代码中，'Container' 类型接受类型 'T' 作为参数，并定义类型为 'T' 的对象属性值。

之后，在使用 'Container' 类型时，我们将数据类型作为参数传递。对于 'numberContainer' 变量，我们使用了 'number' 类型，对于 'stringContainer' 变量，我们使用了 'string' 数据类型。

// 定义泛型类型别名
type Container<T> = { value: T };

// 使用泛型类型别名
let numberContainer: Container<number> = { value: 123 };
let stringContainer: Container<string> = { value: "Hello World" };

console.log(numberContainer);  // 输出: { value: 123 }
console.log(stringContainer);  // 输出: { value: 'Hello World' }

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

// 使用泛型类型别名
let numberContainer = { value: 123 };
let stringContainer = { value: "Hello World" };
console.log(numberContainer); // 输出: { value: 123 }
console.log(stringContainer); // 输出: { value: 'Hello World' }

上述代码的输出如下

{ value: 123 }
{ value: 'Hello World' }

类型别名是定义自定义类型的方式，还允许在定义一次后复用复杂类型。它还有助于提高代码可读性并减少代码复杂度。