理解 TypeScript 中的类型注解

摘要：在本教程中，您将学习 TypeScript 中的类型注解。

什么是 TypeScript 中的类型注解

TypeScript 使用类型注解为标识符（如变量、函数、对象等）指定显式类型。

TypeScript 使用语法 : type 在标识符之后作为类型注解，其中 type 可以是任何有效的类型。

一旦标识符被注释为某种类型，它只能用作该类型。如果标识符用作不同的类型，TypeScript 编译器将发出错误。

变量和常量中的类型注解

以下语法显示了如何为变量和常量指定类型注解

let variableName: type;
let variableName: type = value;
const constantName: type = value;Code language: JavaScript (javascript)

在此语法中，类型注解位于变量或常量名称之后，前面是冒号 (:)。

以下示例对变量使用 number 注解

let counter: number;Code language: JavaScript (javascript)

此后，您只能为 counter 变量分配一个数字。

counter = 1;

如果您为 counter 变量分配一个字符串，您将收到错误。

let counter: number;
counter = 'Hello'; // compile error Code language: JavaScript (javascript)

错误

Type '"Hello"' is not assignable to type 'number'.Code language: JavaScript (javascript)

您可以同时对变量使用类型注解并在单个语句中初始化它，如下所示

let counter: number = 1;Code language: JavaScript (javascript)

在此示例中，我们对 counter 变量使用 number 注解并将其初始化为 1。

以下显示了其他基本类型注解的示例

let name: string = 'John';
let age: number = 25;
let active: boolean = true;Code language: JavaScript (javascript)

在此示例中，name 变量获取 string 类型，age 变量获取 number 类型，而 active 变量获取 boolean 类型。

类型注解示例

数组

要注释 数组类型，您使用特定类型后跟方括号 : type[]

let arrayName: type[];Code language: JavaScript (javascript)

例如，以下声明了一个字符串数组

let names: string[] = ['John', 'Jane', 'Peter', 'David', 'Mary'];Code language: JavaScript (javascript)

对象

要为对象指定类型，您使用对象类型注解。例如

let person: {
  name: string;
  age: number;
};

person = {
  name: 'John',
  age: 25,
}; // validCode language: JavaScript (javascript)

在此示例中，person 对象仅接受具有两个属性的对象：name 具有 string 类型，age 具有 number 类型。

函数参数和返回值类型

以下显示了一个带有参数类型注解和返回值类型注解的函数注解

let greeting : (name: string) => string;Code language: JavaScript (javascript)

在此示例中，您可以将任何接受字符串并返回字符串的函数分配给 greeting 变量。

greeting = function (name: string) {
    return `Hi ${name}`;
};Code language: JavaScript (javascript)

以下会导致错误，因为分配给 greeting 变量的函数与其 函数类型 不匹配。

greeting = function () {
    console.log('Hello');
};Code language: JavaScript (javascript)

错误

Type '() => void' is not assignable to type '(name: string) => string'. Type 'void' is not assignable to type 'string'.Code language: JavaScript (javascript)

总结

• 使用语法 : [type] 结合类型注解来显式指定变量、函数、函数返回值等的类型。