12. TypeScript接口（Interface）

最新推荐文章于 2025-07-07 00:11:14 发布

原创最新推荐文章于 2025-07-07 00:11:14 发布 · 1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #前端

TypeScript 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了TypeScript中的接口，包括其基础概念、声明方法、在对象、函数和类中的应用，以及可选属性、只读属性、动态属性、继承和合并的使用。帮助开发者全面掌握接口在TypeScript中的作用和复杂性管理。

1. 引言

在TypeScript中，接口（Interface）是一种非常重要的工具。它们允许我们定义代码中的结构，使得我们可以在编译阶段就能发现可能的错误。接口在TypeScript中的角色是至关重要的，它们为我们提供了一种强大的方式来定义和组织我们的代码。

在接下来的部分中，我们将详细介绍TypeScript的接口，包括它们的基础知识、如何使用它们，以及它们在实际开发中的应用。我们希望通过这篇文章，你能对TypeScript的接口有一个全面、深入的理解。

2. TypeScript接口基础

2.1 接口的定义

在TypeScript中，接口是一种强大的声明方式，它可以用来描述对象的形状，也可以描述函数、类、数组等的结构。

// 定义一个接口
interface Person {
    name: string;
    age: number;
}
//在上面的代码中，我们定义了一个名为Person的接口，它有两个属性：name和age。

2.2 接口的作用

接口的主要作用是为这些类型命名和为你的代码或第三方代码定义契约。

// 使用接口
let tom: Person = {
    name: 'Tom',
    age: 25
};
//在上面的代码中，我们声明了一个变量tom，它的类型是Person。这意味着，我们不能给tom添加未在Person接口中定义的属性，也不能少给tom赋值在Person接口中定义的属性。

2.3 如何声明一个接口

在TypeScript中，我们使用interface关键字来声明一个接口，接口的名称通常我们会首字母大写。

// 声明一个接口
interface Animal {
    name: string;
    age: number;
    isPet: boolean;
}
//在上面的代码中，我们声明了一个名为Animal的接口，它有三个属性：name、age和isPet。

3.接口的详细解析

在这一部分，我们将详细解析TypeScript接口的一些重要特性，包括可选属性、只读属性和动态属性。

3.1 可选属性

在TypeScript的接口中，我们可以定义一些可选属性，这些属性在实际使用时可以不存在。

// 定义一个接口，其中包含一个可选属性
interface Car {
    brand: string;
    model: string;
    year?: number;  // 这是一个可选属性
}
//在上面的代码中，我们定义了一个名为Car的接口，它有一个可选属性year。这意味着，当我们声明一个Car类型的变量时，year属性可以不存在。

3.2 只读属性

在TypeScript的接口中，我们可以定义一些只读属性，这些属性在赋值后就不能再被修改。

// 定义一个接口，其中包含一个只读属性
interface Book {
    readonly title: string;  // 这是一个只读属性
    author: string;
}
 
//在上面的代码中，我们定义了一个名为Book的接口，它有一个只读属性title。这意味着，当我们声明一个Book类型的变量并赋值后，title属性就不能再被修改。

3.3 动态属性

在TypeScript的接口中，我们可以定义一些动态属性，这些属性的名称和数量在编写代码时可能并不确定。

// 定义一个接口，其中包含一个动态属性
interface Config {
    [propName: string]: any;
}
 
//在上面的代码中，我们定义了一个名为Config的接口，它有一个动态属性。这意味着，我们可以给符合Config接口的对象添加任意数量和名称的属性。

4. 函数类型的接口

在TypeScript中，接口不仅可以用来描述对象的形状，还可以用来描述函数的形状。

4.1 函数类型接口的定义

我们可以通过接口的方式来定义一个函数需要符合的形状。

// 定义一个函数类型的接口
interface SearchFunc {
    (source: string, subString: string): boolean;
}

//在上面的代码中，我们定义了一个名为SearchFunc的接口，它描述了一个函数的形状。这个函数接受两个参数，都是字符串类型，返回值是布尔类型。

4.2 函数类型接口的使用

定义了函数类型的接口后，我们就可以像使用其他接口一样使用它。

// 使用函数类型的接口
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}
 
//在上面的代码中，我们首先声明了一个变量mySearch，它的类型是SearchFunc。然后我们给mySearch赋值了一个函数，这个函数的参数和返回值都符合SearchFunc接口的定义。

5. 类类型的接口

在TypeScript中，接口也可以用来明确地强制一个类去符合某种契约。

5.1 类类型接口的定义

我们可以通过接口的方式来定义一个类需要符合的形状。

// 定义一个类类型的接口
interface ClockInterface {
    currentTime: Date;
    setTime(d: Date): void;
}

//在上面的代码中，我们定义了一个名为ClockInterface的接口，它描述了一个类的形状。这个类有一个属性currentTime和一个方法setTime。

5.2 类类型接口的使用

定义了类类型的接口后，我们就可以像使用其他接口一样使用它。

// 使用类类型的接口
class Clock implements ClockInterface {
    currentTime: Date = new Date();
    setTime(d: Date) {
        this.currentTime = d;
    }
}
//在上面的代码中，我们首先声明了一个类Clock，它实现了ClockInterface接口。这意味着，我们必须在Clock类中实现currentTime属性和setTime方法。

6. 扩展接口

在TypeScript中，接口可以继承其他接口，这使得我们可以创建出复杂的接口，同时保持每个接口的职责单一。

6.1 接口的继承

我们可以通过extends关键字来实现接口的继承。

// 定义一个接口，继承自另一个接口
interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

//在上面的代码中，我们定义了一个名为Square的接口，它继承自Shape接口。这意味着，Square接口不仅有sideLength属性，还有Shape接口的color属性。

6.2 接口的合并

在TypeScript中，如果定义了两个名字相同的接口，那么它们会自动合并为一个接口。

// 定义两个名字相同的接口
interface Box {
    height: number;
    width: number;
}

interface Box {
    scale: number;
}

let box: Box = {height: 5, width: 6, scale: 0.5};
 
//在上面的代码中，我们定义了两个名为Box的接口。在TypeScript编译时，它们会自动合并为一个接口，这个接口有height、width和scale三个属性。