TypeScript 第四章：interface 与 type

---

Interface

接口用于描述类和对象的结构

• 使项目中不同文件使用的对象保持统一的规范
• 使用接口也会支有规范更好的代码提示
• 抽象类不仅可以定义规范，还可以写业务代码，而接口只有规范

抽象类

下面是抽象类与接口的结合使用

interface AnimationInterface {
    name: string
    age?: number
    play(): void
}

abstract class Animations {
    public eat(): void {
        console.log(`吃什么`);
    }
}

class Cat extends Animations implements AnimationInterface {
    public name: string = '猫咪'
    public play(): void {
        console.log(`${this.name}爬树`);
    }
}

class Dog extends Animations implements AnimationInterface {
    public name: string = '狗子'
    public play(): void {
        console.log(`${this.name}捉老鼠`);
    }
}
const cat = new Cat()
const dog = new Dog()
cat.eat()
cat.play()
dog.play()

对象

interface UserInterface {
    name: string
    age: number
    getInfo(other: string): void
}

const hj: UserInterface = {
    name: 'hj',
    age: 18,
    getInfo: function (other: string) {
        console.log(`${this.name} ${this.age}, ${other}`);
        
    }
}
console.log(hj); // { name: 'hj', age: 18, getInfo: [Function: getInfo] }
console.log(hj.getInfo('吃喝玩乐买买买')); // hj 18, 吃喝玩乐买买买

如果尝试添加一个接口中不存在的函数将报错，移除接口的属性也将报错

...
const hj: UserInterface = {
    name: 'hj',
    age: 18,
    getInfo: function (other: string) {
        console.log(`${this.name} ${this.age}, ${other}`);
        
    },
    sex: '男' // “sex”不在类型“UserInterface”中
}

如果有额外的属性，使用以下方式声明，这样就可以添加任意属性了

interface UserInterface {
    name: string
    age: number
    getInfo(other: string): void
    [key: string]: any
}

接口继承

• 接口可以使用 extends 来继承

interface AnimationInterface {
    name: string
    play(): void
}

interface BiologyInterface extends AnimationInterface {
    age: number
}

class Cat implements BiologyInterface {
    public name: string = '猫咪'
    public age: number = 2
    public play(): void {
        console.log(`${this.name}爬树，它${this.age}岁了`);
    }
}

const cat = new Cat()
cat.play()

• 对象可以使用实现多个接口，多个接口用逗号连接

interface AnimationInterface {
    name: string
    play(): void
}

interface BiologyInterface {
    age: number
}

class Cat implements AnimationInterface, BiologyInterface {
    public name: string = '猫咪'
    public age: number = 2
    public play(): void {
        console.log(`${this.name}爬树，它${this.age}岁了`);
    }
}

const cat = new Cat()
cat.play()

函数

使用接口约束函数的参数与返回值

• 会根据接口规范提示代码提示
• 严格约束参数类型，维护代码安全

函数参数

下面是对函数参数的类型约束

interface UserInterface {
    name: string
    age: number
    [key: string]: any
}

const hj = (info: UserInterface): UserInterface => {
    console.log(`${info.name}已经${info.age}岁了`);
    info.sex = 'name'
    return info
}
const user: UserInterface = {
    name: 'hj',
    age: 18,
}
console.log(hj(user)); // { name: 'hj', age: 18, sex: 'name' }

函数声明

使用接口可以约束函数的定义

interface payFunc {
    (price: number): string
}

const pay: payFunc = (price: number) => `支付${price}元`
console.log(pay(100)); // 支付100元

构造函数

使用 interface 可以优化代码，同时也具有良好的代码提示

interface UserInterface {
    name: string
    age: number
}

class User {
    info: UserInterface
    constructor(user: UserInterface) {
        this.info = user
    }
}

const hj = new User({ name: 'hj', age: 19 })
console.log(hj); // User { info: { name: 'hj', age: 19 } }

数组

对数组类型使用接口进行约束

interface UserInterface {
    name: string
    age: number
}

const hj: UserInterface = {
    name: 'hj',
    age: 18
}

const hk: UserInterface = {
    name: 'hk',
    age: 20
}

const userList: UserInterface[] = [hj, hk] 
console.log(userList); // [ { name: 'hj', age: 18 }, { name: 'hk', age: 20 } ]

枚举

下面是使用枚举设置性别

enum SexType {
    BOY,
    GIRL
}

interface UserInterface {
    name: string,
    sex: SexType
}

const hj: UserInterface = {
    name: 'hj',
    sex: SexType.BOY
}
console.log(hj); // { name: 'hj', sex: 0 }

type

type 与 interface 非常相似都可以描述一个对象或者函数，使用 type 用于定义类型的别名，是非常灵活的类型定义方式。

• type 可以定义基本类型别名如联合类型，元组
• type 与 interface 都是可以进行扩展
• 使用 type 相比 interface 更灵活
• 如果你熟悉其他编程语言，使用 interface 会让你更亲切
• 使用类(class) 时建议使用接口，这可以与其他编程语言保持统一
• 决定使用哪个方式声明类型，最终还是看公司团队的规范

基本使用

下面是使用 type 声明对象类型

type User = {
    name: string
    age: number
}

const hj: User = {
    name: 'hj',
    age: 20
}

上面已经讲解了使用 interface 声明函数，下面来看使用 type 声明函数 的方式

type payFunc = (price: number) => string
const pay: payFunc = (price: number) => `支付${price}元`

console.log(pay(100)); // 支付100元

类型别名

type 可以为 number、string、boolean、object 等基本类型定义别名，比如下例的 IsBoss。

// 基本类型别名
type IsAdmin = boolean

// 定义联合类型
type Sex = 'boy' | 'girl'

type User = {
    isAdmin: IsAdmin,
    sex: Sex
}

const hj: User = {
    isAdmin: true,
    sex: 'boy',
}

// 声明元组
const userList: [User] = [hj]

索引签名

type 与 interface 在索引签名上的声明是相同的

interface User {
    [key: string]: any
}

type UserTYpe = {
    [key: string]: any
}

声明继承

interface

• typescript 会将同名接口声明进行合并

interface User {
    name: string
}
interface User {
    age: number
}

const hj: User = {
    name: 'hj',
    age: 20
}

• interface 也可以使用 extends 继承

interface User {
    name: string
}
interface Person extends User {
    age: number
}

const hj: Person = {
    name: 'hj',
    age: 20
}

• interface 也可以 extends 继承 type

type User = {
    name: string
}
interface Person extends User {
    age: number
}

const hj: Person = {
    name: 'hj',
    age: 20
}

type

• type 与 interface 不同，存在同名的 type 时将是不允许的

type User = {
    name: string
}

// 标识符“User”重复
type User = {
    age: number
}

• Type 可以使用 & 将 type 与 interface 或 type 进行合并

type User = {
    name: string
}
type Something = {
    height: number
}

interface PersoInterface {
    age: number
}
interface OtherInterface {
    sex: number
}

type Info = User & PersoInterface
type InfoInfo = PersoInterface & OtherInterface
type UserSomething = User & Something

const hj: Info = {
    name: 'hj',
    age: 19
}

• 使用 | 声明满足任何一个 type 声明即可

type User = {
    name: string
}
type Person = {
    age: number
}
type Member = User | Person

const hj: Member = {
    age: 19
}

implements

class 可以使用 implements 来实现 type 或 interface

type User = {
    name: string
}

class Person implements User {
    name: string
}

第五章：泛型 Generics