TS学习之路002-接口
cirzear / / 学习之路 / 阅读量 394

接口部分包括对象类型接口和函数类型接口

对象类型接口

interface List{
    readonly id: number;
    name: string;
    // 定义索引签名
    // [x:string]: any;
    age?: number;  //问号表示这个属性可有可无

}
interface Result{
    data: List[]
}
function render(result: Result){
    result.data.forEach((value)=>{
        console.log(value.id, value.name)
        if(value.age){
            console.log(value.age)
        }
    })
}
let result = {
    data:[
        {id: 1, name: 'A',sex:'male'},
        {id: 2, name: 'B'},
    ]
}

// 如果直接传入result字段会报错,解决办法有两种
/*
1. 将字段赋值给一个变量
2. 类型断言:
    2.1 在参数后加上 as Result(类型) 
    2.2 在参数对象前面加上<Result>,不建议使用,因为在react中会产生歧义
    2.3 使用字符串索引签名。 在List接口中定义 [x:string]: any; 返回值类型是any,
        含义是用任意字符串索引List可以得到任意结果,这样List就可以支持多种属性
*/

// render({
//     data:[
//         {id: 1, name: 'A',sex:'male'},  这里会报错
//         {id: 2, name: 'B'},
//     ]
// })

 render(result)

 interface StringArray{
    [index:number]: string
 }

 let chars: StringArray = ['A','B']

 interface Names{
    [x:string]: string;
    // [y:number]  报错
    [z:number]:string
 }

小结

1、接口约束对象 函数 类的结构
2、对象的接口如何定义
3、关键字 interface
4、作用 :规范对象的属性 属性的类型 属性值的类型
5、类型断言 用as 或者<>的形式 ,后者在react中使用会出问题
6、可选属性 通过?来设置
7、只读属性 通过readonly 来设置
8、当不确定接口中属性个数时需要使用 索引签名
9、索引签名包括字符串索引签名和数字索引签名
10、当接口中定义了一个索引后,例如设置了 【x:string】= string,就不能设置y:number了。
因为设置了【x:string】= string相当于这个接口的字符串索引返回值都是字符串,而y:number违背这一原则,冲突了。反过来 如果定义了【x:string】=Number, 就不能设置      y:string了。
11、可以同时使用两种类型的索引,但是数字索引的返回值必须是字符串索引返回值类型的子类型。
因为 数字索引或转化为字符串索引,而转化的这部分索引对应的值的类型范围 超过了 字符串索引类型的范围,就会报错,相当于超出范围。

函数类型接口

// let add: (x:number, y:number) => number

// interface Add{
//     (x:number,y:number):number
// }

type Add = (x:number, y:number) => number

let add: Add = (a, b) => a + b

// 混合类型接口
interface Lib{
    (): void;
    version: string;
    doSomething(): void;
}

function getLib(){
    let lib: Lib = (() => {}) as Lib
    lib.version = '1.0';
    lib.doSomething = () => {}
    return lib;
}

let lib1 = getLib();
lib1();
lib1.doSomething();
let lib2 = getLib();

小结

type和interface 多数情况下有相同的功能,就是定义类型。但有一些小区别: type:不是创建新的类型,只是为一个给定的类型起一个名字。type还可以进行联合、交叉等操作,引用起来更简洁。 interface:创建新的类型,接口之间还可以继承、声明合并。 如果可能,建议优先使用 interface。

混合接口一般是为第三方类库写声明文件时会用到,很多类库名称可以直接当函数调用,也可以有些属性和方法。

用混合接口声明函数和用接口声明类的区别是,接口不能声明类的构造函数(既不带名称的函数),但混合接口可以,其他都一样。

支付宝捐赠
请使用支付宝扫一扫进行捐赠
微信捐赠
请使用微信扫一扫进行赞赏
有 0 篇文章