关于typescript:TypeScript-里-interface-和-type-的区别

StackOverflow 上的探讨链接
Interface vs Type alias in TypeScript 2.7
Differences Between Type Aliases and Interfaces
Types vs. interfaces in TypeScript

interface X {
    a: number
    b: string
}

type X = {
    a: number
    b: string
};

咱们能够用 interface 去 extend type：

用 class 实现 type：

用 class 实现 type 和 interface 的混合：

type intersection 的用法，应用 & 连贯多个 type：

应用 partial 将局部 type 的字段变成 optional：

您可能偶然想要定义一个对象，它既充当函数又充当对象，并具备附加属性。

咱们在这里议论的是为函数（可调用对象）和该函数的动态属性定义类型。

看个例子：

interface Counter {
    // callable part
    (start: number): string
    // static properties
    interval: number
    reset(): void}
  
  const getCounter = () => {const counter = ((start:number) => {}) as Counter
     counter.interval = 123
     counter.reset = () => {}
     return counter
  }
  
  const callable = getCounter();
  callable(10);
  callable.reset();
  callable.interval = 5;

用 interface 定义了一个 Counter，该类型兼有 callable 和动态属性两种特色。

最佳实际：还是离开定义吧。

callable 的定义：

动态属性的定义：

最初的 counter 类型：

类型与类型之间连贯用 &，接口的组合用 extends.

In TypeScript, we have a lot of basic types, such as string, boolean, and number. These are the basic types of TypeScript. You can check the list of all the basic types here. Also, in TypeScript, we have advanced types and in these advanced types, we have something called type aliases. With type aliases, we can create a new name for a type but we don’t define a new type.

所以咱们应用的 type 关键字，定义的只是类型别名，而不是全新的类型。

We use the type keyword to create a new type alias, that’s why some people might get confused and think that it’s creating a new type when they’re only creating a new name for a type. So, when you hear someone talking about the differences between types and interfaces, like in this article, you can assume that this person is talking about type aliases vs interfaces.

在最新版本的 TypeScript 里，二者的区别越来越小。

Interfaces are basically a way to describe data shapes, for example, an object.
Type is a definition of a type of data, for example, a union, primitive, intersection, tuple, or any other type.

interface 反对 declaration merging，而 type alias 不反对。

interface Song {artistName: string;};

interface Song {songName: string;};

const song: Song = {
  artistName: "Freddie",
  songName: "The Chain"
};

TypeScript will automatically merge both interfaces declarations into one, so when we use this Song interface, we’ll have both properties.

而 type alias 不反对，会遇到编译谬误：

In TypeScript, we can easily extend and implement interfaces. This is not possible with types though.

Interfaces in TypeScript can extend classes, this is a very awesome concept that helps a lot in a more object-oriented way of programming. We can also create classes implementing interfaces.

例子：

class Car {printCar = () => {console.log("this is my car")
  }
};

interface NewCar extends Car {name: string;};

class NewestCar implements NewCar {
  name: "Car";
  constructor(engine:string) {this.name = engine}
  printCar = () => {console.log("this is my car")
  }
};

这里接口扩大了原始类，一个新的类又实现了接口。

元组是 TypeScript 中一个十分有用的概念，它为咱们带来了这种新的数据类型，它包含两组不同数据类型的值。

无奈用 interface 定义元祖，但 interface 外部属性能够用元祖作为数据类型。

interface Response {value: [string, number]
}

当您须要定义新对象或对象的办法时，接口会更好。例如，在 React 应用程序中，当您须要定义特定组件将要接管的 props 时，最好应用接口而不是类型：

interface TodoProps {
  name: string;
  isCompleted: boolean
};

const Todo: React.FC<TodoProps> = ({name, isCompleted}) => {...};

例如，当您须要创立函数时，类型会更好。假如咱们有一个函数将返回一个被调用的对象，这种办法更举荐应用类型别名：

type Person = {
  name: string,
  age: number
};

type ReturnPerson = (person: Person) => Person;

const returnPerson: ReturnPerson = (person) => {return person;};

接口与对象和办法对象更好地工作，类型更好地与函数、简单类型等一起工作。

更多 Jerry 的原创文章，尽在：” 汪子熙 ”:

关于typescript:TypeScript-里-interface-和-type-的区别

Hybrid Types with both type alias and interface

区别

Extends and implements

元祖 Tuples

什么时候用 interface，什么时候用 type alias？