interface 原来是这样用的呀 ？typescript入门指南05（持续更新中）

大家好，我是王天~

这篇文章是 ts入门指南系列中第5篇，主要讲解ts中的interface接口应用，接口在ts中是比较重要的功能、兼顾类型的约束和拓展

ts 入门指南系列

1.  Ts vs Js 谁适合前端开发？ | TypeScript 入门指南 01
2. 详解 tsconfig.json配置文件 | TypeScript 入门指南 02
3. 必学！TypeScript语法类型基础 | TypeScript 入门指南 03
4. 终于搞懂TS中的泛型啦! | typescript 入门指南 04-

1、介绍

TypeScript中的接口（Interface）用于定义对象的结构和类型。接口类似于制定一份合同或规范，描述了对象应该具有的属性、方法等特征，但并不提供具体的实现。

2、接口初探

接口定义了对象应该具备的属性和方法。例如，我们可以定义一个Person接口来描述一个人的基本信息：

interface Person {
  name: string;
  age: number;
}

示例代码：

let person: Person = {
  name: "Alice",
  age: 25
};

3、可选属性

接口的属性可以是可选的，即在对象中可以存在也可以不存在。使用?来标记可选属性。例如，我们可以将年龄属性改为可选：

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

示例代码：

let person1: Person = {
  name: "Alice"
};

let person2: Person = {
  name: "Bob",
  age: 30
};

4、只读属性

接口的属性可以设置为只读，即在对象创建后不可修改。使用readonly关键字来标记只读属性。例如，我们可以将姓名属性设置为只读：

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

示例代码：

let person: Person = {
  name: "Alice",
  age: 25
};

person.name = "Bob"; // 错误，只读属性不可修改

5、额外的检查属性

当我们将一个对象赋值给接口类型的变量时，TypeScript会对该对象进行额外的检查，确保对象中没有未定义的属性。如果我们确实需要将额外的属性赋给对象，可以使用索引签名。例如：

interface Person {
  name: string;
  age?: number;
  [propName: string]: any;
}

示例代码：

let person: Person = {
  name: "Alice",
  age: 25,
  gender: "female" // 额外的属性，使用索引签名允许赋值
};

6、函数类型

接口不仅可以描述对象的结构，还可以描述函数的类型。例如，我们可以定义一个接口来描述一个求和函数：

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

示例代码：

let add: Calculator = function(a, b) {
  return a + b;
};

7、可索引的类型

接口可以描述具有索引签名的对象，例如数组或字典。索引签名允许我们使用不同的索引类型来访问对象的属性。例如，我们可以定义一个字符串数组的接口：

interface StringArray {
  [index: number]: string;
}

示例代码：

let colors: StringArray = ["red", "green", "blue"];
let color: string = colors[0];

8、类类型

接口可以用来描述类的结构和实现，类可以实现（implement）接口并满足接口的要求。例如，我们可以定义一个接口描述一个时钟类：

interface Clock {
  currentTime: Date;
  setTime(date: Date): void;
}

class DigitalClock implements Clock {
  currentTime: Date;

  constructor(date: Date) {
    this.currentTime = date;
  }

  setTime(date: Date) {
    this.currentTime = date;
  }
}

class AnalogClock implements Clock {
  currentTime: Date;

  constructor(date: Date) {
    this.currentTime = date;
  }

  setTime(date: Date) {
    this.currentTime = date;
  }
}

示例代码：

let digitalClock = new DigitalClock(new Date());
let analogClock = new AnalogClock(new Date());

9、继承接口：

接口可以继承其他接口，从而组合多个接口的特性。继承可以帮助我们更好地组织和重用代码。例如：

interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

示例代码：

let square: Square = {
  color: "red",
  sideLength: 10
};

10、混合类型

接口可以描述具有多种类型的对象，这些对象可以同时具备函数、属性等特征。这样的接口被称为混合类型接口。例如，我们可以定义一个具有倒计时功能和属性的接口：

interface Counter {
  (): void;
  count: number;
}

示例代码：

function createCounter(): Counter {
  let count = 0;
  const counter = () => {
    count++;
    console.log("Count: ", count);
  };
  counter.count = count;
  return counter;
}

let counter = createCounter();
counter(); // 输出：Count: 1
counter(); // 输出：Count: 2
console.log(counter.count); // 输出：2

11、接口继承类：

接口可以继承类的成员，但不继承其实现。这样可以使用接口来约束类的结构，使其他类可以通过实现该接口来满足特定的要求。例如：

class Control {
  private state: any;
}

interface SelectableControl extends Control {
  select(): void;
}

示例代码：

class Button extends Control implements SelectableControl {
  select() {
    console.log("Button selected.");
  }
}

总之，接口在TypeScript中起到了约束和规范的作用，使代码更加可靠、可维护。通过使用接口，我们可以明确定义对象的结构、类的实现以及函数的类型，从而提高代码的可读性和可靠性。

总结

type vs interface

type 和 interface的都有定义类型的功能，但是声明类型和继承方面是有所区分的，使用时，需根据业务场景进行区分

1. 声明类型

   • type可以表示非对象类型（字符串、numebr、、、）

   • interface 只能表示 对象类型（包括数组、函数等）

2. 继承

• type 不支持继承

• interface 可以继承其他类型 、 interface type class

如果喜欢或者 有所启发，欢迎 star，对作者也是一种鼓励。

---

TypeScript 入门指南 （持续更新中🔥🔥🔥）

期待你的三连（点赞+收藏+关注）是我最大更新动力哦