被迫开始学习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 由微软开发的自由和开源的编程 ...
随机推荐
- springboot+shiro 01 - 实现权限控制
sb_shiro_session <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...
- IdentityServer4系列 | 支持数据持久化
一.前言 在前面的篇章介绍中,一些基础配置如API资源.客户端资源等数据以及使用过程中发放的令牌等操作数据,我们都是通过将操作数据和配置数据存储在内存中进行实现的,而在实际开发生产中,我们需要考虑如何 ...
- H5进阶篇--实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- Top 15 - Material Design框架和类库(译)
_Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格.它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用.完整的指南详情请看这里(ht ...
- 前端工作面试HTML相关问题
前端工作面试HTML相关问题 Q: doctype(文档类型)的作用是什么? A: 在HTML中 doctype 有两个主要目的. 对文档进行有效性验证: 它告诉用户代理和校验器这个文档是按照什么DT ...
- Episode 1:正视微信(试播)
本期是 WEB VIEW 的第一期播客节目. 「不囿于 WEB,不止于 VIEW」,WEB VIEW 是由 yin 和敬礼主持的一档泛科技播客.节目中我们谨慎考量技术进步所带来的优缺点,提倡用「人治」 ...
- H5移动端开发
开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 git clone https://gitee.co ...
- C#编写一个计算器
编写一个计算器,练习在窗体上添加控件.调整控件的布局,设置或修改控件属性,编写事件处理程序的方法. 代码: using System; using System.Collections.Generic ...
- Android限制输入框内容
<EditText android:id="@+id/temper" android:hint="36.2" android:digits="1 ...
- JavaScript操作select下拉框选项移动
运行结果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...