大家好，我是王天~
这篇文章是 ts入门指南系列中第5篇，主要讲解ts中的interface接口应用，接口在ts中是比较重要的功能、兼顾类型的约束和拓展
ts 入门指南系列
- Ts vs Js 谁适合前端开发？ | TypeScript 入门指南 01
- 详解 tsconfig.json配置文件 | TypeScript 入门指南 02
- 必学！TypeScript语法类型基础 | TypeScript 入门指南 03
- 终于搞懂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的都有定义类型的功能，但是声明类型和继承方面是有所区分的，使用时，需根据业务场景进行区分
-
声明类型
-
type可以表示非对象类型（字符串、numebr、、、）
-
interface 只能表示 对象类型（包括数组、函数等）
-
-
继承
-
type 不支持继承
-
interface 可以继承其他类型 、 interface type class
如果喜欢或者 有所启发，欢迎 star，对作者也是一种鼓励。
TypeScript 入门指南 （持续更新中🔥🔥🔥）
期待你的三连（点赞+收藏+关注）是我最大更新动力哦