前端技术回顾系列 04 ｜初学接口

CodeFit

已于 2024-07-25 10:32:33 修改

阅读量381

点赞数 8

分类专栏：前端技术回顾系列 2024 文章标签：前端 javascript typescript

于 2024-06-06 09:43:04 首次发布

本文链接：https://blog.csdn.net/weixin_42539021/article/details/139489021

版权

前端技术回顾系列 2024 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在微信中阅读，关注公众号：CodeFit。

创作不易，如果你觉得这篇文章对你有帮助，请不要忘了点赞、分享和关注我的公众号：CodeFit，为我的持续创作提供一些动力。

大纲

引言
接口的基本概念
使用接口定义变量
可选属性
只读属性
方法签名

1. 引言

在之前的内容中，我们回顾了数组类型。

本文将介绍另一个常用的数据类型 - 对象类型（Object Type），并引入一个新的概念——接口（Interface）。

接口是 TypeScript 中一个非常重要和强大的工具。

这个特性可以帮助我们定义对象的结构，从而确保代码的类型安全性和可维护性。

2. 接口的基本概念

接口是 TypeScript 中用来描述对象结构的一种方式。

通过接口，我们可以定义对象中有哪些属性、属性的类型是什么以及有哪些方法。

作为一个强大的工具，利用好接口的能力可以让我们实现更好的类型检查和代码组织。

定义接口：
- 接口使用 interface 关键字来定义。
- 接口名称通常是大写开头，建议加上 I 前缀以表示是接口（非强制）。

interface IPerson {
    name: string,
    age: number,
}

3. 使用接口来定义变量

定义变量并使用接口：
- 使用接口来定义变量，这个变量需要符合接口定义的结构。

let codefit: IPerson = {
    name: 'CodeFit',
    age: 20
}

属性的匹配：
- 如果定义的对象缺少接口中定义的属性，或者多了额外的属性，都会报错。

let codefit: Person = {
  name: 'CodeFit'
  // 错误：缺少 age 属性
};

let codefit: Person = {
  name: 'CodeFit',
  age: 20,
  id: 1
  // 错误：多了 id 属性
};

4. 可选属性

可选属性：
- 在接口中可以使用 ? 来标记属性为可选的，这样在定义对象时，其属性可以存在，也可以不存在。

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

let codefit: Person = {
  name: 'CodeFit'
  // 正确：age 属性可以不存在
};

5. 只读属性

只读属性：
- 使用 readonly 关键字定义只读属性，这个属性只能在对象创建时被赋值，之后不能被修改（重新赋值）。

interface Person {
  readonly id: number;
  name: string;
  age?: number;
}

let codefit: Person = {
  id: 1,
  name: 'CodeFit',
  age: 20
};

codefit.id = 2; // 错误：只读属性不能被修改

区别于 const ：
- readonly 用于对象的属性，而 const 用于变量。const 定义的变量不能重新赋值，而 readonly 定义的属性不能被修改。

6. 方法签名

接口中可以通过方法来定义对象的行为，但是，这些方法在接口中只能以 方法签名 的方式存在，然后在对象中实现。

方法签名（Method Signature） 指的是方法的名称、参数类型和返回值类型的组合，不包括具体的实现 。

在 TypeScript 中，方法签名 用于描述函数和方法的类型，后面我们还会介绍 函数类型接口（一个接口用于描述函数的类型，包括其参数类型和返回值类型）。

在接口中定义方法，其语法和定义函数一样，我们将在下一篇开始函数的内容。

interface IPerson {
  name: string;
  age?: number;
  greet(): string;
}

let codefit: IPerson = {
  name: 'Codefit',
  age: 20,
  greet: function() {
    return `Hello, my name is ${this.name}`;
  }
};

console.log(codefit.greet()); // 输出: Hello, my name is Codefit