TS – interfaces 初探-一一网

这是我参与更文挑战的第4天，活动详情查看：更文挑战

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

?interfaces 是什么

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

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

?interfaces 怎么用

对象 Interface

定义对象需要的属性
设置可选属性
设置只读属性
可以通过 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

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

例子：

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]。可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

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

例子：

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 { }
}
复制代码