类型注解语法 - 元素码农

发布时间: 2025-03-31 09:19

↑

# 类型注解语法

TypeScript的核心特性是类型系统，而类型注解是其中最基础的概念。本文将详细介绍TypeScript中的类型注解语法。

## 什么是类型注解

类型注解是一种轻量级的为变量、函数参数和返回值添加类型信息的方式。它使用冒号（:）语法来标注类型。

## 基本语法

### 变量类型注解

```typescript
// 基本类型注解
let name: string = "TypeScript";
let age: number = 25;
let isActive: boolean = true;
let nullValue: null = null;
let undefinedValue: undefined = undefined;

// 联合类型注解
let mixed: string | number = "hello";
mixed = 42; // 有效

// 类型别名
type StringOrNumber = string | number;
let value: StringOrNumber = "test";
```

### 函数参数和返回值注解

```typescript
// 基本函数类型注解
function greet(name: string): string {
    return `Hello, ${name}!`;
}

// 可选参数注解
function printInfo(name: string, age?: number): void {
    if (age) {
        console.log(`${name} is ${age} years old`);
    } else {
        console.log(`Hello ${name}`);
    }
}

// 函数类型注解
let multiply: (x: number, y: number) => number;
multiply = (x, y) => x * y;
```

### 对象类型注解

```typescript
// 对象字面量类型注解
let user: { name: string; age: number } = {
    name: "TypeScript",
    age: 25
};

// 使用接口定义对象类型
interface Person {
    name: string;
    age: number;
    sayHello(): void;
}

let person: Person = {
    name: "TypeScript",
    age: 25,
    sayHello() {
        console.log(`Hello, I'm ${this.name}`);
    }
};
```

## 类型推断

TypeScript具有强大的类型推断能力，在很多情况下可以省略类型注解：

```typescript
// 变量类型推断
let message = "Hello"; // 推断为string类型
let number = 42;       // 推断为number类型
let items = [1, 2, 3]; // 推断为number[]类型

// 函数返回值类型推断
function add(x: number, y: number) {
    return x + y;      // 返回值类型推断为number
}
```

## 高级类型注解

### 泛型类型注解

```typescript
// 泛型函数
function identity<T>(arg: T): T {
    return arg;
}

// 泛型接口
interface Container<T> {
    value: T;
    getValue(): T;
}

// 泛型类
class Box<T> {
    constructor(private content: T) {}
    getContent(): T {
        return this.content;
    }
}
```

### 字面量类型注解

```typescript
// 字符串字面量类型
type Direction = "north" | "south" | "east" | "west";
let direction: Direction = "north";

// 数字字面量类型
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;
let roll: DiceRoll = 4;
```

## 类型断言

有时你会比TypeScript更了解某个值的类型，这时可以使用类型断言：

```typescript
// 尖括号语法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

// as语法（推荐）
let otherValue: any = "this is a string";
let otherLength: number = (otherValue as string).length;
```

## 最佳实践

1. **明确的类型注解**：
   - 在函数参数和返回值中使用明确的类型注解
   - 在公共API中使用明确的类型注解

```typescript
// 好的实践
function calculateArea(width: number, height: number): number {
    return width * height;
}

// 避免这样
function calculateArea(width, height) {
    return width * height;
}
```

2. **利用类型推断**：
   - 对于简单的变量声明，可以依赖类型推断
   - 在实现接口时，可以省略重复的类型注解

```typescript
// 好的实践
let message = "Hello"; // 类型推断为string

// 不必要的类型注解
let message: string = "Hello";
```

3. **使用接口定义复杂类型**：
   - 对于重复使用的复杂类型，使用接口或类型别名

```typescript
// 好的实践
interface UserConfig {
    name: string;
    preferences: {
        theme: string;
        notifications: boolean;
    };
}

// 避免重复的内联类型
function updateUser(user: { name: string; preferences: { theme: string; notifications: boolean } }) {
    // ...
}
```

## 常见错误和解决方案

1. **类型不匹配**：
```typescript
// 错误
let num: number = "42"; // 类型'string'不能赋值给类型'number'

// 解决方案
let num: number = parseInt("42");
```

2. **对象属性不完整**：
```typescript
// 错误
interface User {
    name: string;
    age: number;
}

let user: User = { name: "TypeScript" }; // 缺少属性'age'

// 解决方案
let user: User = { name: "TypeScript", age: 25 };
```

## 下一步

掌握了类型注解的基础语法后，你可以：

1. 学习更多高级类型用法
2. 探索泛型的应用场景
3. 实践接口和类的使用
4. 了解类型推断的工作原理

通过合理使用类型注解，你可以编写出更加健壮和可维护的TypeScript代码。