接口

TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

接口初探

function test(data:{data:any[]}){
    console.log(data.data)
}

在上面这个例子中给test函数的形参data声明类型里有data属性，我们需要这样声明，这种写法代码臃肿 不利于观看，我们可以这样写

interface dataFace{
    data:any[]
}

function test(data:dataFace){
    console.log(data.data)
}

上面的例子使用interface来声明一个接口，且这个被这个接口定义的变量必须包含data属性且属性值为any类型的数组

可选属性

interface声明的默认为必填的，我们可以在属性名后面加上?号来表示该属性不是必填属性

interface dataFace{
    data:any[],
    status?:string
}
/*
let data:dataFace={
    data:[1,2,3],
    status:'success'
}
*/
let data:dataFace={
    data:[1,2,3]
}

只读属性

默认的属性都是可以后期修改的，当我们在属性名前面加上readonly修饰符 可以声明该属性为只读属性

interface dataFace{
    data:any[],
    status?:string,
    readonly num:number,
}

let data:dataFace={
    data:[1,2,3],
    status:'success',
    num:123
}

data.num=456  //error 只读属性不能修改

TypeScript具有ReadonlyArray<T>类型，它与Array<T>相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

let a: number[]=[1,2,3,4,5]

let b: ReadonlyArray<number>=a

b[0]=1 //error

a[0]=1 //success

做为变量使用的话用 const，若做为属性则使用readonly。

额外的属性检查

有时候我们不确定该类型有几个属性，我们可以使用字符串索引签名来定义其他类型 [propName:string]:any

interface dataFace{
    data:any[],
    [propName:string]:any
}

let data:dataFace={
    data:[1,2,3],
    status:'success',
    num:123
}

函数类型

interface除了描述普通对象外，还能描述函数类型

interface SearchFunc{
    (num1:number,num2:number):number
}

const test:SearchFunc=(a,b)=>a+b;

上面的例子声明了test为函数，有两个参数a,b都为number类型，且返回值也是number

可索引的类型

我们可以通过索引去拿到该类型

interface testFace{
    [propName:number]:string
}

const arr:testFace=['1','2','3']

const obj:testFace={
    0:'1',
    1:'2',
    2:'3',
}

console.log(arr[0]); //1
console.log(obj[0]); //1

类类型

我们可以通过interface定义类的接口，类通过implements关键字去形成约束

interface ClassFace{
    name:string;
    setTime(time:number):number;
}

class Test implements ClassFace{
    name='Tom'
    setTime(t:number){
        return t
    }
}

继承接口

我们可以通过extends关键字去继承接口

interface AFace{
    color:string
}

interface BFace extends AFace{
    num:number
}

let obj=<BFace>{
    num:123,
    color:'red'
}

可以通过,分割进行多个继承

interface AFace{
    color:string
}

interface CFace{
    name:string
}

interface BFace extends AFace,CFace{
    num:number
}

let obj=<BFace>{
    num:123,
    color:'red',
    name:'Tom'
}

接口继承类

接口可以继承class，当我们继承的class中有被private或protected修饰的成员，则该接口约束的类必须继承该class

class Contorl{
    protected state:any
}

interface Aface extends Contorl{
    select():void
}
/*错误示范 
属性“state”受保护，但类型“Test”并不是从“Contorl”派生的类
class Test implements Aface{
    state=123
    select(){}
}
*/

//正确
class Test extends Contorl implements Aface{
    state=123
    select(){}
}