接口与对象 - 元素码农

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

↑

# 接口与对象

TypeScript中的接口是一种强大的方式来定义对象的结构和契约。本文将详细介绍接口的定义和使用方法。

## 接口基础

### 基本接口定义

```typescript
// 定义一个基本接口
interface User {
    name: string;
    age: number;
}

// 使用接口
let user: User = {
    name: "TypeScript",
    age: 25
};
```

### 可选属性

```typescript
interface Config {
    color?: string;    // 可选属性
    width?: number;    // 可选属性
    height: number;    // 必需属性
}

// 使用可选属性
let config: Config = {
    height: 100        // 只提供必需属性
};

let fullConfig: Config = {
    color: "red",
    width: 200,
    height: 100
};
```

### 只读属性

```typescript
interface Point {
    readonly x: number;
    readonly y: number;
}

let point: Point = { x: 10, y: 20 };
// point.x = 5; // 错误：x是只读属性
```

## 函数类型接口

### 函数接口定义

```typescript
// 定义函数类型接口
interface MathFunc {
    (x: number, y: number): number;
}

// 实现函数接口
let add: MathFunc = function(x: number, y: number): number {
    return x + y;
};

let multiply: MathFunc = function(x: number, y: number): number {
    return x * y;
};
```

### 可调用和可构造接口

```typescript
interface CallableInterface {
    (param: string): void;    // 可调用
    prefix: string;           // 属性
    log(text: string): void;  // 方法
}

interface ConstructableInterface {
    new (param: string): object;  // 构造函数签名
}
```

## 扩展接口

### 接口继承

```typescript
// 基础接口
interface Animal {
    name: string;
}

// 扩展接口
interface Dog extends Animal {
    breed: string;
}

// 使用扩展接口
let dog: Dog = {
    name: "Rover",
    breed: "Labrador"
};
```

### 多重继承

```typescript
interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

// 继承多个接口
interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square: Square = {
    color: "blue",
    penWidth: 2,
    sideLength: 10
};
```

## 混合类型

```typescript
// 一个对象可以同时作为函数和对象使用
interface Counter {
    (start: number): string;  // 函数
    interval: number;         // 属性
    reset(): void;           // 方法
}

## 接口与类

### 类实现接口

```typescript
interface Printable {
    print(): void;
}

class Document implements Printable {
    print() {
        console.log("Printing document...");
    }
}
```

### 接口继承类

```typescript
class Control {
    private state: boolean;
}

// 接口继承类
interface SelectableControl extends Control {
    select(): void;
}

// 必须是Control的子类才能实现SelectableControl接口
class Button extends Control implements SelectableControl {
    select() { }
}
```

## 索引类型

### 索引签名

```typescript
// 字符串索引
interface StringArray {
    [index: number]: string;  // 数字索引返回字符串
}

let myArray: StringArray = ["Bob", "Fred"];

// 混合索引
interface Dictionary {
    [key: string]: any;       // 字符串索引
    length: number;           // 具体属性
}
```

## 最佳实践

1. **使用接口定义对象结构**：
```typescript
// 好的实践
interface UserConfig {
    name: string;
    preferences: {
        theme: string;
        notifications: boolean;
    };
}

// 避免使用内联类型
function updateUser(config: UserConfig) {
    // ...
}
```

2. **接口命名约定**：
```typescript
// 使用PascalCase命名接口
interface UserProfile {
    // ...
}

// 避免使用I前缀（除非团队规范要求）
interface IUserProfile { // 不推荐
    // ...
}
```

3. **合理使用可选属性**：
```typescript
interface FormConfig {
    required: boolean;      // 必需属性
    maxLength?: number;     // 真正可选的属性
    validate?: () => boolean; // 可选的方法
}
```

## 常见问题

1. **多余属性检查**：
```typescript
interface User {
    name: string;
}

// 错误：对象字面量只能指定已知属性
let user: User = {
    name: "John",
    age: 30  // 错误：多余的属性
};

// 解决方案：使用类型断言或索引签名
interface FlexibleUser {
    name: string;
    [key: string]: any;
}
```

2. **接口合并**：
```typescript
// 接口声明合并
interface Box {
    height: number;
}
interface Box {
    width: number;
}

// 等同于
interface Box {
    height: number;
    width: number;
}
```

## 下一步

掌握了接口和对象类型后，你可以：

1. 学习类的使用
2. 探索泛型接口
3. 实践面向接口编程
4. 了解高级类型系统特性

通过合理使用接口，你可以创建更加健壮和可维护的TypeScript代码。