当前位置: 代码网 > it编程>编程语言>Javascript > Typescript中interface与type的相同点与不同点的详细说明

Typescript中interface与type的相同点与不同点的详细说明

2024年05月18日 Javascript 我要评论
interface vs type大家使用 typescript 总会使用到 interface 和 type,官方规范 稍微说了下两者的区别an interface can be named in

interface vs type

大家使用 typescript 总会使用到 interface 和 type,官方规范 稍微说了下两者的区别

  • an interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.
  • an interface can have multiple merged declarations, but a type alias for an object type literal cannot.

但是没有太具体的例子。

明人不说暗话,直接上区别。

相同点

都可以描述一个对象或者函数

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;

都允许拓展(extends)

interface 和 type 都可以拓展,并且两者并不是相互独立的,也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多,但是两者语法不同

interface extends interface

interface name { 
  name: string; 
}
interface user extends name { 
  age: number; 
}

type extends type

type name = { 
  name: string; 
}
type user = name & { age: number  };

interface extends type

type name = { 
  name: string; 
}
interface user extends name { 
  age: number; 
}

type extends 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

// 具体定义数组每个位置的类型
type petlist = [dog, pet]
  • type 语句中还可以使用 typeof 获取实例的 类型进行赋值
// 当你想获取一个变量的类型时,使用 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 {
  name: string
  age: number
}

interface user {
  sex: string
}

/*
user 接口为 {
  name: string
  age: number
  sex: string 
}
*/

总结

一般来说,如果不清楚什么时候用interface/type,能用 interface 实现,就用 interface , 如果不能就用 type 。其他更多详情参看 官方规范文档

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com