TS - interfaces 初探

interfaces英文翻译为接口，百度百科上解释为interface是面向对象编程语言中接口操作的关键字，功能是把所需成员组合起来，用来装封一定功能的集合。那么它在ts这个语言中究竟扮演怎样的角色，有什么用途。

interfaces 是什么

理解起来 interfaces就是约定了一个编程的规范而已，它规定了要实现的一系列方法和属性。也就是说interface其实是一种描述对象或函数的东西，它是一种约束形式，比如一个对象需要有什么样的属性，函数需要什么参数或返回什么样的值，数组应该是什么样子的，一个类和继承类需要符合什么样的描述等等。

了解了interface是什么，那么在不同的情况下我们怎么去使用interfaces呢？

---

interfaces 怎么用

对象 Interface

1. 定义对象需要的属性
2. 设置可选属性
3. 设置只读属性
4. 可以通过 as 或 [propName: string]: any 来定义对象属性的数据类型

例子：

interface  people {
    Name : String,
    age:number,
    height?: number,//设置可选属性，可有可恶✅
    readonly gender:String, //设置只读属性✅
}
const zhangSan:people = {
    Name: "张三",
    age:1,
    gender:'男'
}
zhangSan.gender = "女"//报错，只读属性不可修改 ❌

函数 Interface

1. 定义函数接口
2. 定义函数入参的类型
3. 使用函数表达式
4. 调用函数，写入出参

例子：

interface Fun {(
    x:string,//定义函数接收的第一个必选参数为string类型✅
    y:number,//定义函数接收的第二个必选参数为number类型✅
    z?:boolean,//定义函数接收的第三个可选参数为boolean类型✅
)}

const add: Fun = function (x:string, y:number, z = false){
    console.log(x, y, z)
}

add('张三',12)

可索引的类型

我们也可以描述那些能够“通过索引得到”的类型，例如arr[0]。可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

1. 定义一个可索引类型
2. 设置索引类型
3. 定义数组调用该规范

例子：

interface StringArray {
    readonly [index: number]:string, //❗ 需要注意的是 index 只能为 number 类型或 string 类型
    length: number //指定属性👀
}

let arr1: StringArray = ["1","2","3"] 

arr1[1] = "4" // ❌ 由于索引设置为只读属性，arr1[1]不能赋值

let arr: StringSet = [23,12,3,21] // ❌ 数组应为 string 类型

类 Interface

实现（implements）是面向对象中的一个重要概念。一个类只能继承自另一个类，不同类之间可以有一些共有的特性，就可以把特性提取成接口（interfaces），用 implements 关键字来实现。

Interface 也可以用来定义一个类的规范。需要注意的是类 Interface 只会检查实例的属性，静态属性是需要额外定义一个 Interface；
例如：

// ? PersonConstructor 是用来检查静态部分的
interface PersonConstructor {
    new (name: string, age: number) // ✔️ 这个是用来检查 constructor 的
    typename: string // ✔️ 这个是用来检查静态属性 typename 的
    logname(): void // ✔️ 这个用来检查静态方法 logname 的
}
// ? PersonInterface 则是用来检查实例部分的
interface PersonInterface {
    // new (name: string, age: number) // ❌ 静态方法的检查也不能写在这里 这样写是错误的
    log(): void // : 这里定义了实例方法 log
}

// class Person implements PersonInterface, PersonInterface { ❌ 这样写是错误的
const Person: PersonConstructor = class Person implements PersonInterface {
    name: string
    age: number
    static typename = 'Person type' // 这里定义了一个名为 typename 的静态属性
    static logname() { // 这里定义了一个名为 logname 的静态方法
        console.log(this.typename)
    }
    constructor(name: string, age: number) { // constructor 也是静态方法
        this.name = name
        this.age = age
    }
    log() { // log 是实例方法
        console.log(this.name, this.age)
    }
}

接口间的继承

• 接口可以通过其他接口来扩展自己。
• Typescript 允许接口继承多个接口。
• 继承使用关键字 extends。

1. 单接口继承

extends 关键字后加继承的接口

interface Person {
  name: string,
  age: number
}
interface Students extends Person {
  gender: string
}
const foo: Students = {
  name: 'why',
  age: 18,
  gender: 'female'
}

2. 多接口继承

多接口之间逗号分隔

interface Sing {
  sing(): void
}
interface Jump {
  jump(): void
}
interface Rap extends Sing, Jump {
  rap(): void
}
const foo: Rap = {
  sing(){},
  jump(){},
  rap(){}
}

3. 接口继承类

常见的面向对象语言中，接口是不能继承类的，但是在 TypeScript 中却是可行的
用extends关键字继承类

class Person {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  run(): void { }
}
interface User extends Person {
  gender: string
}
const foo: User = {
  name: 'foo',
  age: 18,
  gender: 'male',
  run():void { }
}

---

友情链接：
es6中class类静态方法，静态属性理解，实例属性，实例方法理解
extends和implements区别

---

参考资料
https://www.jianshu.com/p/099c5683ffb5
https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Interfaces.html
https://cloud.tencent.com/developer/article/1411764