笙亿网络策划

TypeScript 类型注解怎么用？

约 8 分钟读完 28 阅
文章导读
Previous Quiz Next 类型注解 In TypeScript，类型注解提供了一种定义（或标注）变量、class 成员、function 参数和返回值数据类型的方法。
📋 目录
  1. A 类型注解
  2. B 变量类型注解
  3. C 函数类型注解
  4. D 对象属性类型注解
A A

TypeScript - 类型注解

Previous
Quiz
Next

类型注解

In TypeScript，类型注解提供了一种定义（或标注）变量、class 成员、function 参数和返回值数据类型的方法。

TypeScript 是一种静态类型编程语言，同时可选地支持动态类型。由于这种支持，任何 JavaScript 文件（.js）都可以直接重命名为 TypeScript 文件（.ts）。众所周知，JavaScript 是一种动态类型编程语言，而 TypeScript 是 JavaScript 的超集。TypeScript 支持 JavaScript 的所有功能，并添加了一些额外特性。

TypeScript 提供了标注数据类型的方法。通过“类型注解”一词，指的是为变量分配数据类型。

变量类型注解

TypeScript 支持变量的静态类型。我们可以在声明变量时为其标注类型。同时 TypeScript 也可选地支持 JavaScript 的动态类型。

例如，当我们定义一个存储数字的变量时，可以如下定义 -

var x = 10;

上述声明在 TypeScript 中完全允许，因为它支持动态类型。

我们可以如下为变量 x 标注数据类型 

var x: number = 10;

要进行类型注解，可以在变量名后使用冒号（:）符号，后跟变量的数据类型。

var varName: datatype

以下是为不同数据类型的变量进行标注的不同示例。

let name: string;
let age: number;
let isEnrolled: boolean;

在上面的示例中，我们为变量 name 添加了 string 类型。同样，age 和 isEnrolled 被标注为 number 和 boolean 类型。

示例

让我们尝试以下示例。在这个示例中，我们声明了两个变量 pName 和 pAge。我们将 pName 标注为 string，将 pAge 标注为 number。

let pName: string;
let pAge: number;
pName = "John Doe";
pAge = 35;
console.log(`Name of the person is ${pName} and his age is ${pAge}`);

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

let pName;
let pAge;
pName = "John Doe";
pAge = 35;
console.log(`Name of the person is ${pName} and his age is ${pAge}`);

上述 JavaScript 代码的输出如下 

Name of the person is John Doe and his age is 35

函数类型注解

在 TypeScript 中，你可以为函数添加类型。函数的类型有两个部分：函数参数和函数的返回类型。

函数参数类型注解

我们可以在函数定义中为参数标注数据类型。

function displayDetails(id: number, name: string){ 
   console.log("ID:", id); 
   console.log("Name", name);
}
displayDetails(123,"John");

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

function displayDetails(id, name) {
    console.log("ID:", id);
    console.log("Name:", name);
}
displayDetails(123, "John");

上述示例代码的结果如下：

ID: 123
Name: John

函数返回类型注解

你可以为函数返回值的类型添加数据类型注解。它将是函数返回值的类型。

function add (x: number, y: number): number {
   return x + y;
}

如果你不指定返回类型，则任何函数的默认返回类型将是 undefined。

如果函数不返回任何值，则应使用 void 作为函数返回类型，而不是省略它。

例如，不要这样写：

function greet(name: string){
   console.log(`Hello Mr. ${name}. Welcome to .`);
}

而是使用 void 作为返回类型来编写函数，如下所示：

function greet(name: string): void {
   console.log(`Hello Mr. ${name}. Welcome to .`);
}

示例

在下面的示例中，我们为函数参数及其返回类型添加了注解。函数 add 接受两个 number 类型的参数 - x 和 y，并返回 number 类型的值。返回的值是被传递给函数的参数之和。

function add(x: number, y: number): number {
    return x + y;
}

console.log(add(2,3))

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

function add(x, y) {
    return x + y;
}
console.log(add(2, 3));

上述代码的输出如下：

5

对象属性类型注解

你可以使用类型注解为对象的属性添加类型。

让我们使用 interface 定义一个对象，如下所示：

interface Person {
   name: string;
   age: number;
}
const person: Person = {
   name: "John Doe",
   age: 35,
}

在上面的示例中，我们分别为 name 和 age 属性添加了 string 和 number 类型。

你只能为 name 属性赋值 string 值，同样只能为 age 属性赋值 number 值。如果尝试为 age 添加 string 值，将抛出错误。

Type 'string' is not assignable to type 'number'.

示例

让我们看一个完整的示例。在这个示例中，我们定义了一个名为 Person 的 interface，包含两个属性：name 和 age。name 属性标注为 string，age 标注为 number。我们使用 Person interface 创建了一个名为 person 的对象。然后，最终在控制台中显示对象属性。

interface Person {
   name: string;
   age: number;
}
const person: Person = {
   name: "John Doe",
   age: 35,
}
console.log(`The person's name is ${person.name} and person's age is ${person.age}`);

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

const person = {
    name: "John Doe",
    age: 35,
};
console.log(`The person's name is ${person.name} and person's age is ${person.age}`);

上述示例代码的输出如下：

The person's name is John Doe and person's age is 35

在 TypeScript 中，推荐为变量、函数参数和返回类型等添加类型注解。但 TypeScript 也支持像 JavaScript 一样的动态类型化。正如你所知，TypeScript 支持所有 ECMAScript 特性。