前端数据模型（data model）该使用InterFace还是Class--TypeScript

在工作当中，对于前端页面上的一些数据会定义数据模型（data model），这时候该使用interface还是class呢？

对于interface和class的介绍，可以查看typescript官网https://www.tslang.cn/docs/handbook/interfaces.html和https://www.tslang.cn/docs/handbook/classes.html。实际上，interface和class都可以用于定义数据模型。我们还需要根据实际情况进行选择。

1、何时使用interface进行数据模型定义？

interface定义数据应该有的结构，在编程时方便使用。如果interface用于定义数据模型，大部分情况下，只定义模型具备的属性。所以，对于仅仅用于展示的数据模型，不涉及逻辑加工，我们采用interface。

使用interface也有一定的好处，就是它只是在编译阶段帮助编译器识别数值应该具有的数据结构。编译完成之后，interface定义的内容将不再存在，不会占用内存。所以，如果仅仅是直接展示数据，我觉得使用interface去定义数据模型。

2、何时使用class定义数据模型？

如果选择class定义数据模型，那么这种数据模型应该拥有比较复杂的处理逻辑。

举个简单的例子，我们希望获取属性值的时候进行一些逻辑加工，那么使用get方法再好不过。如果这是个复杂的模型，提供了很多方法来描述模型的一些行为，那也只能使用class来进行定义了。

使用class定义数据模型会占用内存，这一点和interface优点区别，比如定义了一个类：

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

编译完成之后，这个类会被解释成：

let Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

所以，简单的用于展示的数据模型就不要用class去定义了。

总结：interface和class都能定义数据模型。对于简单的数据模型，直接用于展示的我们用interface进行定义，如果数据模型比较复杂，有加工逻辑，有一些行为，那必须使用class。interface只在编译时用于类型检查，class编译完成之后实际上就是javascript中的原型。

参考链接：

https://stackoverflow.com/questions/40973074/difference-between-interfaces-and-classes-in-typescript?r=SearchResults