typescript之接口

ts接口主要用来定义一个对象的类型，通过interface关键字来定义

简单的例子：

//类型为Person的变量，必须是对象，且存在name属性是string，age属性是number
interface Person {
  name: string;
  age: number;
}

const xiaoming: Person = {
  name: 'xiaoming',
  age: 18
}

属性可选

有些时候我们不确定对象的某个属性是否存在，这时候就需要将该属性设置成可选属性

//money属性为可选，所以类型为person的变量可以有money属性，也可以没有money属性

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

const xiaoming: Person = {
  name: 'xiaoming',
  age: 18
}

const xiaohong: Person = {
  name: 'xiaohong',
  age: 17,
  money: 10000
}

console.log(xiaoming)
console.log(xiaohong)

只读属性

字面上的意思，如果某个属性的类型定义为只读，那么改接口的变量不能修改该属性，举个例子

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

const xiaohong: Person = {
  name: 'xiaohong',
  age: 17
}
console.log(xiaohong.age) //pass
xiaohong.age = 18  //报错

混合类型

当一个函数既可以直接调用，🈶拥有一些属性的时候，就需要使用interface定义函数类型

interface Func {
  (name: string): string;
  age: number;
}

let func: Func
const myFunc = function (name) {
  return ''
}
myFunc.age = 18
func = myFunc
console.log(func)

类型索引

当定义数组或者不确定属性的对象时，可以使用类型索引

简单的例子：

interface StringObject {
  [key:string]:string
}

const strobj:StringObject = {
  a:'hello',
  b:'message'
}


//如果索引是number，那么该类型也可作为数组
interface ArrayInter {
  [key:number]:string
}

const arr = ['hello','message']

一旦定义了类型索引，那么再定义具名属性类型必须与索引类型一致

interface AnyObject {
  [key: string]: string;
  age: string; //pass
  // age: number; //报错，与索引类型不匹配,age必须定义为string类型
}

类类型

interface除了能约束普通变量，也可以约束类，让类按照约定来实现

简单的例子：

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

//通过implements关键字来约束Xiaomin按照Person类型来实现
class Xiaomin implements Person {
  name = 'xiaomin'
  age = 18
}

也可以约束类型中的方法

interface Person {
  getMoney(num:number):number
}

class Xiaomin implements Person {
  getMoney(num) {
    return num * 10
  }
}

除了能约束实class的成员属性，自定义接口也可以约束class的构造函数

直接约束构造函数会报错

 interface Person {
    new(name: string, age: number);
 }
 class Xiaomin implements Person {} //报错

可通过约束构造函数的返回值从而达到约束效果

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

interface Person {
  new(name: string, age: number): PersonInstance;
}

class Xiaohong implements PersonInstance {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

const xiaohong: Person = Xiaohong

接口继承

接口和class一样，可以继承

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

interface Teacher extends Person {
  job: string;
}

可以继承多个接口

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

interface Worker {
  workTime: number;
}

interface Teacher extends Person, Worker {
  job: string;
}

一个接口也可以继承一个class，例如：

class Action {
  run = true;
}
interface Man extends Action {
  sit: boolean;
}

const man: Man = {
  run: false,
  sit: true
}