TypeScript中的类型注解

TypeScript是JavaScript的超集，它为该语言添加了可选的静态类型。这意味着TypeScript允许开发人员指定变量、函数参数和函数返回值的类型。此功能有助于在开发过程的早期捕获错误，并使代码更健壮。

在TypeScript中，类型注解用于指定变量、函数参数和函数返回值的类型。在本教程中，我们将探讨在TypeScript中使用类型注解的不同场景以及它们如何帮助开发人员编写更好的代码。

使用类型注解声明变量

语法

在TypeScript中使用类型注解创建变量的语法如下：

let variableName: type;

这里，variableName是变量的名称，type是变量的类型。让我们来看一个例子：

示例1

let num1: number = 10;
console.log(num1);

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

var num1 = 10;
console.log(num1);

输出

以上代码将产生以下输出：

10

在上面的例子中，我们声明了一个类型为number的变量num1，并为其赋值10。然后使用console.log()函数将变量的值打印到控制台。

示例2

let Name: string = "John";
console.log("Hello, " + Name);
// Note that I used "Name" instead of just "name"
// "name" wouldn’t work because it is already declared in the lib.dom.d.ts file in the TypeScript library

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

var Name = "John";
console.log("Hello, " + Name);
// Note that I used "Name" instead of just "name"
// "name" wouldn’t work because it is already declared in the lib.dom.d.ts file in the TypeScript library

输出

以上代码将产生以下输出：

Hello, John

在上面的例子中，我们声明了一个类型为string的变量name，并为其赋值“John”。然后我们使用+运算符将变量的值与一个字符串连接起来，并使用console.log()函数将结果打印到控制台。

带有类型注解的函数参数

类型注解也可以用于指定函数参数的类型。

语法

在TypeScript中使用类型注解创建函数的语法如下：

function functionName(parameterName: type): returnType {
   // function body
}

这里，functionName是函数的名称，parameterName是参数的名称，type是参数的类型。让我们来看一个例子：

示例1

function add(num1: number, num2: number): number {
   return num1 + num2;
}
console.log(add(2, 3));

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

function add(num1, num2) {
   return num1 + num2;
}
console.log(add(2, 3));

输出

以上代码将产生以下输出：

5

在上面的例子中，我们创建了一个名为add的函数，它接受两个类型为number的参数，并返回一个类型为number的值。然后我们用参数2和3调用该函数，并使用console.log()函数将结果打印到控制台。

示例2

function greet(name: string): string {
   return "Hello, " + name;
}
console.log(greet("John"));

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

function greet(name) {
   return "Hello, " + name;
}
console.log(greet("John"));

输出

以上代码将产生以下输出：

Hello, John

在上面的例子中，我们创建了一个名为greet的函数，它接受一个类型为string的参数，并返回一个类型为string的值。然后我们用参数“John”调用该函数，并使用console.log()函数将结果打印到控制台。

带有类型注解的函数返回值

类型注解也可以用于指定函数返回值的类型。

语法

在TypeScript中使用返回类型注解创建函数的语法如下：

function functionName(): returnType {
   // function body
}

这里，functionName是函数的名称，returnType是函数返回值的类型。让我们来看一个例子：

示例1

function getRandomNumber(): number {
   return Math.random();
}
console.log(getRandomNumber());

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

function getRandomNumber() {
   return Math.random();
}
console.log(getRandomNumber());

输出

以上代码将产生以下输出：

0.3822812708614216

在上面的例子中，我们创建了一个名为getRandomNumber的函数，它返回一个类型为number的随机数。然后我们调用该函数，并使用console.log()函数将结果打印到控制台。

示例2

function getUser(): { name: string, age: number } {
   return { name: "John", age: 30 };
}
console.log(getUser());

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

function getUser() {
   return { name: "John", age: 30 };
}
console.log(getUser());

输出

以上代码将产生以下输出：

{ name: 'John', age: 30 }

在上面的例子中，我们创建了一个名为getUser的函数，它返回一个包含两个属性name和age的对象。然后我们调用该函数，并使用console.log()函数将结果打印到控制台。

数组和对象的类型注解

类型注解也可以用于指定TypeScript中数组和对象的类型。

语法

在TypeScript中使用类型注解创建数组或对象的语法如下：

let arrayName: type[] = [];
let objectName: { key1: type1, key2: type2, ... } = {};

这里，arrayName是数组的名称，type是数组元素的类型，objectName是对象的名称，key1、key2等是对象的键，type1、type2等是对象属性的类型。让我们来看一个例子：

示例1

let numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers);

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

var numbers = [1, 2, 3, 4, 5];
console.log(numbers);

输出

以上代码将产生以下输出：

[ 1, 2, 3, 4, 5 ]

在上面的例子中，我们声明了一个类型为number的数组numbers，并用一些值对其进行了初始化。然后使用console.log()函数将数组的值打印到控制台。

示例2

let person: { name: string, age: number } = { name: "John", age: 30 };
console.log(person);

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

var person = { name: "John", age: 30 };
console.log(person);

输出

以上代码将产生以下输出：

{ name: 'John', age: 30 }

在上面的例子中，我们声明了一个对象person，它有两个属性：类型为string的name和类型为number的age。然后我们用一些值初始化该对象，并使用console.log()函数将该对象打印到控制台。

结论

TypeScript中的类型注解是一个强大的功能，可以帮助开发人员编写更好的代码。通过指定变量、函数参数和函数返回值的类型，TypeScript可以在开发过程的早期捕获错误，并使代码更健壮。在本教程中，我们探讨了在TypeScript中使用类型注解的不同场景以及如何使用它们来改进代码。

Rushi Javiya

更新于：2023年8月22日

563 次浏览

启动你的职业生涯

通过完成课程获得认证

开始学习