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添加了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 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));

上述代码的输出如下：

5

对象属性类型注解

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

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

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

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

您只能为name属性分配字符串值，同样只能为age属性分配数字值。假设您尝试为age添加字符串，它将抛出错误。

类型'string'不能分配给类型'number'。

示例

让我们看一个完整的示例。在这个示例中，我们定义了一个名为Person的接口，它有两个属性：name和age。name属性标注为string类型，age标注为number类型。我们使用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特性。