type 与 interface

官方文档是这么说的:

For the most part, you can choose based on personal preference, and TypeScript will tell you if it needs something to be the other kind of declaration. If you would like a heuristic, use interface until you need to use features from type.

大多数情况下,你可以根据个人偏好进行选择,TS 会告诉你是否它是否需要额外的信息去改成另一个声明。如果你想要一个启发式:

使用 interface 一直到你需要使用 type 的一些特性。

所以,如果不是项目有额外的规范的话,一般情况下可以使用 inrerface 就够了。

type

一个 type alias 的定义就是:一个任何类型的名字 (a name for any type),其语法如下:

type Point = {x: number;y: number;
};// Exactly the same as the earlier example
function printCoord(pt: Point) {console.log("The coordinate's x value is " + pt.x);console.log("The coordinate's y value is " + pt.y);
}printCoord({ x: 100, y: 100 });

除了基础的使用之外,type 还有这几个 interface 不具备的特性:

  1. 可声明基础型

    type primitiveType = string;
    

    而 interface 因为语法问题,当其被进行声明时,已经是一个对象结构。

    同理可推,type 也可以用来声明 tuple——毕竟 tuple 从结构上来说不是一个对象。

  2. 可声明 union 类型

    type type1 = {x: number;
    };
    type type2 = {y: number;
    };type unionType = type1 | type2;
    

    这时对 unionType 的断言为 {x: 1} 或是 {y:1.11},如出现其他的类型则会报错:

    其实这样的功能对于 primitive 的生命比较有用,interface 也可以使用 optional 选项进行实现。

  3. 可以用计算式

    这是在看另一个项目组的项目时碰到的写法,当时第一个感觉就是……woc 牛逼啊,可太省事情了:

    可惜 interface 没法使用这个操作。

  4. 创建后无法被修改

    也就比较像是 Object.freeze() 这种实现吧。

    type Window = {title: string;
    };type Window = {ts: TypeScriptAPI;
    };// Error: Duplicate identifier 'Window'.
    

除此之外,type 的扩展方式使用 & 符号,如:

type Animal = {name: string;
};type Bear = Animal & {honey: boolean;
};const bear = getBear();
bear.name;
bear.honey;

interface

一个 nterface declaration 的定义就是:另一个命名对象类型的方式 (another way to name an object type),其语法如下:

interface Point {x: number;y: number;
}function printCoord(pt: Point) {console.log("The coordinate's x value is " + pt.x);console.log("The coordinate's y value is " + pt.y);
}printCoord({ x: 100, y: 100 });

可以看到,和使用 type 没什么特别大的区别,这也就是 TS 官方说,先用 interface,遇到 interface 没法满足的功能再使用 type 的原因。

interface 的扩展方式如下:

interface Animal {name: string;
}interface Bear extends Animal {honey: boolean;
}const bear = getBear();
bear.name;
bear.honey;

与 type 的对比就是,interface 更加的动态,也就是说如果新建一个变量名相同的 interface,TS 会自动对其进行扩展,如:

interface Window {title: string;
}interface Window {ts: TypeScriptAPI;
}const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

总结

TS 的官方推荐是一直使用 interface 一直到 interface 无法满足对 type 的需求,个人看别的项目的感觉是,对于大部分的 data definition(不可变的数据类型,需要传进对象的参数)应该使用 type,其他的情况可以使用 interface。

另外 TS 中的实现还挺乱的,比如说彼此扩展这种事情都是可以实现的:

所以规范化的执行是最重要的事情。

type 与 interface相关推荐

  1. TypeScript type 和 interface区别

    在使用ts的type 和 interface时 两者作用(简单案例) interface只能定义对象数据结构类型. // 简单案例1 interface User {name: string;age: ...

  2. TypeScript中type和interface区别

    typescript中interface介绍:TypeScript 中的接口 interface_疆~的博客-CSDN博客通常使用接口(Interface)来定义对象的类型.https://blog. ...

  3. type 和 interface的区别

    类型别名(type)会给一个类型起个新名字. 类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型. 1.都可以描述一个对象或者函数 [interface] int ...

  4. TypeScript 中 Type 和 Interface 有什么区别?

    type 和 interface type 是 类型别名,给一些类型的组合起别名,这样能够更方便地在各个地方使用. 假设我们的业务中,id 可以为字符串或数字,那么我们可以定义这么一个名为 ID 的 ...

  5. type和interface的区别

    type和interface都可以用来表示接口,但实际用的时候会有写差异. 1.type和interface的相同点:都是用来定义对象或函数的形状. interface example {name: ...

  6. 【ts】typescript高阶:键值类型及type与interface区别

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 typescript高阶之键值类型及type与interface区别 前言 一.键值类型的语法 1.语法 2.错误例子 3.正确例子 ...

  7. type 和 interface区别

    interface只能定义对象数据结构类型. // 简单案例1 interface User {name: string;age: number;sex?: string; }let user: Us ...

  8. type 与 interface 的区别,你真的懂了吗?

    大厂技术  高级前端  Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 在写 ts 相关代码的过程中,总能看到 interface 和 type 的身影.它们的作用 ...

  9. TS 中 type 和 interface 的区别

    类型别名(type)会给一个类型起个新名字.类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型. 1.都可以描述一个对象或者函数 [interface] inte ...

最新文章

  1. Struts2+Android (3) 多种方式向服务器发送信息
  2. 打印dog信息java_java – 打印arraylist元素?
  3. VTK:图片之ImageStack
  4. p服务器不响应,无法加载资源:服务器响应状态为500
  5. php 文件类型 html,HTML的文档类型怎么选择
  6. 一名英格兰球迷眼里的本届英格兰队
  7. msg_p!=(void*) 0 --消息邮箱(点滴学习)
  8. 下拉菜单,防鼠标反复触发
  9. MYSQL学习(一) - 数据结构
  10. python 迭代器 生成器_python 迭代器与生成器
  11. 谈谈java中的集合框架
  12. 转:Git: 对象原理
  13. win10字体安装_Win10操作系统下字体的安装教程(非常详细,适合新手DIY)
  14. 2022年31省市数字化转型路线图
  15. Python实现批量自动发工资条
  16. Android WebView 视频播放,全屏按钮不显示或灰显解决方案
  17. AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定(二)
  18. 实例019:完数 一个数如果恰好等于它的因子之和,这个数就称为“完数“。例如6=1+2+3.编程找出1000以内的所有完数。
  19. 计算机专业surface pro,surface pro4家庭版和专业版的不同
  20. 初识语音视觉交互芯片——CSK6

热门文章

  1. 【深度强化学习】Sarsa
  2. linux derby path,试用开源数据库ApacheDerby
  3. [附源码]JAVA毕业设计体检系统(系统+LW)
  4. java中JSB,jsb:useBean的有关问题
  5. U盘出现大量乱码文件,并且不能彻底删除
  6. 十大iOS塔防游戏评点
  7. 开发接口注意事项(转载自微信公众号)
  8. 基于优化智能算法(粒子群灰狼)的非侵入式负荷识别(NILM)建模(提供代码下载)
  9. 【论文翻译】Few-Shot Object Detection and Viewpoint Estimation for Objects in the Wild
  10. css li元素平分父div