浅谈 typeScript --- 接口

·  阅读 49

接口

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

个人理解: 接口就是一个标准,像文档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 ,再去索引对象。

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改