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

在上面的例子中，我们声明了一个名为name的变量，类型为string，并赋予它一个值”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的函数，它接受一个类型为字符串的参数并返回一个类型为字符串的值。然后我们使用参数”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，它返回一个具有两个属性名称和年龄的对象。然后我们调用该函数并使用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 ]

在上面的例子中，我们声明了一个名为numbers的数组，其类型为number，并初始化了一些值。然后使用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，具有两个属性name（字符串类型）和age（数字类型）。然后我们用一些值对对象进行了初始化，并使用console.log()函数将对象打印到控制台。

结论

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