加入收藏 | 设为首页 | 会员中心 | 我要投稿 西安站长网 (https://www.029zz.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 移动 > 正文

TypeScript 中高级应用与完美实践

发布时间:2019-08-02 01:12:00 所属栏目:移动 来源:AlloyTeam
导读:副标题#e# 当我们讨论 TypeScript 时,我们在讨论什么? TypeScript 的定位 JavaScript 的超集 编译期行为 不引入额外开销 不改变运行时行为 始终与 ESMAScript 语言标准一致 (stage 3 语法) TypeScript 中的 Decorator 较为特殊,为 Angular 团队和 TypeSc

与 interface 相比,type 的特点如下:

  • 表达功能更强大,不局限于 object/class/function
  • 要扩展已有 type 需要创建新 type,不可以重名
  • 支持更复杂的类型操作
  1. type Tuple = [number, string]; 
  2. const a: Tuple = [2, 'sir']; 
  3. type Size = 'small' | 'default' | 'big' | number; 
  4. const b: Size = 24; 

基本上所有用 interface 表达的类型都有其等价的 type 表达。但我在实践的过程中,也发现了一种类型只能用 interface 表达,无法用 type 表达,那就是往函数上挂载属性。

  1. interface FuncWithAttachment { 
  2.     (param: string): boolean; 
  3.     someProperty: number; 
  4.   
  5. const testFunc: FuncWithAttachment = ...; 
  6. const result = testFunc('mike');    // 有类型提醒 
  7. testFunc.someProperty = 3;    // 有类型提醒 

extends 关键字

extends 本意为 “拓展”,也有人称其为 “继承”。在 TypeScript 中,extends 既可当作一个动词来扩展已有类型;也可当作一个形容词来对类型进行条件限定(例如用在泛型中)。在扩展已有类型时,不可以进行类型冲突的覆盖操作。例如,基类型中键 a 为 string,在扩展出的类型中无法将其改为 number。

  1. type A = { 
  2.     a: number 
  3.   
  4. interface AB extends A { 
  5.     b: string 
  6. // 与上一种等价 
  7. type TAB = A & { 
  8.     b: string 

泛型

在前文我们已经看到类型实际上可以进行一定的运算,要想写出的类型适用范围更广,不妨让它像函数一样可以接受参数。TS 的泛型便是起到这样的作用,你可以把它当作类型的参数。它和函数参数一样,可以有默认值。除此之外,还可以用 extends 对参数本身需要满足的条件进行限制。

(编辑:西安站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读