TypeScript学习第三天：初探接口Interface

原创已于 2025-07-30 17:14:16 修改 · 996 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #学习 #前端 #前端框架 #javascript

于 2025-07-10 09:40:18 首次发布

TypeScript 专栏收录该内容

9 篇文章

订阅专栏

文章目录

1. 前言
2. 什么是接口
3. 接口的基本定义与使用
4. 接口与函数
5. 接口的继承
6. 应用场景
总结

1. 前言

在前两天的学习中，我们已经掌握了 TypeScript 在 VSCode 中的自动编译方法，以及它的基本数据类型。今天，我们将进入一个新的知识点—— 接口（Interface）。接口是 TypeScript 中非常重要的概念，它为我们提供了一种定义对象结构的方式，能够让代码更加规范、可维护，同时也增强了类型检查的能力。

点此 👉 前期回顾

2. 什么是接口

简单来说，接口就像是一份“契约”，它定义了对象应该具有的属性和方法。当一个对象遵循某个接口时，就必须按照接口规定的结构来实现，包括属性的名称、类型以及方法的参数和返回值类型等。这样一来，我们在编写代码时，就能明确知道对象应该具备哪些特征，避免出现结构不匹配的错误。

接口本身并不会被编译成 JavaScript 代码，它只是 TypeScript 编译器用来进行类型检查的工具。这意味着接口不会增加最终代码的体积，只会在开发阶段发挥作用。

3. 接口的基本定义与使用

下面是一些基本的定义方式：

3.1. 定义对象结构

我们可以使用 interface 关键字来定义一个接口。下面是一个简单的例子，定义了一个描述用户信息的接口 User：

interface User {
  name: string;
  age: number;
  isStudent: boolean;
}

这个接口规定了一个 User 类型的对象必须包含 name（字符串类型）、age（数字类型）和 isStudent（布尔类型）这三个属性。

当我们创建一个符合该接口的对象时，TypeScript 会自动进行类型检查：

const user1: User = {
  name: "张三",
  age: 20,
  isStudent: true
}; // 正确，符合接口定义

const user2: User = {
  name: "李四",
  age: "22" // 错误，age 应为 number 类型
};

const user3: User = {
  name: "王五" // 错误，缺少 age 和 isStudent 属性
};

从上面的例子可以看出，如果对象的结构不符合接口的定义，TypeScript 编译器就会报错，及时提醒我们修正错误。

3.2. 可选属性

在实际开发中，有些属性可能不是必需的，这时我们可以在接口中定义可选属性。只需在属性名后面加上 ? 即可：

interface Person {
  name: string;
  age?: number; // 可选属性
  gender?: string; // 可选属性
}

const person1: Person = {
  name: "赵六"
}; // 正确，可选属性可以不提供

const person2: Person = {
  name: "孙七",
  age: 25
}; // 正确，提供了部分可选属性

const person3: Person = {
  name: "周八",
  age: 30,
  gender: "男"
}; // 正确，提供了所有属性

可选属性的存在让接口更加灵活，能够适应不同场景下对象的结构差异。

3.3. 只读属性

有时候，我们希望对象的某些属性在创建后就不能被修改，这时可以使用只读属性。在属性名前面加上 readonly 关键字即可：

interface Book {
  readonly id: number;
  title: string;
  author: string;
}

const book: Book = {
  id: 1,
  title: "TypeScript入门",
  author: "张三"
};

book.title = "TypeScript进阶"; // 正确，可以修改非只读属性
book.id = 2; // 错误，只读属性不能被修改

通过定义只读属性，我们可以保证对象某些关键信息的稳定性，防止意外修改导致的错误。

4. 接口与函数

接口不仅可以描述对象的结构，还可以用来定义函数的参数和返回值类型。这种方式可以让函数的定义更加清晰。

interface Calculate {
  (a: number, b: number): number;
}

const add: Calculate = (x, y) => {
  return x + y;
};

const multiply: Calculate = (x, y) => {
  return x * y;
};

console.log(add(2, 3)); // 输出 5
console.log(multiply(2, 3)); // 输出 6

在上面的例子中，接口 Calculate 定义了一个函数类型，该函数接收两个 number 类型的参数，并返回一个 number 类型的值。然后我们定义了 add 和 multiply 两个函数，它们都符合 Calculate 接口的定义。

5. 接口的继承

接口和类一样，也可以实现继承。一个接口可以继承另一个或多个接口，从而复用已有接口的定义，并在此基础上添加新的属性或方法。

interface Animal {
  name: string;
  eat(): void;
}

interface Dog extends Animal {
  bark(): void;
}

// 实现 Dog 接口的对象必须包含 name 属性，以及 eat 和 bark 方法
const dog: Dog = {
  name: "旺财",
  eat() {
    console.log("狗在吃东西");
  },
  bark() {
    console.log("汪汪汪");
  }
};