type 和 interface的区别

类型别名（type）会给一个类型起个新名字。类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。

1、都可以描述一个对象或者函数
【interface】

interface User {name: string,age: number
}interface SetUser {(name: string, age: number) : void
}

【type】

type User = {name: string,age: number
}type SetUser = (name: string, age: number) => void

2、扩展（extends）与交叉类型（intersection types）

interface 可以 extends，type 不允许 extends和implement的，type可以通过交叉类型实现 interface 的extends行为。

并且两者并不是相互独立的，也就是说 interface 可以 extends type ， type也可以与 interface类型交叉。

两者效果差不多，但是两者语法不同。

interface extends interface
interface Name {name: string;
}
interface User extends Name {age: number;
}

type & type

type Name  = {name: string
}type User = Name & {age: number}

interface extends type

type Name = {name: string
}interface User extends Name {age: number
}

type & interface

interface Name {name: string
}type User = Name & {age: number
}

type 可以 interface 不行

type 可以声明基本类别名，联合类型，元组类型

type Name = string
interface Dog {wong();
}
interface Cat {miao();
}type Pet = Dog | Cat;let a: Pet = {wong() {},
};

通过 typeof 获取实例的类型进行赋值

let div = document.createElement('div')
type B = typeof div

其他骚操作

type StringOrNumber = string | number;  type Text = string | { text: string };  type NameLookup = Dictionary<string, Person>; type Callback<T> = (data: T) => void;  type Pair<T> = [T, T];  type Coordinates = Pair<number>;  type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

interface 可以 type不行

interface 能够声明合并

interface User{nage: string,age: number,
}
interface User{sex: string
}let user: User = {nage: '小明',age: 10,sex: '男'
}

推荐：能用 interface 就用 interface，实现不了再考虑用 type

总结

像我们提到的，类型别名可以像接口一样；然而，仍有一些细微差别。

其一，接口创建了一个新的名字，可以在其它任何地方使用。类型别名并不创建新名字—比如，错误信息就不会使用别名。在下面的示例代码里，在编译器中将鼠标悬停在 interfaced 上，显示它返回的是 Interface，但悬停在 aliased 上时，显示的却是对象字面量类型。

type Alias = { num: number }
interface Interface {num: number;
}
declare function aliased(arg: Alias): Alias;
declare function interfaced(arg: Interface): Interface;

另一个重要区别是类型别名不能被 extends和 implements（自己也不能 extends和 implements其它类型）。因为软件中的对象应该对于扩展是开放的，但是对于修改是封闭的，你应该尽量去使用接口代替类型别名。

另一方面，如果你无法通过接口来描述一个类型并且需要使用联合类型或元组类型，这时通常会使用类型别名。

type 和 interface的区别相关推荐

type 与 interface 的区别，你真的懂了吗？
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群在写 ts 相关代码的过程中,总能看到 interface 和 type 的身影.它们的作用 ...
type和interface的区别
type和interface都可以用来表示接口,但实际用的时候会有写差异. 1.type和interface的相同点:都是用来定义对象或函数的形状. interface example {name: ...
TS 中 type 和 interface 的区别
类型别名(type)会给一个类型起个新名字.类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型. 1.都可以描述一个对象或者函数 [interface] inte ...
typescript中type、interface的区别
一.概念定义 interface:接口在TS 中主要用于定义[对象类型],可以对[对象]的形状进行描述. type :类型别名为类型创建一个新名称,它并不是一个类型,只是一个别名. 二,区别 in ...
TypeScript type 和 interface区别
在使用ts的type 和 interface时两者作用(简单案例) interface只能定义对象数据结构类型. // 简单案例1 interface User {name: string;age: ...
【ts】typescript高阶：键值类型及type与interface区别
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 typescript高阶之键值类型及type与interface区别前言一.键值类型的语法 1.语法 2.错误例子 3.正确例子 ...
type 和 interface区别
interface只能定义对象数据结构类型. // 简单案例1 interface User {name: string;age: number;sex?: string; }let user: Us ...
TypeScript中type和interface区别
typescript中interface介绍:TypeScript 中的接口 interface_疆~的博客-CSDN博客通常使用接口(Interface)来定义对象的类型.https://blog. ...
TypeScript 中 Type 和 Interface 有什么区别？
type 和 interface type 是类型别名,给一些类型的组合起别名,这样能够更方便地在各个地方使用. 假设我们的业务中,id 可以为字符串或数字,那么我们可以定义这么一个名为 ID 的 ...

type 和 interface的区别

总结

type 和 interface的区别相关推荐

最新文章

热门文章