TS 接口 看这一篇就够了

103 阅读2分钟

接口和类型兼容性

扩展类型-接口

接口:inteface

扩展类型:类型别名、枚举、接口、类

TypeScript的接口:用于约束类、对象、函数的契约(标准)

契约(标准)的形式:

  • API文档,弱标准
  • 代码约束,强标准

和类型别名一样,接口,不出现在编译结果中

  1. 接口约束对象
  2. 接口约束函数

接口可以继承

可以通过接口之间的继承,实现多种接口的组合

使用类型别名可以实现类似的组合效果,需要通过&,它叫做交叉类型

它们的区别:

  • 子接口不能覆盖父接口的成员
  • 交叉类型会把相同成员的类型进行交叉

readonly

只读修饰符,修饰的目标是只读

只读修饰符不在编译结果中

类型兼容性

B->A,如果能完成赋值,则B和A类型兼容

鸭子辨型法(子结构辨型法):目标类型需要某一些特征,赋值的类型只要能满足该特征即可

  • 基本类型:完全匹配
  • 对象类型:鸭子辨型法

类型断言

当直接使用对象字面量赋值的时候,会进行更加严格的判断

  • 函数类型

一切无比自然

参数:传递给目标函数的参数可以少,但不可以多

返回值:要求返回必须返回;不要求返回,你随意;

代码案例

//talk is less, show me the code
interface User {
    name: string
    age: number
    sayHello(): void
}

type User = {
    name: string
    age: number
    sayHello: () => void
}

let u: User = {
    name: "sdfds",
    age: 33,
    sayHello() {
        console.log("asfadasfaf");
    }
}

type Condition = (n: number) => boolean

interface Condition {
    (n: number): boolean
}

function sum(numbers: number[], callBack: Condition) {
    let s = 0;
    numbers.forEach(n => {
        if (callBack(n)) {
            s += n;
        }
    })
    return s;
}

const result = sum([3, 4, 5, 7, 11], n => n % 2 !== 0);
console.log(result);


interface A {
    T1: string
}

interface B {
    T2: number
}

interface C extends A, B {
    T3: boolean
}

type A = {
    T1: string
}

type B = {
    T2: number
}

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

let u: C = {
    T2: 33,
    T1:"43",
    T3: true
}

type User = {
    readonly id: string
    name: string
    age: number,
    readonly arr: readonly string[]
}

let u: User = {
    id: "123",
    name: "Asdf",
    age: 33,
    arr:["Sdf", "dfgdfg"]
}

const arr: readonly number[] = [3, 4, 6];

const arr: ReadonlyArray<number> = [3, 4, 6];

interface Duck {
    sound: "嘎嘎嘎"
    swin(): void
}

let person = {
    name: "伪装成鸭子的人",
    age: 11,
    sound: "嘎嘎嘎" as "嘎嘎嘎",
    swin() {
        console.log(this.name + "正在游泳,并发出了" + this.sound + "的声音");
    }
}

let duck: Duck = {
    sound: "嘎嘎嘎" as "嘎嘎嘎",
    swin() {
        console.log(this.name + "正在游泳,并发出了" + this.sound + "的声音");
    }
};

interface User {
    name?: string
    age: number
}

interface Condition {
    (n: number, i: number): boolean
}

function sum(numbers: number[], callBack: Condition) {
    let s = 0;
    for (let i = 0; i < numbers.length; i++) {
        const n = numbers[i];
        if (callBack(n, i)) {
            s += n;
        }
    }
    return s;
}

const result = sum([3, 4, 5, 7, 11], n => n % 2 !== 0);
console.log(result);

(value: number, index: number, array: number[]) => void

[34, 4].forEach(it => console.log(it));