TypeScript学习-接口

// TODO:接口
// 例子：打印obj.label
function printLabel(obj:{label:string}):void {
    console.log(obj.label);
}
let Obj = {size:1,label:'你好'}
printLabel(Obj)

// 【接口定义】重写上述例子，使用接口来描述一个包含label类型对象

interface labelValue {
    label:string
}
function printLabel1(params:labelValue) {
    console.log(params.label);
}
printLabel1(Obj)
// labelValue就好比一个名字，描述一个要求。代表有一个label属性且属性为string类型的对象

// 【接口的可选类型】
// 接口里的属性不一定都要是比传的，有些场景下某些条件存在或不存在。
interface Person{
    gender:string, 
    havePets?:boolean
}
// Person接口定义了一个人一定会有性别，但是否养了宠物这是不一定的
let xiaohong:Person = { //小红有宠物
    gender:"female",
    havePets:true 
}
let xiaowang:Person ={ //小王没有宠物
    gender:"man",
}

// 【只读属性】- readonly
// 定义了一个卡片接口，卡号比传，使用人可传并且为只读
interface Card{
    cardNumber:number,
    readonly userName?:string
}

// 合法赋值
let ID_Card:Card = {
    cardNumber:18355412511,
    userName:"小王"
}
// ID_Card.userName = "小黄" //报错，因为userName是只读属性

// 【衍生】数组只读属性
// 定义数组的时候可以定义一个只读数组，使用ReadonlyArray关键字

// 普通数组定义+赋值

let arr4:Array<number> = [1,2,3,4]
console.log(arr4,"普通数组");
arr4[0] = 10088
console.log(arr4,"下标0内容改变");

// 定义只读类型类型数组
let arr5:ReadonlyArray<number> = arr4
arr4[0] = 100123
// arr5[0] = 123 //报错：类型“readonly number[]”中的索引签名仅允许读取
console.log(arr4,":arr4");
console.log(arr5,":arr5");

// let arr6 = arr5 
// arr6[0] =123
// 只读类型数组赋值给一个未定义的新变量，依旧是只读的不可以修改值

let arr6:number[]
// arr6 = arr5  
// 这样赋值是不会报错的 类型 "readonly number[]" 为 "readonly"，不能分配给可变类型 "number[]"
arr6 = arr5 as number[] //可以使用类型断言欺骗一下
// 作为变量使用的话用const，做为属性使用用readonly


// 【额外的属性检查】

// 现在有这样一个function，创建一个圆形
interface SquareConfig{
    color?:string,
    width?:number
}

function createSquare(config:SquareConfig){
    let newSquare = {color:"red",area:100}
    if(config.color){
        newSquare.color = config.color
    }
    if (config.width) {
        newSquare.area = config.width *config.width
    }
    return newSquare
}
let value:SquareConfig ={
    'color':'pink'
}
// 创建一个粉色的正方形
console.log(createSquare(value));

// 这时我背景色需要是蓝色的
// value.background = "blue" // 报错 ：类型“SquareConfig”上不存在属性“background”。

// 所以在描述这个接口的时候需要加一个额外属性检查写法如下
interface createSquare1{
    color?:string,
    width?:number,
    [propName:string]:any //额外属性检查
}


// 【函数类型描述】
interface Func{
    (source:string,substring:string):boolean
}
let search:Func
search = (src:string,sub:string):boolean=>{  //对于函数检查类型来说，参数名不需要和接口里定义的相匹配
    return src.search(sub)>-1
}


// 【可索引类型】
interface stringArray {
    readonly [index:number]:string //索引签名
}
let arrStr:stringArray = ['xx','hh']
console.log(arrStr[0]);

// 接口继承
interface Food{
    size:string
}
interface apple extends Food{
    color:string
}
let apple:apple = {
    color:'red',
    size:'middle'
}