浅谈 typeScript --- 接口

接口

官方定义：用于约束类、对象、函数的契约；

个人理解: 接口就是一个标准，像文档API一样，规定哪些属性字段必须有，且数据类型符合, 接口不会出现在编译结果中

• 接口约束对象

// 接口
interface User {
    readonly id: number,   // 只读属性
    name: string,
    age?:number,   // ?：表示该 age 属性为非必须-- # 可选属性
    sayFun(x:number): void  // x: 表示函数参数为number类型  void 表示该函数没有返回值
}

// type User = {
    name:string,
    age?:number,
    sayFun():void
}

let u:User = {
    name: "何冲",
    sayFun: () => {
        console.log("sayHello")
    }
}

• 接口约束函数

// 接口
interface Condition {
    (n:number): boolean   // 接口定义一个函数: 参数类型为一个数字类型，返回值为布尔类型
} 

// 类型别名
type Condition = (n:number) => boolean
function add(numbers: number[], callBack:Condition) {  // Condition约束callBack回调函数
    let num = 0;
    numbers.forEach(n => {
        if(callBack(n)) {
            num += n;
        }
    })
    return num;
}
const result = add([3,2,4,6,7,4], n => n % 2 !== 0)

• 接口的继承

  : 实现多种接口的组合

    interface A {
        name1: string
    }
    
    interface B {
        name2： number
    }
    
    interface C extends A,B {
        name3: boolean
    }

- 之后使用 C 接口就会加上 A B 接口的类型约束

• 类型别名的继承

    type A = {
        T1: string
    }
    type B = {
        T2:number
    }
    type C = {
        T3:number
        T1:string
    } & A & B

• 可索引的类型

    interface StringArray { 
        [index: number]: string;  // 这里使用了number索引
    } 
    let myArray: StringArray;
    myArray = ["Bob", "Fred"]; 
    let myStr: string = myArray[0];  

• ts支持两种索引类型: 数字索引和字符串索引
• 使用number为索引签名，我们在访问该数组时，可以使用 myArray[0] 去取数组里面的值，数字索引本质上也是字符串索引， 当使用 number 索引 ,javaScript会把它转化为 string ，再去索引对象。

~ ~ 类的接口咋们下节再谈啦 ~~