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的更多相关文章

  1. 被迫开始学习Typescript —— interface

    一开始以为,需要使用 class 来定义呢,学习之后才发现,一般都是使用 interface 来定义的. 这个嘛,倒是挺适合 js 环境的. 参考:https://typescript.bootcss ...

  2. 被迫开始学习Typescript —— vue3的 props 与 interface

    vue3 的 props Vue3 的 props ,分为 composition API 的方式以及 option API 的方式,可以实现运行时判断类型,验证属性值是否符合要求,以及提供默认值等功 ...

  3. 在WisOne平台上学习TypeScript

    TypeScript是微软公司推出的开源的类型化脚本语言,目的是用于为弱类型的javaScript提供强类型的识别和感知功能,同时它提供了类.接口.继承等相关在javaScript中不容易实现的功能, ...

  4. 学习TypeScript,笔记一:TypeScript的简介与数据类型

    该文章用于督促自己学习TypeScript,作为学笔记进行保存,如果有错误的地方欢迎指正 2019-03-27  16:50:03 一.什么是TypeScript? TypeScript是javasc ...

  5. 学习typescript(二)

    学习typescript(二) ts 与 js 交互 ts 调用 js module使用 分为两种情况: ts 调用自己写的 js ts 调用别人写的 js 也就通过 npm 安装的 第一种情况处理如 ...

  6. 「非软文」零基础学习TypeScript(源码开源)

    今天,这篇文章篇幅很短,主要开放我最近学习整理TypeScript源码. 源码地址 https://github.com/maomincoding/typeScript_study 更多内容请见原文, ...

  7. 跟着Vam一起学习Typescript(第一期)

    一.安装环境与配置1.命令行安装 npm i -g typescript 2.快捷打开Vs Code编辑器 创建一个项目文件夹,在该文件夹下打开命令行工具,使用code .命令快速打开编辑器(如果计算 ...

  8. 学习typescript(一)

    环境 必装软件 node,推荐 node 8.0 npm,推荐 npm 5.0 git, 最新版 vscode, 编绎器 必装包 tsc: npm install -g typescript typi ...

  9. 学习TypeScript 笔记

    TypeScript 什么是TypeScript TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程 ...

随机推荐

  1. springboot+shiro 01 - 实现权限控制

    sb_shiro_session <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...

  2. IdentityServer4系列 | 支持数据持久化

    一.前言 在前面的篇章介绍中,一些基础配置如API资源.客户端资源等数据以及使用过程中发放的令牌等操作数据,我们都是通过将操作数据和配置数据存储在内存中进行实现的,而在实际开发生产中,我们需要考虑如何 ...

  3. H5进阶篇--实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  4. Top 15 - Material Design框架和类库(译)

    _Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格.它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用.完整的指南详情请看这里(ht ...

  5. 前端工作面试HTML相关问题

    前端工作面试HTML相关问题 Q: doctype(文档类型)的作用是什么? A: 在HTML中 doctype 有两个主要目的. 对文档进行有效性验证: 它告诉用户代理和校验器这个文档是按照什么DT ...

  6. Episode 1:正视微信(试播)

    本期是 WEB VIEW 的第一期播客节目. 「不囿于 WEB,不止于 VIEW」,WEB VIEW 是由 yin 和敬礼主持的一档泛科技播客.节目中我们谨慎考量技术进步所带来的优缺点,提倡用「人治」 ...

  7. H5移动端开发

    开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 git clone https://gitee.co ...

  8. C#编写一个计算器

    编写一个计算器,练习在窗体上添加控件.调整控件的布局,设置或修改控件属性,编写事件处理程序的方法. 代码: using System; using System.Collections.Generic ...

  9. Android限制输入框内容

    <EditText android:id="@+id/temper" android:hint="36.2" android:digits="1 ...

  10. JavaScript操作select下拉框选项移动

    运行结果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...