Angular Typescript中接口和类之间的差异

Typescript接口和类之间有什么不同？我什么时候用 一节课？我什么时候使用接口？它们的优点是什么

我需要为对后端服务器的http请求创建某种类型（使用Angular 2执行），如： },

我应该使用什么来构建这些模型？谢谢大家!

根据建议，在

界面

上使用

类

。主要区别在于

类

在编译时将保持不变，而

接口

则完全被删除，因为它们不提供任何用途

---

只要在整个项目中保持一致，并且更喜欢使用

类

的styleguide方法，谁知道，也许有一天你需要将

方法

添加到你的

模型

---

查看下面的答案以了解更多详细信息：

使用typescript创建数据模型而不是类，因为编译器在运行时不会为接口生成任何相应的JavaScript代码。然而，若你们使用一个类仅仅是为了建立一个数据模型，那个么编译器将为它创建相应的JS代码，所以会消耗内存

Angular的样式指南中的一段代码：

“考虑使用类而不是接口来提供服务和 声明项（组件、指令和管道）。”

“考虑为数据模型使用接口。”

---

我在过去两年中使用angular，简单地说，当我想向我的对象添加任何行为时，我使用类，例如，在任何类中，我想添加返回已处理数据的get方法，当没有行为添加到对象时，我想直接访问对象时，我将使用接口。。

---

使用类若定义构造函数，则限制用户在构造任何对象之前定义要初始化的特定变量

简单地说，类是用来创建对象的，接口可以帮助您了解这些对象应该包含什么

类类似于蓝图/模板，我们可以使用它创建对象。 接口就像一个契约，类必须在契约上达成一致才能实现该接口或定义这个蓝图应该包含的内容

一个简单的类：

class Car {
    engine: string; // 'var' is not used;

    constructor(engine: string) { // This is how we create constructor
        this.engine = engine;
    }

    display(): void { // 'function' keyword is not used here.
        console.log(`Engine is ${this.engine}`); // just a log.
    }
}

var objCar = new Car('V8'); // creates new onject
objCar.display(); // output: Engine is V8
console.log(objCar.engine); // output: V8 (accessing member here)

一个简单的界面：

    interface IPerson { // This is how we create an interface.
        firstName: string, // use commas to separate.
        lastName: string, // In classes we use semi-colon to separate.
        displayDetails: (number) => string
    }

    // We are going to store 'interface object' in a variable.
    // i.e. we are implementing interface with variable(not class!!)
    var customer: IPerson = {

        firstName: 'jose jithin', // 'implements' variables
        lastName: 'stanly',

        // Now method implementation.
        // Note: the syntax of 'displayDetails' maybe a bit confusing (given below)
        // as two colons are used.
        // It specifies a return type(string) here for this method. 
        displayDetails: (rank): string => { return `This person has rank ${rank}. ` }  

        // It can be rewritten as following too.
        displayDetails: (rank) => { return `This person has rank ${rank}. ` };
        // i.e. return type need not be specified, just like a normal method definition syntax.
    }

    console.log(customer.firstName); // output: jose jithin

    console.log(customer.lastName);  // output: stanly

    console.log(customer.displayDetails(1)); // output: This person has rank 

我已经详细介绍了类和接口。这可能有助于您理解。

2019：差异和用法更新 首先，有一个明显的区别：语法。这是一个简单但理解差异所必需的步骤：接口属性可以以逗号或分号结尾，而类属性只能以分号结尾。现在是有趣的事情。关于何时使用和何时不使用的部分可能是主观的——这些是我给团队成员的指导方针，但其他团队可能会有其他的指导方针，因为有充分的理由。如果你的团队有不同的做法，请随时发表评论，我很想了解原因

接口：允许定义将在设计和编译时用于强类型的类型。它们可以“实现”或“扩展”，但不能实例化（您不能

new

它们）。它们在向下传输到JS时被删除，因此不占用任何空间，但在运行时也无法对其进行类型检查，因此您无法在运行时检查变量是否实现了特定类型（例如，

foo instanceof bar

），除非检查其属性：

何时使用接口：当您需要为将在代码中多个位置使用的对象（尤其是多个文件或函数）创建属性和函数的约定时，请使用接口。此外，当您希望其他对象以此基本属性集开始时，也可以使用该属性集，例如具有多个类实现为特定类型车辆的

车辆

接口，如

汽车

，

卡车

，

船

（例如

类汽车实现车辆

）

当不使用接口时：当您想要拥有默认值、实现、构造函数或函数（不仅仅是签名）时

类：还允许定义将在设计和编译时用于强类型的类型，此外，还可以在运行时使用。这也意味着代码没有编译出来，因此会占用空间。这是@Sakuto提到的一个关键区别，但其含义不仅仅是空间。这意味着可以对类进行类型检查，即使在传输的JS代码中也可以保留对“它们是谁”的理解。进一步的区别包括：类可以使用

new

实例化，可以扩展，但不能实现。类可以具有构造函数和实际函数代码以及默认值

何时使用类：当您希望创建包含实际函数代码的对象时，请使用构造函数进行初始化，和/或使用

新建

创建这些对象的实例。此外，对于简单数据对象，可以使用类设置默认值。另一个您希望使用它们的时间是在您进行类型检查时，不过如果需要，可以为接口提供变通方法（请参阅接口部分OS链接）

何时不使用类：当您有一个简单的数据接口时，不需要实例化它，当您想让其他对象实现它时，当您只想在现有对象上放置一个接口时（想想类型定义文件），或者当它占用的空间是禁止的或不必要的时。作为补充说明，如果查看.d.ts文件，您会注意到它们只使用接口和类型，因此在传输到ts时，这将被完全删除

最后一点注意，除了类和接口之外，还有两个其他选项，第一个选项称为“类型”，与接口非常相似，但请查看本文，特别是2019年更新答案：。最后的选择

    interface IPerson { // This is how we create an interface.
        firstName: string, // use commas to separate.
        lastName: string, // In classes we use semi-colon to separate.
        displayDetails: (number) => string
    }

    // We are going to store 'interface object' in a variable.
    // i.e. we are implementing interface with variable(not class!!)
    var customer: IPerson = {

        firstName: 'jose jithin', // 'implements' variables
        lastName: 'stanly',

        // Now method implementation.
        // Note: the syntax of 'displayDetails' maybe a bit confusing (given below)
        // as two colons are used.
        // It specifies a return type(string) here for this method. 
        displayDetails: (rank): string => { return `This person has rank ${rank}. ` }  

        // It can be rewritten as following too.
        displayDetails: (rank) => { return `This person has rank ${rank}. ` };
        // i.e. return type need not be specified, just like a normal method definition syntax.
    }

    console.log(customer.firstName); // output: jose jithin

    console.log(customer.lastName);  // output: stanly

    console.log(customer.displayDetails(1)); // output: This person has rank 

interface Person {
    name: string;
    id: number;
    doStuff: () => void;
}

// implements Person says: You have to at least implement these things
// which are located on the person interface 
class employee implements Person {
    constructor(public name: string, public id: number){}

    doStuff () {console.log('Doing stuff')}
}

// interfaces can also describe variables and parameters
const p1: Person = {
    name: 'foo',
    id: 34,
    doStuff () {console.log('Doing stuff')}
}