大师前传系列之TS接口

接口

interface中可以用分号或者逗号分割每一项，也可以什么都不加

//接口可以用来描述`对象的形状`,少属性或者多属性都会报错
interface Speakable{
  speak():void;
  name?:string;//？表示可选属性
}

let speakman:Speakable = {
  name:string;//多属性也会报错
  speak(){}//少属性会报错
}

//接口可以在面向对象编程中表示为行为的抽象
interface Speakable{
    speak():void;
}
interface Eatable{
    eat():void
}
class Person5 implements Speakable,Eatable{
    speak(){
        console.log('Person5说话');
    }
    eat(){}
}
class TangDuck implements Speakable{
    speak(){
        console.log('TangDuck说话');
    }
    eat(){}
}

//无法预先知道有哪些新的属性的时候,可以使用 `[propName:string]:any`,propName名字是任意的
interface Person {
  readonly id: number;
  name: string;
  [propName: string]: any;
}

let p1 = {
  id:1,
  name:'zhufeng',
  age:10
}

接口的继承

• 一个接口可以继承自另外一个接口

interface Speakable{
  speak():void
}
interface SpeakChinese extends Speakable{
  speakChinese():void
}
class Person5 implements SpeakChinese{
  speak(){
    console.log('Person5')
  }
  speakChinese(){
    console.log('speakChinese')
  }
}

readonly

• 用 readonly 定义只读属性可以避免由于多人协作或者项目较为复杂等因素造成对象的值被重写

interface Person{
  readonly id:number;
  name:string
}
let tom:Person = {
  id :1,
  name:'zhufeng'
}
tom.id = 1;

函数类型接口

• 对方法传入的参数和返回值进行约束

interface discount{
  (price:number):number
}
let cost:discount = function(price:number):number{
   return price * .8;
}

可索引接口

• 对数组和对象进行约束
• userInterface 表示：只要 index 的类型是 number，那么值的类型必须是 string
• UserInterface2 表示：只要 index 的类型是 string，那么值的类型必须是 string

interface UserInterface {
  [index:number]:string
}
let arr:UserInterface = ['zfpx1','zfpx2'];
console.log(arr);

interface UserInterface2 {
  [index:string]:string
}
let obj:UserInterface2 = {name:'zhufeng'};

类接口

• 对类的约束

interface Speakable{
  name:string;
  speak(words:string):void
}
class Dog implements Speakable{
   name:string;
   speak(words){
    console.log(words);
   }
}
let dog=new Dog();
dog.speak('汪汪汪');

构造函数的类型

• 在 TypeScript 中，我们可以用 interface 来描述类
• 同时也可以使用interface里特殊的new()关键字来描述类的构造函数类型

class Animal{
  constructor(public name:string){
  }
}
interface WithNameClass{
  new(name:string):Animal
}
function createAnimal(clazz:WithNameClass,name:string){
   return new clazz(name);
}
let a = createAnimal(Animal,'zhufeng');
console.log(a.name);