TS学习02-接口

接口

ts原则之一就是对值所具有的结构进行类型检查。

结构的左右就是为了这些类型命名和代码定义契约

interface LabelValue {label: string
}
function point(label: LabelValue) {}
let obj = {label:'标题'，age: 18}
point(obj)

类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以

可选属性

在可选属性名字定义的后面加一个?符号

• 可选属性的好处之一是可以对可能存在的属性进行预定义
• 好处之二是可以捕获引用了不存在的属性时的错误。

Interface Pint {x?:number}

只读属性

在属性名前用 readonly来指定只读属性

Interface Point{readonly x: number}
let x: Point = {x: 100}
x.x = 6 //error

ReadonlyArray

与 Array<T>类似，可确保数组创建后就不可修改

let arr: ReadonlyArray<any> = [1,'f']
arr[0] //error

可以通过类型断言改变上面的检查

let a = arr as Array<ant>

readonly VS const

作为变量使用：用const

作为属性使用：用readonly

额外的属性检查

对象字面量会被特殊对待而且会经过 额外属性检查，当赋值给变量或作为参数传递的时候

interface Point {name:'Ren'
}
let point: Point = {name: 'Ren', age:18}//编译报错
console.log(point,'var')
function fun(point: Point) {console.log(point,'fun')
}
fun({name: 'Ren', age:18})//编译爆粗

通过检查的方法

• 类型断言

fun({name:'Ren', age: 18} as Point) 

• 添加字符串索引签名

interface Point {name: string;[propName:string]: any
}

• 将他赋值给一个变量

let aa = {name: 'Ren', age:18}
let point: Point = aa
fun(aa)//编译爆粗

因为不会经过额外属性检查，所以编译器不会报错

函数类型

interface SearchFun {(source: string,  subString: string): boolean;
}
let fun:searchFun = (a:string, b:string):boolean {return false}

函数的参数名不需要与接口里定义的名字相匹配

如果你不想指定类型，TypeScript的类型系统会推断出参数类型

可索引类型

描述那些能够“通过索引得到”的类型

可索引类型具有一个 索引签名

intreface StringArray {[index: number]: string
}
let myArray: StringArray = ['bob', 'fire']
let mystr: string = myArray[0]

TypeScript支持两种索引签名：字符串和数字。

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

类类型

实现接口

insterface ClockInterface{currentTime: Date}
class Clock implements ClockInterface {currentTime: Date}

在接口中描述方法

interface ClockInterface {setTime(d: Date)
}
class Clock implements ClockInterface {currentTime: Date;setTime(d: date) {this.currentTime = d}
}

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

只对实例部分进行类型检查。

constructor存在于类的静态部分，所以不在检查的范围内。

当用构造器签名去定义一个接口，并试图定义一个类区是想这个接口时，报错

interface ClockInterface {new (hour: number, minute: number)}
class Clock implements ClockInterface {constructor (h: number, m: number) {}
}
//报错

请直接操作类的静态部分。

构造函数签名

interface ClockConstructor {new (hour: number, minute: number): ClockInterface;
}
function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {return new ctor(hour, minute);
}
createClock(DigitalClock, 12, 17);

会坚持 DigitalClock参数是否符合构造函数墙面

继承和接口

接口也可以相互继承

interface Shape {color: string}
interface Square extends Shape {sildLength: number}
let square = <Square>()
square.color = 'blue'

一个接口可继承多个接口

interface PenStorke {penWindth: number}
interface Square extends Shape, PenStorke {sideLength: number}
let square = <Square>{};
square.penWidth = 5.0;

混合类型

对象可以同时具有多种类型。如：

interface Counter {(start: number) : string;interval: number;reset() : void
}
function getCounter() :Counter {let counter = <Counter>function(start:number) {}counter.interval = 123;counter.reset = function() {}
}
let c = getCounter();c(10)c.reset()c.intervalue = 5.0

接口继承类

接口继承类类型时，会继承类的成员但不包括其实例。也会继承到类的private 和 protected 成员。

这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。

class A {prevate state: any}//类
interface Point extends A {select(): valid}//接口继承类
class B extends A implements Point {select() {}}//子类实现接口
class C extends extends Control {select() {}}#错误-接口继承了父类公共/私有/保护的成员，非子类无法实现接口
class D implements Point{}