当前位置: 主页 > 日志 > 个人日记 > 文章

type和interface的区别

发布时间: 2022-02-28 18:26:23 作者: 王乐园 浏览次数: 432

type和interface的区别

相同点
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

本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: