OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

TypeScript接口

原作者: [db:作者] 来自: [db:来源] 收藏邀请

TypeScript对值所具有的结构进行类型检查，用的“鸭式辨型法”。接口的作用就是为你的代码和第三方代码提供契约。

1，正常后端返回的接口

interface List{
    id:number,
    name:string
}

interface Result{
    data:List[]
}

function render(result:Result){
    result.data.forEach((value)=>{
        console.log(value.id,value.name);
    })
}

let result={
    data:[
        {id:1,name:"A"},
        {id:2,name:"B"}
    ]
}

render(result)

View Code

2，后端返回约定之外的字段，绕过类型检查

如果是通过对象字面量会类型检查报错，

绕过类型检查的方法有三种，

方法一，定义了一个变量，不会报错

let result={
    data:[
        {id:1,name:"A",sex:'male'}, //加了接口之外的sex不会报错
        {id:2,name:"B"}
    ]
}

方法二，使用类型断言

//推荐as Result
render({data:[
    {id:1,name:"A",sex:'male'}, 
    {id:2,name:"B"}
]} as Result)  //as Result 明确告诉编译器返回值就是Result


//加<>在react中会产生歧义
render(<Result>{data:[
    {id:1,name:"A",sex:'male'}, 
    {id:2,name:"B"}
]})

方法三，使用字符串索引类型签名

interface List{
    id:number,
    name:string,
    [x:string] :any //用任意的字符串去索引List可以得到任意的结果
}

render({data:[
    {id:1,name:"A",sex:'male'}, 
    {id:2,name:"B"}
]})

3，可选属性？

4，只读属性readonly

interface List{
    readonly id:number,   // value.id++ //Cannot assign to 'id' because it is a read-only property.
    name:string,
    [x:string] :any //用任意的字符串去索引List可以得到任意的结果
    age?:number
}

5,可索引类型的接口

以上接口属性的个数都是确定，当你不确定一个接口中有多少个属性的时候，可以使用可索引类型的接口。可索引类型的接口可以使用数字去索引，也可以使用字符串去索引

// 可索引类型
// 与使用接口描述函数类型差不多，我们也可以描述那些能够“通过索引得到”的类型，比如 a[10] 或 ageMap['daniel']。
// 可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。
//用数字索引的接口
interface StringArray{
    [index: number]: string; //签名：用任意的数字索引StringArray都会得到一个string，相当于定义了一个string类型的数字
}

let myArray: StringArray;
myArray =['A','B','C','D']
console.log(myArray[2]); // C 
//用字符串索引的接口
interface Names{
    [index:string]:string //用任意字符串去索引Names得到的类型都是string
    // y:number//类型“number”的属性“y”不能赋给字符串索引类型“string”。
    [z:number]:string  //数字索引签名的返回值一定要是字符串索引签名返回类型的子类型
    //因为javascript会进行类型转换，把number转换成string
}

二，函数类型接口

1，使用3钟方法定义函数类型

//用一个变量定义一个函数类型
let add1: (x:number,y:number)=>number

//用一个接口来定义函数类型
interface Add2{
    (x:number,y:number):number //不需要指定函数名称，直接定义类型
}

//使用类型别名type关键字
type Add3 = (x:number,y:number)=>number

//实现
add1=(a,b)=>a+b
let addfunction2: Add2= (a,b) =>a+b

let addfunction3: Add3= (a,b) =>a+b

2，混合接口

既可以定义函数，也可以定义属性和方法

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();