TypeScript - 类型注解

类型注解

在 TypeScript 中，类型注解提供了一种定义（或注释）变量、类成员、函数参数和返回值的数据类型的方式。

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 的类型添加。类似地，age 和 isEnrolled 分别用 number 和 boolean 类型进行了注释。

示例

让我们尝试以下示例。在这个示例中，我们声明了两个变量 pName 和 pAge。我们将 pName 注释为字符串，pAge 注释为数字。

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 Tutorials Point.`);
}

使用 void 作为返回类型编写函数，如下所示 –

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

示例

在下面的示例中，我们注释了函数参数及其返回类型。函数 add 接收两个参数 - x 和 y，类型为 number，以及一个类型为 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));

上述代码的输出如下 −

对象属性类型注解

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

让我们使用接口定义一个对象，如下所示 −

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

在上面的示例中，我们分别将字符串和数字类型添加到 name 和 age 属性。

您只能将字符串值分配给 name 属性，类似地，只能将数字值分配给 age 属性。假设您尝试向 age 添加字符串，它将抛出错误。

类型“string”无法分配给类型“number”。

示例

让我们举一个完整的例子。在这个例子中，我们定义了一个名为 Person 的接口，它有两个属性 – name 和 age。name 属性注释为字符串，age 注释为数字。我们使用接口 Person 创建一个名为 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 特性。

打印页面