跳到主要内容

TypeScript 类型注解

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，添加了可选的静态类型系统。类型注解是 TypeScript 的核心特性之一，它允许开发者为变量、函数参数和返回值等添加类型信息，从而在编译时捕获潜在的错误，并提升代码的可读性和可维护性。

什么是类型注解？​

类型注解是一种显式地为变量、函数参数或返回值指定类型的方式。通过类型注解，TypeScript 编译器可以在代码运行之前检查类型是否匹配，从而避免许多常见的运行时错误。

在 TypeScript 中，类型注解使用冒号 : 后跟类型名称的形式来表示。例如：

typescript
let age: number = 25;

在这个例子中，age 变量被注解为 number 类型，这意味着它只能存储数字类型的值。

基本类型注解​

TypeScript 支持多种基本类型，包括 number、string、boolean、null、undefined 等。以下是一些常见的类型注解示例：

typescript
let name: string = "Alice";
let isActive: boolean = true;
let score: number = 95.5;
let nothing: null = null;
let unknown: undefined = undefined;

数组和元组​

TypeScript 还支持数组和元组的类型注解。数组类型注解使用 类型[] 或 Array<类型> 的形式，而元组则允许你指定数组中每个元素的类型。

typescript
let numbers: number[] = [1, 2, 3, 4];
let names: Array<string> = ["Alice", "Bob", "Charlie"];

let person: [string, number] = ["Alice", 25]; // 元组

对象类型​

对象类型注解允许你为对象的属性指定类型。你可以使用接口或直接为对象字面量添加类型注解。

typescript
interface Person {
  name: string;
  age: number;
}

let person: Person = {
  name: "Alice",
  age: 25,
};

函数中的类型注解​

在函数中，你可以为参数和返回值添加类型注解。这有助于确保函数接收正确的参数类型，并返回预期的结果。

typescript
function add(a: number, b: number): number {
  return a + b;
}

let result: number = add(2, 3); // 5

可选参数和默认参数​

TypeScript 还支持可选参数和默认参数。可选参数使用 ? 标记，而默认参数则直接在参数列表中指定默认值。

typescript
function greet(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}!`;
}

let message: string = greet("Alice"); // "Hello, Alice!"

实际应用场景​

类型注解在实际开发中非常有用，尤其是在处理复杂的数据结构或与外部 API 交互时。以下是一个实际应用场景：

typescript
interface User {
  id: number;
  name: string;
  email: string;
}

function getUserInfo(user: User): string {
  return `User ID: ${user.id}, Name: ${user.name}, Email: ${user.email}`;
}

let user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
};

console.log(getUserInfo(user)); // "User ID: 1, Name: Alice, Email: alice@example.com"

在这个例子中，User 接口定义了用户对象的结构，getUserInfo 函数接收一个 User 类型的参数，并返回用户信息的字符串表示。通过类型注解，我们可以确保 getUserInfo 函数始终接收正确的参数类型。

总结​

类型注解是 TypeScript 的核心特性之一，它允许开发者为变量、函数参数和返回值等添加类型信息，从而在编译时捕获潜在的错误，并提升代码的可读性和可维护性。通过掌握类型注解，你可以编写更加安全、可靠的 TypeScript 代码。

附加资源与练习​

  • 练习 1: 创建一个 Product 接口，包含 id、name 和 price 属性，并编写一个函数来打印产品信息。
  • 练习 2: 尝试为数组和元组添加类型注解，并编写一个函数来处理这些数据。
  • 资源: TypeScript 官方文档 提供了更多关于类型注解的详细信息。
提示

TypeScript 的类型系统非常强大，除了基本类型注解外，还支持联合类型、交叉类型、泛型等高级特性。建议在掌握基础后，进一步探索这些高级特性。