视频位置 TypeScript快速梳理_下篇 0:46:34

interface 与 type 的区别

• 相同点： interface 和 type 都可以⽤于定义对象结构，在定义对象结构时两者可以互换。
• 不同点：
  1️⃣ interface ：更专注于定义对象和类的结构，⽀持继承、合并。
  2️⃣ type ：可以定义类型别名、联合类型、交叉类型，但不⽀持继承和⾃动合并。

  type:
  类型别名 E.g type shuzi = number
  联合类型 E.g number | string
  交叉类型 E.g a & b

interface 和 type 都可以定义 对象 结构

// 使⽤ interface 定义 Person 对象
interface PersonInterface {
    name: string;
    age: number;
    speak(): void;
}
// 使⽤ type 定义 Person 对象
type PersonType = {
    name: string;
    age: number;
    speak(): void;
};

// 使⽤ PersonInterface接口限制 person对象
/* let person: PersonInterface = {
 name:'张三',
 age:18,
 speak(){
 console.log(`我叫：${this.name}，年龄：${this.age}`)
 }
} */
// 使⽤ PersonType 定义 person对象
let person: PersonType = {
    name:'张三',
    age:18,
    speak(){
        console.log(`我叫：${this.name}，年龄：${this.age}`)
    }
}

interface 可以继承、合并

interface PersonInterface {
    name: string // 姓名
    age: number // 年龄
}
interface PersonInterface {
    speak: () => void
}
interface StudentInterface extends PersonInterface {
    grade: string // 年级
}

const student: StudentInterface = {
    name: '李四',
    age: 18,
    grade: '⾼⼆',

    speak() {
        console.log(this.name,this.age,this.grade)
    }
}

type 的 交叉类型

    // 使⽤ type 定义 Person 类型，并通过 交叉类型 实现 属性的合并
    type PersonType = {
        name: string; // 姓名
        age: number; // 年龄
    } & { //使用 交叉类型 追加
        speak: () => void;
    };

    // 使⽤ type 定义 Student 类型，并通过交叉类型继承 PersonType
    type StudentType = PersonType & { //可以继续使用 交叉类型 追加
        grade: string; // 年级
    };

    //
    const student: StudentType = {
        name: '李四',
        age: 18,
        grade: '⾼⼆',
        speak() {
            console.log(this.name, this.age, this.grade);
        }
    }