被迫开始学习Typescript —— class
TS 的 class 看起来和 ES6 的 Class 有点像,基本上差别不大,除了 可以继承(实现)接口、私有成员、只读等之外。
参考:https://typescript.bootcss.com/classes.html
基本用法
我们可以定义一个 class,设置几个属性,然后设置一个方法,封装 Object.assign 简化reactive 的赋值操作。
- 创建自己的对象基类
import type { InjectionKey } from 'vue'
class BaseObject {
$id: string | symbol | InjectionKey<string>
name: string
age: number
constructor (id: string, name: string, age: number) {
this.$id = id
this.name = name
this.age = age
}
set $state(value: any) {
Object.assign(this, value)
}
}
- 使用
import { reactive, defineComponent } from 'vue'
const _state = new BaseObject('007', 'jyk')
const state = reactive(_state)
state.$state = {
name: '直接赋值'
}
看着是不是眼熟?你猜对了!这里参考 Pinia 设置 $state ,实现给 reactive 直接赋值的功能。
reactive 哪都好,只是整体赋值的时候有点郁闷,这里简单封装了一下,实现直接赋值的功能。
类的继承
上面的方法只是封装了对象,那么数组怎么办呢?这里就需要用到“继承” extends 的用法。
- 继承 js 的 Array 创建自己的数组类
class BaseArray extends Array {
$id: string | symbol | InjectionKey<string>
constructor () {
// 调用父类的 constructor()
super()
this.$id = 'array'
}
set $state(value: any) {
this.length = 0
if (Array.isArray(value)) {
this.push(...value)
} else {
this.push(value)
}
}
}
- 使用
const _state2 = new BaseArray()
const state2 = reactive(_state2)
state2.$state = [
{
name: '008'
},
{
name: '009'
}
]
这样数组形式的 reactive ,也可以直接赋值了,是不是方便很多?
继承的是原生数组,所以拥有了数组的所有功能。
另外,子类的constructor里面,需要调用super()
才会有 this。
实现接口
观察上面的两个 class,会发现拥有相同的成员:$id 和 $state。那么要不要约束一下?
如果想要实现约束功能的话,可以定义一个 interface 来实现。
- 定义接口
interface IState {
$id: string | symbol | InjectionKey<string>
set $state(value: any)
}
- 实现接口
class BaseObject implements IState {
略
}
class BaseArray extends Array implements IState {
略
}
这样设置之后,类的成员就要复合接口的定义,不符合的话会出现提示。
私有成员、只读成员
虽然可以使用 private、readonly
标识私有成员和只读成员,只是嘛,到目前为止有点鸡肋。因为只是在 TS 的范畴内给出错误提示,但是完全不影响运行。
那么能不能变相实现一下呢?可以的,只是有点绕圈圈,另外似乎不太正规。
我们把 $id 改为只读、伪隐藏成员。
- 修改一下接口,使用访问器(get)设置 $id
interface IState {
get $id(): string | symbol | InjectionKey<string>
set $state(value: any)
}
- 修改一下对象基类,使用 get 访问器
class BaseObject implements IState {
get $id(): string | symbol | InjectionKey<string>
略
}
- 创建对象实例的函数
function createState(id: string, name: string, age: number) {
// 继承 BaseObject 再定义一个class
class myState extends BaseObject {
constructor (name: string, age: number) {
// 调用父类的 constructor()
super(name, age)
}
// 使用 override 覆盖父类 $id
override get $id() {
return id
}
}
const _state = new myState(name, age)
const state = reactive(_state)
return state
}
- 使用
const state3 = createState('010', 'jyk0013', 29)
console.log(state3)
console.log('state3 - keys', Object.keys(state3))
for (const key in state3) {
console.log(key, state3[key])
}
- 效果
- 分析
把 $id 改为 get 访问器的方式,可以实现 readonly 的效果。
$id 放在 class (myState) 的“原型”上面,可以避免被遍历出来,这样就实现了伪隐藏的效果。
当然 使用 state.$id 的方式还是可以访问到的,所以是伪隐藏。
完整项目代码
https://gitee.com/naturefw-code/nf-rollup-state
被迫开始学习Typescript —— class的更多相关文章
- 被迫开始学习Typescript —— interface
一开始以为,需要使用 class 来定义呢,学习之后才发现,一般都是使用 interface 来定义的. 这个嘛,倒是挺适合 js 环境的. 参考:https://typescript.bootcss ...
- 被迫开始学习Typescript —— vue3的 props 与 interface
vue3 的 props Vue3 的 props ,分为 composition API 的方式以及 option API 的方式,可以实现运行时判断类型,验证属性值是否符合要求,以及提供默认值等功 ...
- 在WisOne平台上学习TypeScript
TypeScript是微软公司推出的开源的类型化脚本语言,目的是用于为弱类型的javaScript提供强类型的识别和感知功能,同时它提供了类.接口.继承等相关在javaScript中不容易实现的功能, ...
- 学习TypeScript,笔记一:TypeScript的简介与数据类型
该文章用于督促自己学习TypeScript,作为学笔记进行保存,如果有错误的地方欢迎指正 2019-03-27 16:50:03 一.什么是TypeScript? TypeScript是javasc ...
- 学习typescript(二)
学习typescript(二) ts 与 js 交互 ts 调用 js module使用 分为两种情况: ts 调用自己写的 js ts 调用别人写的 js 也就通过 npm 安装的 第一种情况处理如 ...
- 「非软文」零基础学习TypeScript(源码开源)
今天,这篇文章篇幅很短,主要开放我最近学习整理TypeScript源码. 源码地址 https://github.com/maomincoding/typeScript_study 更多内容请见原文, ...
- 跟着Vam一起学习Typescript(第一期)
一.安装环境与配置1.命令行安装 npm i -g typescript 2.快捷打开Vs Code编辑器 创建一个项目文件夹,在该文件夹下打开命令行工具,使用code .命令快速打开编辑器(如果计算 ...
- 学习typescript(一)
环境 必装软件 node,推荐 node 8.0 npm,推荐 npm 5.0 git, 最新版 vscode, 编绎器 必装包 tsc: npm install -g typescript typi ...
- 学习TypeScript 笔记
TypeScript 什么是TypeScript TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程 ...
随机推荐
- Effective Java —— 用静态工厂方法代替构造器
本文参考 本篇文章参考自<Effective Java>第三版第一条"Consider static factory methods instead of constructor ...
- CollectionUtils工具类之并集union(arr1,arr2)和差集subtract(arr1,arr2)
一.CollectionUtils工具类之并集union(arr1,arr2)和差集subtract(arr1,arr2) 采用的类: import org.apache.commons.collec ...
- Java基础学习之“二维数组”
一.鄙人对二维数组的理解 二维数组就是由多个数组并列而成 二.举例 1.普通数组(一维数组)的图像格式 2.二维数组的图像格式 代码 1 @Test 2 public void xueXi(){ 3 ...
- c++思维导图
转自:https://blog.csdn.net/qq_37941471/article/details/84026920
- 一步步搭建物联网系统——无处不在的CSS
无处不在的CSS 或许你觉得CSS一点儿也不重要,而事实上,如果说HTML是建筑的框架,CSS就是房子的装修.那么Javascript呢,我听到的最有趣的说法是小三--还是先让我们回到代码上来吧. C ...
- es6零碎记忆
1:substring 和 substr var str = '0123456789' console.log(str.substring(1)); //123456789 console.log(s ...
- 搭建 LNMP 环境
搭建 LNMP 环境 搭建 Nginx 静态服务器 安装 Nginx 使用 yum 安装 Nginx: yum install nginx -y 修改 /etc/nginx/conf.d/defaul ...
- FastAPI(六十九)实战开发《在线课程学习系统》接口开发--修改密码
之前我们分享了FastAPI(六十八)实战开发<在线课程学习系统>接口开发--用户 个人信息接口开发.这次我们去分享实战开发<在线课程学习系统>接口开发--修改密码 我们梳理一 ...
- intel 82599网卡(ixgbe系列)术语表
Intel® 82599 10 GbE Controller Datasheet 15.0 Glossary and Acronyms 术语表 缩写 英文解释 中文解释 1 KB A value of ...
- vim 下几种比较省劲的方式(vi结合着用)
Vim的几种模式 正常模式:可以使用快捷键命令,或按:输入命令行. 插入模式:可以输入文本,在正常模式下,按i.a.o等都可以进入插入模式. 可视模式:正常模式下按v可以进入可视模式, 在可视模式下, ...