前言
Typescript是前端离不开的一项技术了，作为初学者，学习起来又很费劲！官网文档又臭又长，狗都不看！网上教程一上来就是20小时，让人望而生怯！
对于Typescript，我们其实并不需要学的非常深入，简单了解简单使用就好了！因此，一篇节省时间，通俗易懂的教程很重要！
本文就要简单但高效的带你入门ts的接口定义！
关联的上一篇文章： TypeScript【基础类型】超简洁教程！再也不用看臭又长的TypeScript文档了！
接口简介
TypeScript 接口（interface）是一种用于定义对象类型的方式。接口能够描述对象的结构，包括属性的名称、类型以及方法的签名。接口在 TypeScript 中广泛用于类型检查，使得代码更加严谨和易于维护。
/*
在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型
接口: 是对象的状态(属性)和行为(方法)的抽象(描述)
接口类型的对象
多了或者少了属性是不允许的
可选属性: ?
只读属性: readonly
*/
/*
需求: 创建人的对象, 需要对人的属性进行一定的约束
id是number类型, 必须有, 只读的
name是string类型, 必须有
age是number类型, 必须有
sex是string类型, 可以没有
*/
// 定义人的接口
interface IPerson {
id: number
name: string
age: number
sex: string
}
const person1: IPerson = {
id: 1,
name: 'tom',
age: 20,
sex: '男'
}
类型检查器会查看对象内部的属性是否与IPerson接口描述一致, 如果不一致就会提示类型错误。
可选属性
接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。
interface IPerson {
id: number
name: string
age: number
sex?: string //可选属性
}
带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号。
可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。
const person2: IPerson = {
id: 1,
name: 'tom',
age: 20,
// sex: '男' // 可以没有
}
只读属性
一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly 来指定只读属性:
interface IPerson {
readonly id: number
name: string
age: number
sex?: string
}
一旦赋值后再也不能被改变了。
const person2: IPerson = {
id: 2,
name: 'tom',
age: 20,
// sex: '男' // 可以没有
// xxx: 12 // error 没有在接口中定义, 不能有
}
person2.id = 2 // error
函数类型
接口能够描述 JavaScript 中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。
为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
//接口可以描述函数类型(参数的类型与返回的类型)
interface SearchFunc {
(source: string, subString: string): boolean
}
这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。 下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。
const mySearch: SearchFunc = function (source: string, sub: string): boolean {
return source.search(sub) > -1
}
console.log(mySearch('abcd', 'bc'))
类实现接口
与 C# 或 Java 里接口的基本作用一样，TypeScript 也能够用它来明确的强制一个类去符合某种契约。
//定义一个接口
interface Ifly{
fly()
}
//implements 英[ˈɪmplɪments]美[ˈɪmplɪments]
//v. 使生效; 贯彻; 执行; 实施;
//这里的implements是定义类后的一种实现方式前加的关键词
//定义一个类,这个类的类型就是上面定义的接口（实际上也可以理解为Ifly接口约束了当前的Person类）
class person implements Ifly{
//实现接口中的方法
fly() {
console.log('我可以飞了！！！！')
}
}
//实例化对象
const myPerson = new person()
myPerson.fly()
//定义一个接口
interface swim{
swim()
}
//定义一个类,这个类的类型就是Ifly,swim（当前这个类可以实现多个接口，一个类同时也可以被多个接口进行约束）
class superman implements Ifly,swim{
fly() {
console.log('我依旧可以飞！！')
}
swim() {
console.log('我可以游泳！')
}
}
//实例化对象
const miniSuperman = new superman()
miniSuperman.fly()
miniSuperman.swim()
//总结：类可以通过接口的方式，老定义当前这个类的类型
//类可以实现 一个接口，类也可以实现多个接口，要注意，接口中的内容都要真正的实现
接口继承接口
和类一样，接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。
//定义一个接口，继承其他的多个接口
interface flyAndSwim extends Ifly,swim{
}
//定义一个类，直接实现 flyAndSwim这个接口
class person3 implements flyAndSwim{
fly() {
console.log('我依旧可以飞！!!!！')
}
swim() {
console.log('我依旧可以游泳！！')
}
}
const miniPerson3 = new person3()
miniPerson3.fly()
miniPerson3.swim()
代码演示：
interface Rules {
//定义一个email对象，其值是一个数组，数组的每一页都符合
//{ type: string; message: string; ...}内的类型
email: {
type: string;
message: string;
required: boolean;
trigger: string;
}[];
}
项目中的实战演练
一个常见的场景是定义一个应用程序中的数据模型。让我们以一个简单的示例来说明：假设我们正在构建一个社交媒体应用程序，需要定义用户的数据模型。我们可以使用接口来描述用户对象的结构。让我们来实现这个示例：
// 定义用户接口
interface User {
id: number;
username: string;
email: string;
age?: number; // 年龄是可选的
createdAt: Date;
}
// 创建用户对象
const user1: User = {
id: 1,
username: '奥德彪',
email: 'jlxj.com',
};
const user2: User = {
id: 2,
username: '拉香蕉',
email: 'xj.com',
age: 25,
};
// 打印用户信息
console.log('User 1:', user1);
console.log('User 2:', user2);
在这个示例中，我们首先定义了一个名为 User 的接口，描述了用户对象的结构，包括 id、username、email、age 属性。然后，我们创建了两个用户对象 user1 和 user2，分别代表两个不同的用户。最后，我们打印了用户的信息。
