TypeScript系列 3.接口和对象类型

合集 - TypeScript教程(4)

1.TypeScript系列 0.开发环境配置2022-08-142.TypeScript系列 1.基本类型2023-07-06

3.TypeScript系列 3.接口和对象类型2023-07-09

4.TypeScript系列 4.数组类型2023-07-12

收起

本系列知识部分基于小满 ZS 的TypeScript 系列教程。我也会补充一些视频没有的内容。

interface 介绍#

interface即接口，在 ts 中用于描述对象的“形状”。js 是鸭子类型，鸭子类型的通俗说法是：“如果它走起路来像鸭子，叫起来也是鸭子，那么它就是鸭子。” 只要一个对象包含interface中定义的所有属性、方法，那么它就属于这个interface定义的对象类型。

interface 知识点#

1. interface 定义的属性、方法，对应的对象中不能多也不能少#

interface Student {
    name: string;
    age: number;
    say: () => void;
}

let a: Student = {  //报错，提示缺少name属性
    age: 18,
    say() {
        console.log(this.name);
    },
};

2. interface 重名会自动重合#

interface Student2 {
    name: string;
    age: number;
}

interface Student2 {
    gender: string;
}

let b: Student2 = {
    name: "sq",
    age: 18,
    gender: "male",
};

3. 索引签名#

有不确定的属性时，可以使用这个功能

interface Student3 {
    name: string;
    age: number;
    [propertyName: string]: any; //索引签名
}

let c: Student3 = {
    name: "sq",
    age: 18,
    ID: "18170023728",
    gender: "male",
};
// 调用
console.log(c["gender"]);
console.log(c.gender);

索引签名的类型也可以设置为 number：

这样可以模拟数组，熟悉 js 的应该知道，js 的数组也是一个对象

interface Student3 {
    name: string;
    age: number;
    [propertyName: number]: any;
}

let c: Student3 = {
    name: "sq",
    age: 18,
    1: "18170023728",
    2: "male",
};
// 调用
console.log(c[1]);

4. 可选属性 ?#

一个属性可以有，也可以没有

interface Student4 {
    name: string;
    age: number;
    gender?: string;
}
let d2: Student4 = {
    name: "sam",
    age: 18,
};

方法也是可以设置为可选的：

interface Student4{
    speak?:(words:string)=>void
}

这时候直接调用speak会报错，正确的调用方法为

let stu1: Student4 = {
    speak(words){
        console.log(words)
    }
}

stu1.speak && stu1.speak('hello')

5. 只读属性 readonly#

制度属性不能被修改

interface Student5 {
    name: string;
    age: number;
    readonly id: string;
    readonly callBack: () => boolean;
}

let e: Student5 = {
    name: "sam",
    age: 18,
    id: "18170023728",
    callBack() {
        return true;
    },
};
//可以调用
e.callBack();

//不可以修改，报错
e.id = "18170023729";
e.callBack = () => false;

6. 接口继承#

可以继承一个也可以继承多个

//export导出，可以避免相同文件夹/文件下，同一个接口名导致的各种问题
export interface Student extends Person, Singer {
    name: string;
}

interface Person {
    gender: string;
}
interface Singer {
    sing: boolean;
}

let f: Student = {
    name: "sam",
    gender: "male",
    sing: true
}

7. interface 约束函数类型#

束函数的参数类型和返回值类型

interface Fn {
    (name: string): number[],
}

const fn: Fn = (name) => {
    return [1, 2]
}