TypeScript教程之六：接口

由微软推出的TypeScript自从一推出就广受关注，现在无论开发前端React/Vue，还是后端API，很多项目中都广泛接受了TypeScript。下面介绍TS中接口的使用。

TypeScript

接口的基本特性

接口用于定义数据的结构。

接口和类的区别

首先，接口和类的最大区别就是：我们从不用接口来创建对象实例。

基本定义方式

TypeScript

interface IStudent {
    id: string;
    name: string;
    age: number;
}

const registerStudent = (s: IStudent) => {
    console.log(s);
    return s.id;
}

一旦声明了某个变量的类型为IStudent，那么以后在对其赋值时，就必须符合实现定义好的结构，包括所有属性及其类型，方法及其参数，返回值的声明。

需要注意，定义接口时，属性之间分割用分号 “;”, 在定义实现接口的实例时，属性分隔用逗号 “,”

TypeScript

interface IStudent {
    id: string;
    name: string;
    age?: number;

    speak(): void;
}

const paul: IStudent = {
    id: '9901',
    name: 'Paul',
    age: 25,
    speak() {
        console.log("Hello, I'm Paul");
    }
}

paul.speak();

可选属性

也可以通过**?:**来定义可选属性：

TypeScript

interface IStudent {
    id: string;
    name: string;
    age?: number;
}

任意类型属性

也可以定义一个属性，属性名为字符串，值可以是任何类型：

TypeScript

interface IStudent {
    id: string,
    name: string,
    age?: number,
    [propname:string]: any
}

但这样定义会使得类型约束过松：

TypeScript

interface IStudent {
    id: string,
    name: string,
    age?: number,
    [propname:string]: any
}

const registerStudent = (s: IStudent) => {
    console.log(s);
    return s.id;
}

registerStudent({id:'9901', name:'Lucas', gender: 'M'});
registerStudent({id:'9901', name:'Lucas', age:17, address: '123 Road'});

定义方法

TypeScript

interface IStudent {
    intro(): string
    getId(): string
}

class Student implements IStudent {
    id: string
    name: string
    age?: number

    constructor(id: string, name: string, age?: number) {
        this.id = id;
        this.name = name;
        if(age) this.age = age
    }

    getId = () => {
        return this.id;
    }

    intro = () => {
        return 'My name is ' + this.name;
    }
}

const registerStudent = (s: IStudent) => {
    console.log('Hello, ' + s.intro());
    return s.getId();
}


registerStudent(new Student('9901', 'Lucas'));