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

interface X {a: numberb: string
}type X = {a: numberb: string
};

我们可以用 interface 去 extend type：

用 class 实现 type：

用 class 实现 type 和 interface 的混合：

type intersection 的用法，使用 & 连接多个 type：

使用 partial 将部分 type 的字段变成 optional：

Hybrid Types with both type alias and interface

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

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

看个例子：

interface Counter {// callable part(start: number): string// static propertiesinterval: numberreset(): void}const getCounter = () => {const counter = ((start:number) => {}) as Countercounter.interval = 123counter.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 不支持，会遇到编译错误：

Extends and implements

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")}
};

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

元祖 Tuples

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

无法用 interface 定义元祖，但 interface 内部属性可以用元祖作为数据类型。

interface Response {value: [string, number]
}

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

当您需要定义新对象或对象的方法时，接口会更好。例如，在 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 里 interface 和 type 的区别相关推荐

TypeScript中interface 与 type的区别，你真的懂吗？
在写 ts 相关代码的过程中,总能看到 interface 和 type 的身影.它们的作用好像都一样的,相同的功能用哪一个都可以实现,也都很好用,所以也很少去真正的理解它们之间到底有啥区别, 分别在 ...
typescript和 java区别_typescript中interface和type的区别
相同点都可以描述一个对象或者函数 interface interface User { name: string age: number } interface SetUser { (name: s ...
三分钟了解interface和type的区别
对typescript 有一定了解的,会发现 interface 和 type 很相似,类型定义上,很多时候,用两种方式都能实现. 三分钟直入主题, 除了语法不同外,interface和type主要有 ...
ts中的interface与type的区别
1.typeof 的类型别名可以用于其他的类型,比如联合类型.元组类型.基本类型,interface 不行. 2.type 的别名不可以多次定义会报错,而 interface 则可以多次定义,会将其 ...
TypeScript 里 object 和 Object 的区别
这两个概念及其容易混淆. 特殊类型对象 object 指的是任何非原始值(字符串.数字.布尔值.符号.空值或未定义). 这不同于空对象类型{},也不同于全局类型 Object. 你很可能永远不会使用 ...
TypeScript中的interface、type、class——泰联病从口入
先看效果 type 和 interface 有什么异同? 1.interface侧重于描述数据结构,type侧重于描述类型 interface A{name:string; } type B = 'b ...
TypeScript里string和String，真不是仅仅是大小写的区别
本文分享自华为云社区<TypeScript里string和String的区别>,作者:gentle_zhou . 背景与JavaScript语言不同的是,TypeScript使用的是静态 ...
typeScript interface和type区别
typeScript interface和type区别 interface 参考资料 ----> https://www.tslang.cn/docs/handbook/interfaces.h ...
typescript中的类型type与接口interface
typescript中的type相当于是给类型起一个新的名字基本用法: 比如我想声明一个类型为number的年龄age,刚开始学typescript,我们可能会这样写 let age:number ...

TypeScript 里 interface 和 type 的区别

Hybrid Types with both type alias and interface

区别

Extends and implements

元祖 Tuples

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

TypeScript 里 interface 和 type 的区别相关推荐

最新文章

热门文章