接口

2020-07-22  本文已影响0人  skoll

实现接口

interface LabelledValue {
    label: string;
    name?:string,
  }
 
function printLabel(labelledObj: LabelledValue) {
    // 这里面检查好像不是很准确
    console.log(labelledObj.label);
  }


let myObj= {size: 10, label: "Size 10 Object"};
//printLabel({size: 10, label: "Size 10 Object"})
// 需要完全实现接口才行
// let myObj:LabelledValue={label:"name"}

printLabel(myObj);
// 这样只要传入的对象满足必要条件就是可以的

可选,只读属性

interface SquareConfig {
    color?:string,
    // 可选属性
    width?:number,
    readonly height:number,
    // 只读属性,只能在创建的时候进行修改
}

function createSquare(config:SquareConfig):{color:string,area:number}{
    let newSquare={color:"white",area:1000}

    if(config.color){
        newSquare.color=config.color
    }

    if(config.width){
        newSquare.area=config.width*config.width
    }

    return newSquare
}
 
console.log(createSquare({color:'red',width:10,height:10}))

锁死一个数组

let a:number[]=[1,2,3,4]
let ro:ReadonlyArray<any>=a
ro[0]=12
//不允许任何改变

跳过函数参数检查

let squareOptions = { colour: "red", width: 100 };
let mySquare = createSquare(squareOptions);
//将对象赋值给一个变量,然后再传入函数,是不走检查逻辑的

添加一个索引签名

interface SquareConfig{
    color?:string,
    width?:number,
    [propName:string]:any,
    // 添加一个索引签名,这就意味着这个接口的对象可以有任意数量的其他属性,
    // 并且他们的不是color,width,他们可以是任意的类型
}

接口定义函数类型

interface SearchFunc{
    (source:string,subString:string):boolean;
}

let mySearch:SearchFunc
// mySearch=function(source:string,subString:string){
//     let result=source.search(subString)
//     return result>-1
// }

mySearch=function(source,subString){
    let result=source.search(subString)
    return result>-1
}

接口定义索引类型

interface StringDict{
    [index:string]:string;
}

let str:StringDict={name:"mike",age:"20",}
//其实就是对象。。

接口继承

interface Persion{
    name:string;
}
interface Work{
    location:string|number;
}
interface Chinaese extends Persion,Work{
    age:number;
}

let zhang:Chinaese={name:"123",age:20,location:1}
上一篇 下一篇

猜你喜欢

热点阅读