美文网首页
TypeScript 接口的灵活运用

TypeScript 接口的灵活运用

作者: Zszen | 来源:发表于2018-10-07 18:21 被阅读43次

在这之前,js开发的属性和对象可以随便增添和删减,灵活度虽然高,也增大了我们开发的难度,我们必须时刻清醒的认识每个变量对应的意义和属性。

但到了TypeScript这里,让我们很方便的把这一系列问题解决了。让我看一下例子:

我想要定义一个复杂的数组,要求内部包含数组,对象等其他的内容

我使用js来写:

var obj = [];
obj.push({name:"123",info:{x:1,y:2}});

在js里面,你很难分清对象定义的是什么,虽然可以通过命名来弥补,但是如果工程量上来了,那么你应该如何来处理海量code中的某个字母错误?

ts来写:

let obj:{name:string,info:{x:number,y:number}}[] = [];
obj.push({name:"123",info:{x:1,y:2}});

let unit = <{name:string,info:{x:number,y:number}}>target;

这样写法,在输入和获取都很灵活的能拿到对象以及内部对象的变量属性。但是这个对象描述过于冗长,我们每个需要的地方都要复制黏贴,实在麻烦。

ts 接口来写:

interface TargetInfo{
  name:string;
  info:{x:number,y:number};
}
let obj:TargetInfo[] = [];
obj.push({name:"123",info:{x:1,y:2}});

let unit = < TargetInfo >target;

这样可以定义严格的对象写法,而且引用也方便。但因为严格,这个接口是不允许多写和少写变量的。

ts 接口的可选和可扩展

interface TargetInfo{
  name?:string;
  info:{x:number,y:number};
  [propName: string]: any;
}

let obj:TargetInfo[] = [];
obj.push({other:true,info:{x:1,y:2}});

这时候可以扩展其他值

ts 接口注意一点

interface TargetInfo{
  name?:string;
  info:{x:number,y:number};
  [propName: string]: number;
}

注意这样写会报错,可扩展参数一样约束了可选参数的类型,name为string,而可扩展参数为number,这是不允许的。

参考:
https://stackoverflow.com/questions/14425568/interface-type-check-with-typescript
https://www.jianshu.com/p/1c2fb566cdd2

相关文章

  • TypeScript 接口的灵活运用

    在这之前,js开发的属性和对象可以随便增添和删减,灵活度虽然高,也增大了我们开发的难度,我们必须时刻清醒的认识每个...

  • TypeScript 中的接口(interface)

    TypeScript 中的接口可分为: 之前的文章 TypeScript 基础类型和接口(interface)里面...

  • 学习TypeScript 接口

    TypeScript 接口定义 interface interface_name {} 实例 联合类型和接口 接口...

  • TypeScript - 接口

    TypeScript - 接口( Interface) [TOC] 学习目标 理解接口的概念 学会通过接口标注复杂...

  • TypeScript学习笔记之四接口(Inferfaces)

    一、使用环境 Mac 电脑 WebStorm TypeScript3.x版本 二、接口 在 TypeScript ...

  • TypeScript 接口

    TypeScript接口 接口只读属性 使用关键字readonly定义只读的接口属性 出现错误,如下 创建不可修改...

  • TypeScript接口

    属性类型接口 函数类型接口 定义了函数的参数。包括入参和出参。 可索引类型接口 类类型接口

  • typescript 接口

    日期:2019 年 8 月 29 日 typescript 接口 介绍 TypeScript的核心原则之一是对值所...

  • TypeScript接口

    接口定义 类型检查器不会检查属性的顺序,只要相应的属性存在并且类型匹配即可。 可选属性 定义可选属性只需要在属性后...

  • TypeScript——接口

    TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”...

网友评论

      本文标题:TypeScript 接口的灵活运用

      本文链接:https://www.haomeiwen.com/subject/aoalaftx.html