三对象的场景
一般对象.(不包括方法)
和之前一样,我们不要上来就直接约束对象里有什么,永远是先有数据再有类型限制。
文章图片
这时候回过头去添加类型约束。(特意示范了一个错误类型)
文章图片
这里还有一个问题,这里我们使用的分号去隔开每一个属性的类型。这不是必须的,你可以通过多行约束来限制属性类型。
文章图片
包含方法的对象
文章图片
四.接口 interface
接口的场景一
还是老规矩,现有具体数据再回过头添加约束条件。这里可以用 Function
这个关键字来定义对象的属性值为一个函数。
文章图片
还是用冒号:
关键字来约束条件。
文章图片
接口的场景二(继承extends)
比如我们现在有一个额外的interface
来约束新的对象
文章图片
但是我们发现,person2Style
这个约束格式和上一person1Style
好多都是一样的,我们有没有什么方法可以直接复用那些相同的,再单独添加自己想要的一些呢?这里可以用到extends
关键字来实现。实现起来也是比较容易的,如果没有想要添加的额外属性,那么我们可以
文章图片
文章图片
四.对象的特殊拓展(元祖)
刚听到这个词直接给我整懵逼了,武侠小说元太祖吗?
文章图片
其实深入了解以后就知道其实就是限制你数组的数量和对应索引位置的对应值的类型而已。举个例子,比如我现在有个数字类型的数组,如下:
文章图片
其实就是和写数据一样,把数组里数据的个数,属性和值都约束了。
文章图片
五.枚举类型enum
这个属性其实就是规定了一些用到的常量。起个最简单的例子:
我们现在有个函数,我们已经知道它接受字符串参数:如果我们这样写
文章图片
好像也达到了一些目的,但是我们只希望它接受上(up)下(down)左(left)右(right)
个参数,那么我们就可以用到enum
,用它来定义一些常量。
文章图片
我们给changeDirection
这个函数的参数定义为Direction
这个enum
类型,
那么这样就约束
文章图片
并且可以像对象一样调用这个enum
类型,如下:
【用大白话让你理解TypeScript的要点.(三)】
文章图片
推荐阅读
- react使用 create-react-app 构建基于TypeScript的React前端架构----上
- [TypeScript] Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers(代码
- deno|deno连接mysql数据库
- deno|deno简易封装一个http服务器(路由-上篇)
- create-react-app + Typescript脚手架搭建
- Vue2.5 Web App 项目搭建 (TypeScript版)
- Typescript|react类组件及函数组件中使用typescript
- TypeScript + React + Redux 实战简单天气APP全套完整项目