ts-接口

接口

TypeScript 的最核心原则就是对所有的传值进行类型检测。在TS里，接口的作用就是为这些类型命名和你的代码进行定义契约。

function printLabel(labelledObj:{label:string}){  
  // 要求传入的对象里必须有一个label属性，并且为string类型
    console.log(labelledObj.label)
}
printLabel({label:'lover hx'})

// 上诉功能用interface实现
interface LabelledObj{
    label:string
}

function printLabelUseInterface(obj:LabelledObj){
    console.log(obj.label)
}

可选属性

1. 对属性进行宽松检测

2. 对没有命名的属性进行检测，避免拼写错误

   interface SquareConfig{
     color?:string,
     width?:number  // ? 为可选属性
   }
   

只读属性

1. 写入的值再也不能被改变

   interface Point{
     readonly x:number,
     readonly y:number
   }
   let p1: Point = {x:10 , y:20}
   p1.x = 5 // err
   

2. ReadonlyArray

   // 只读类型的数组
   let ro:ReadonlyArray<number> = [1,2,4,5]
   ro[0] = 4 //  err
   ro.push(4) // err
   ro.length = 100 // err 
   // ReadonlyArray<T> 跟 Array<T> 类似，删除了所有对数组操作的方法
   // 甚至把 只读数组赋值给其他变量都是错误的
   let a = ro // err
   

额外的属性检测

interface Person{
    color ?:string;
    width ?:number
}

function createPerson(config:Person){
    let c = config.color ? config.color:'tby'
    let w = config.width ? config.width:'200'
    console.log(c)
    console.log(w)
}
createPerson({clolo:'red',width:200}) 
//  额外的属性检测，clolo是接口里没有的属性，所以会报错
/* 解决办法 
	1. 用类型断言写
	2. 添加一个字符串索引签名
*/

函数类型

interface CompFunc{
    (source:string,subString:string):boolean
    // source subString 传入参数，定义函数的时候名字可以不一样
    //  boolean 返回值
}
let myComp :CompFunc = function (src,sub):boolean{
    return src.length>sub.length
}
console.log(myComp('21312','13412341'))

索引类型

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];
// 定义了一个StringArray 用数字索引可以得到一个string

ts 支持两种索引签名，字符串和数字。

但数字索引的返回值必须是字符串索引返回值类型的子类型。 因为当用 number 来索引，js来索引时，js 会将他转换成 string 然后再去索引对象。

class Animal {
    name: string;
}
class Dog extends Animal {
    breed: string;
}

// 错误：使用数值型的字符串索引，有时会得到完全不同的Animal!
interface NotOkay {
    [x: number]: Animal;
    [x: string]: Dog;
}

类类型

实现接口

interface ClockInterface {
    currentTime: Date;
}
// Clock 实现了 ClockInterface
class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}
//  只约束了公共部分，不会检测其他部分，只要有就行，不管还有没有其他的

类静态部分与实例部分的区别

接口只对实例部分进行检查，constructor存在类的静态部分，所以不在检查范围内

继承接口

接口也可以相互继承，来实现接口的复用

混合类型

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;
// 没看懂，大概懂了把