用大白话让你理解TypeScript的要点.(三)

简介: 用大白话让你理解TypeScript的要点.(三)

三.对象的场景


一般对象.(不包括方法)


和之前一样,我们不要上来就直接约束对象里有什么,永远是先有数据再有类型限制。

image.png

这时候回过头去添加类型约束。(特意示范了一个错误类型)

image.png

这里还有一个问题,这里我们使用的分号去隔开每一个属性的类型。这不是必须的,你可以通过多行约束来限制属性类型。

image.png

包含方法的对象


image.png

四.接口 interface


接口的场景一


还是老规矩,现有具体数据再回过头添加约束条件。这里可以用 Function这个关键字来定义对象的属性值为一个函数。

image.png

还是用冒号:关键字来约束条件。

image.png

接口的场景二(继承extends)


比如我们现在有一个额外的interface来约束新的对象

image.png

但是我们发现,person2Style这个约束格式和上一person1Style好多都是一样的,我们有没有什么方法可以直接复用那些相同的,再单独添加自己想要的一些呢?这里可以用到extends关键字来实现。实现起来也是比较容易的,如果没有想要添加的额外属性,那么我们可以

image.png

image.png

五.对象的特殊拓展(元祖)


刚听到这个词直接给我整懵逼了,武侠小说元太祖吗?

image.png

其实深入了解以后就知道其实就是限制你数组的数量和对应索引位置的对应值的类型而已。举个例子,比如我现在有个数字类型的数组,如下:

image.png

其实就是和写数据一样,把数组里数据的个数,属性和值都约束了。

image.png

六.枚举类型enum


这个属性其实就是规定了一些用到的常量。起个最简单的例子:

我们现在有个函数,我们已经知道它接受字符串参数:如果我们这样写

image.png

好像也达到了一些目的,但是我们只希望它接受上(up)下(down)左(left)右(right)个参数,那么我们就可以用到enum,用它来定义一些常量。

image.png

我们给changeDirection这个函数的参数定义为Direction这个enum类型, 那么这样就约束

image.png

并且可以像对象一样调用这个enum类型,如下:

image.png


相关文章
|
JavaScript
用大白话让你理解TypeScript的要点.(二)
用大白话让你理解TypeScript的要点.(二)
用大白话让你理解TypeScript的要点.(二)
|
JavaScript Java C语言
用大白话让你理解TypeScript的要点.(一)
用大白话让你理解TypeScript的要点.(一)
用大白话让你理解TypeScript的要点.(一)
|
3月前
|
JavaScript 前端开发
揭秘 TypeScript 条件类型:超越简单类型检查
揭秘 TypeScript 条件类型:超越简单类型检查
|
3月前
|
JavaScript 安全 索引
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
|
3月前
|
JavaScript 安全 IDE
TypeScript 类型体操:别让 `any` 毁了你的安全网!
TypeScript 类型体操:别让 `any` 毁了你的安全网!
|
3月前
|
JavaScript 安全 编译器
TypeScript 类型守卫:让你的类型系统更智能
TypeScript 类型守卫:让你的类型系统更智能
|
8月前
|
存储 安全 JavaScript
TypeScript-内置应用程序类型-Recode
通过使用 `Record` 类型,开发者可以显著提升代码的安全性和可维护性。无论是配置对象、字典结构还是动态表单,`Record` 类型都提供了一个简洁、类型安全的解决方案。
373 82
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
276 0
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
283 106