Typescript学习之接口interface的理解

Typescript学习之接口interface的理解

官方介绍-- interface

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 
它有时被称做“鸭式辨型法”或“结构性子类型化”。 
在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

个人理解

  interface是对对象，函数，类的一种抽象实现和规范，约定，契约。
  Typescript会根据interface中定义的字段和类型对具体实现的对象，函数和类进行类型检查。

下面是一些用interface接口定义的案例(对象，函数，类依次举例）,以及接口的其他一些概念。

对象

用接口定义一个后台响应回来的response对象,[propName : string] : any表示不确定的字段名,可传可不传

 interface ResponseData {
   [propName : string] : any
}
interface ResponseBody{
    code : string,
    msg : string,
    data : ResponseData
}
new Promise((resolve,rejected)=> {
   resolve({})
}).then((res:ResponseBody | unknown):void=> {

})

用接口定义一个前端传参对象, suppilerName?: string表示可选属性，可以传也可以不传，readonly 表示只读,也就是说在创建完之后不能再修改

interface ResquestObj {
    name : string,
    password : string,
    readonly token : string,
    suppilerName?: string
}

readonly和const区别的笔记

readonly vs const
最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 
做为变量使用的话用 const，若做为属性则使用readonly。

索引签名

数字索引

下面是一个数组的接口，规定了下标是数字，数组元素是对象，对象里的字段也可以用接口定义，这里就不定义了，数组元素还可以是字符串或者数字，布尔值,null,undefined

interface List {
    [index:number] : object 
}

字符串索引

  interface NumberDictionary {
    [index: string]: number;
    length: number;    
    name: number       
  }
  let obj : NumberDictionary = {
    name : 111,
    data : 222,
    length : 3333
  }
  obj.aaa = 444

定义一个接口NotOkays ,数字索引的返回值Dogs,是字符串返回值Animals的子类

class Animals {
  name: string
  constructor() {
    this.name = ''
  }
}
class Dogs extends Animals {
  breed: string
  constructor() {
    super()
    this.breed = ''
  }
}

interface NotOkays {
  [x: number]: Dogs
  [x: string]: Animals
}

索引签名笔记

TypeScript支持两种索引签名：字符串和数字。 可以同时使用两种类型的索引，
但是数字索引的返回值必须是字符串索引返回值类型的子类型。 
这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。
也就是说用 100（一个number）去索引等同于使用"100"（一个string）去索引，因此两者需要保持一致。

函数

定义一个函数接口,x和y是参数类型，：string是返回值类型

interface addFunc {
  (x: number, y: string): string
}
let add: addFunc = function (a:number, b:string) {
  return a + b
}

类

implements关键字用来做类和接口的实现

interface Person {
  name: string
  setName(name: string): void
}
class LiHua implements Person {
  name: string = ''
  setName(name: string): void {
    this.name = name
  }
  constructor(name: string) {}
}

我们可以用两个接口来分别对类的静态部分和实例部分进行抽象化

   interface PersonInterface {
      setName(): void
   }
   interface PersonConstructor {
     new (name: string): PersonInterface
   }

接口实现：person函数接受两个参数，一个参数是符合PersonConstructor 接口的构造函数,一个参数是name。返回一个符合PersonInterface 接口的类实例。

    function person(func: PersonConstructor, name: string): PersonInterface {
      return new func(name)
    }

继承接口

接口继承接口可以理解成接口合并,下面是案例演示

interface Dog {
  name: string
}
interface Cat {
  sex: string
}
interface Mouse {
  legs: string
}
interface Animals extends Dog, Cat, Mouse {
  age: number
}
let animal = <Animals>{}
animal.name = '斑马'
animal.sex = '公'
animal.legs = '4'
animal.age = 2

混合类型

混合类型可以理解为一个接口既可以用来规范对象，也可以用来规范函数,并且可以有额外的属性或方法

interface Clock {
  (start: number): string
  time: Date
  setTime(): void
}
function ClockFunc(): Clock {
  let clock = <Clock>function ({ start: number }) {}
  clock.time = new Date()
  clock.setTime = function () {}
  return clock
}
let clock2 = ClockFunc()

接口继承类

Car类中有一个私有属性name，HuoChe 接口继承了Car 类,包含了Car类所有成员,只有Car和Car的子类才能实现这个接口,所以在实现HuoChe 接口前要先继承Car

class Car {
  private name: string = ''
}
interface HuoChe extends Car {
  run(): void
}
class QiChe extends Car implements HuoChe {
  run() {}
}
class KaChe extends Car implements HuoChe {
  run() {}
}

   

笔记

当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。
接口同样会继承到类的private和protected成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，
这个接口类型只能被这个类或其子类所实现（implement）。
当你有一个庞大的继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。 
这个子类除了继承至基类外与基类没有任何关系

结尾

  关于本文有讲的不到位的或者错误的地方请指正，会修改,谢谢大家。后续有空会继续更新Typescript相关知识。