深入浅出TypeScript（4）- 使用接口和类型别名

在TypeScript中，为了可以约束对象定义，提供了两个新的特性，接口和类型别名。

TypeScript中的接口

在强类型语言中，都有接口的概念，那么TypeScript中的接口是如何使用的呢？

接口定义形式如下：

interface test {
    name: string,
    value: number
}

　　

上述接口，定义了一个test接口，该接口可以约束两个字段的数据类型，分别是name和value。而接口的使用主要有三个方面：实现、继承和约束。

实现接口

通过用类来实现接口，就实现了接口约束类中必须定义的字段，实现接口的关键字是implements，接下来，我们定义一个类来实现上述接口：

class TestClass implements test {
    name: string;
    value: number;
}

　　

如果类中缺少了属性name和value，就会报错，我们就可以用test接口来约束实现接口类中的属性。

继承接口

接口之间，还可以进行继承，用来使得该接口拥有被继承接口的属性和方法。比如有如下两个接口：

interface ColorInterface {
    color: string;
}

interface LineInterface {
    width: number;
}

　　

在上面我们定义了两个接口，分别表示颜色和线条的宽度，如果我们想要定义一条直线的类别，那么我们可以定义如下接口继承：

interface StrightLineInterface extends ColorInterface, LineInterface {
    height: number
}

　　

此时此刻，接口StrightLineInterface便拥有了color和width属性，TypeScript中类只能实现一个接口，但是接口可以通过继承实现多态。

接口约束

除了被实现和继承，接口还可以用来约束对象或者函数类型。

比如我们后台获取的数据需要遵循特定类型，我们才能使用，我们就可以用接口来约束我们获取的数据类型。

比如，我们获取的数据是一个包含id，name的对象数据，那么我们可以定义如下接口：

interface List {
    id: number,
    name: string,
    age?: number, // 可选属性表示list中，可有可无的属性
}

interface Result {
    data: List
}

　　

我们在使用result的时候，就可以用Result接口来约束它的格式：

function use(result: Result) {
    result.data.map(x => {
        // 操作代码
    })
}

　　

接口还可以约束可变参数的对象，可变参数就是我们不知道对象中有多少个属性，但是我们知道属性的类别，可以用如下方式约束：

interface NameArray {
    [x: number]: string
}

　　

该接口表示我们接受约束的对象必须是数字下标，而值必须是string类型的value对象。

除此之外，接口还可以约束函数：

interface Add {
    (x: number, y: number): number
}

let add: Add = (a, b) => a + b;

　　

接口约束Props和State

接口还可以约束React中的Props和State的类型，如下所示：

interface Props {
    name: string,
    data: string[]
}

interface State {
    [x: string]: string
}

class Comp extends React.Component<Props, State> {
    // 第一个表示props的类型约束，第二个表示state的类型约束，如果没有props，我们可以设置为{}
}

　　

类型别名

上面提到的接口可以做的一些事情，而类型别名，主要就是对对象或者函数起到约束作用，特性没有接口多。

type Add = (x: number, y: number) => number;

let add: Add = (a, b) => a + b;

　　

而类型别名是早起TypeScript做类型约束的主要形式，后来引入接口之后，TypeScript推荐我们尽可能的使用接口来规范我们的代码。

而两者也都是TSC编译器做类型判定的时候有作用，我们可以在playground里面看到，当我们写一个接口或者是一个类型别名定义一个对象或者方法的时候，并未有任何编译成的es5代码出现。

总结

这一小节主要讲述了类型别名和接口的用法，以及两者的区别。

TypeScript中，如果再相同功能点的顶一下，推荐使用interface去定义数据类型。

我的博客地址：http://www.gaoyunjiao.fun/?p=138