关于 Vue + TypeScript 组件化的一点思考

旧城等待， 2022-10-26 12:50 226阅读 0赞

前面说过，组件化是使用 Vue 引入之后带来的一大优点。未有 Vue 之前——那个年代——苦苦寻思没有一个好的组件化方案。在当初 JavaScript 连类都尚未健全的情况下，真是费煞了苦心，最简单的“对象”是有了，可那不能构建复杂的大型 UI 系统，颗粒度太低了。对象、组件的关系，一小一大分别自然很清楚。那么加多一个“类 Class”呢？你能理清楚这些名词的关系吗？面向对象与组件有什么区别与联系呢？

其实不清楚没啥关系。码多了，你自然明白：）。关于 JS Class，我写过不少博文（[https://blog.csdn.net/zhangxin09/category\_782926.html][https_blog.csdn.net_zhangxin09_category_782926.html]），——尽管现在已经没啥卵用了：）。

总之，没有一个恰当组件化方案，是不行的。即使你有了类方案，构建一个新实例（`new XXX()`），那也不能”妄称“为组件。君不见，组件里面可不止 JavaScript 啊，还有标签和样式，都不是一门语言呢。如何把它们三者既辩证又统一地结合一起，确实是重中之重。另一边厢，标准的 WebComponent 方案现在不知怎么样，反正现在一个前端框架，就有其自己的组件化方案。

# Vue 于 TypeScript 下的问题 #

回到 Vue 的话题上。话说，Vue 的组件蔚然一股新风气，JavaScript 下很好，但到了 TypeScript 下面，加多了类型提示，长成这样子。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70]

可见区别也不大。不过问题来了，`this` 对象指针不明确，各个函数“各为其主”，不能连结为一个组件身上。这体现为上图红色框的报错，还有 `mouted()` 里面访问的 `this.positionFixed` 属性，就算没有报错，但编译器只能当作是 `any` 类型，不能明确为组件已经声明过的 `positionFixed : boolean` 类型——我都声明过了却都还不能用，不能正确地提示类型和约束——那是不是太蠢太不合理了啊？

坦白说，尽管我们人类写的时候，晓得那是一个整体，一个对象、一个组件。但是 IDE、编译器可不那么想，它没有更多的讯息告诉它那是一个整体，一个对象、一个组件。那么该怎么办呢？我所知道的有两个对应的方法。

# 用 `interface` 声明 #

为了解决满屏报错不和谐的局面，我们可以通过 interface 补充完整的类型信息，供 TS 编译知道。interface 直译接口，在 OOP 中非常常见，地位仅次于 Class，不过吊诡的是，不同人、不同语言往往对 interface 概念理解出入甚大，抽象嘛～加了点玄幻的味道进去自然不好理解。不过总的来说，和 Java 的 interface 一样，TS 的接口不能写实现，编译后没有对应的 JS 代码，仅仅声明一个对象是什么，结构有什么（包括了那些字段或属性、方法）。TS 的接口可以表征一个普通的 JS 对象，又叫 Object、JSON、Map，反正叫什么都好，就是 `var obj = {};` 或者 `var obj = new Object();` 的意思。

下面就是补充 `interface` 信息的例子。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 1]

还是之前那个例子，我们添加点东西。代码虽有点长，不过我们只关注红色框里面的就好。首先声明了 `CalendarInput` 的接口，说明具体成员有哪些，这里仅仅列出了属性，其实还可以声明方法（只是这里没用到而已）；然后在组件 `watch` 里面的函数、`mounted()` 函数都是声明了第一个“参数” `this` 及其类型为 `CalendarInput` 。

我们学习 JS 的时候，都知道 `this` 其实是一个“隐藏的参数”，总会传入。好了，现在把这个 `this` “显式”声明出来，不就搞定了函数“各为其主”的问题吗？总之，在函数出现的时候你都可以指定 `this` 这个类型如何，而不管这个函数在哪里的位置。

函数里面会访问到 Vue API 如 `$el、$refs……`没有在 TS 里面声明过它们是会报错的。对此解决的方法很简单，接口支持 `extends` 继承，新建一个叫 Vue 的类，包含了所有 API 成员，然后继承它就可以了。TS 神奇的是，接口可以继承 `declare class`——这是在 Java 不可能的。

declare class Vue { 
        public $el: HTMLElement;
    
        public $props: any;
    
        public $refs: any;
    
        public BUS: any;
    
        public $parent: Vue;
    
        public $options: any;
    
        public $children: any[];
    
        public static options: any;
    
        constructor(cfg: any) { 
        }
    
        public $watch(...any): void;
        
        public $set(...any): void;
    
        public $destroy() {  }
    
        public $emit(e: string, ...obj: any) {  }
    
        public static component(string, Object): void { 
        }
    
        public static set(...any): void { 
        }
    
        public static extend(...any): any { 
        }
        
        public ajResources = {  // 我自己扩展的，非 vue 官方 API
            imgPerfix: "",
            ctx: ""
        };
    }

它以 `*.dt.ts` 库声明的形式保存。

这是我对应上述问题的第一个方案，解决是解决了，但略显不够优雅，所以它只能作为最后的手段，总是可以解决的。——什么，你看不出哪里不优雅？好吧，公布答案就是代码重复，interface 声明了一次，实现又要重复一次，——冗余了：），而且还有每个方法 `this:XXX`。有见及此，还是得寻求更好的解决方案：）

# 官方方案 #

显然，比较简单直接的方法就是采用类 Class，把组件写成类就行。而且现在很多人在 Vue + TS 环境下开发，此问题有足够的“能见度”，自然不会被官方缺席，官方文档就有介绍如何在 TS 环境下开发 Vue 的问题。话分两头说，先看 Vue 2.x 版本的，官方推荐的是 [Class Component][]。写法就是继承 `Class` 那样子了，见截图如下。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 2]

除了官方这个方法，还有基于它更好的 [vue-property-decorator][]，用法参见 [https://blog.csdn.net/marker\_\_/article/details/105784520][https_blog.csdn.net_marker_article_details_105784520]。

通过 TS 注解+装饰器（Decorator）是比较好的解决方案，但是笔者观察后还是放弃了，原因是笔者还不太熟练新玩意 npm、import 等等这些的：（ 好吧，学不动了，只能拿“避免复杂”当作推搪的理由。

然后我把目光转向了新版 Vue 3。不知为何，Vue 团队好像不太感冒 Class 风格，推荐一种莫名其妙的[组合式（Composition） API][Composition_ API]，于是我表示——变动太大，也学不动了。

无论是 vue 2 还是 3，官方方案终究难合我口味，——装饰器模式的思路是对的，采用注解的方法我也想到，不就是 Java 那样子的手段嘛～但是我不清楚 TS 里面能否对注解进行反射（Reflection）……好吧，我承认，又要自己动手搞一个“轮子”了。

# “轮子”方案 #

首先还是我原来 Java 所熟悉的注解手段。咋一看，TS 语言层面支持注解，但我不理解编译中怎么处理注解，可否反射得到注解的信息？这是我的存疑，因为编译到 JS 后就类型消除了，注解也不存了，怎么可以得到注解的信息？调研一番，TS 官方并没有反射一说，而是[装饰器（Decorators）][Decorators]来处理注解。一看，又是高大上的东西，而且好像还不是反射的意思。

于是只能放弃注解的方案。这个难题先放一放，让我们想想怎么由 `Vue.component()` 的写法转为 Class 风格的写法。实际上这个问题一点也不复杂，几行代码的一个函数就行。核心思想就是反射获取 Class 各成员然后组装成为 `{xxx……}`，然后送入到 `Vue.component()` 第二个参数中去。Vue 组件允许有什么的成员，Class 就可以出现那些什么的成员，例如组件生存周期的函数 `mounted()`，类身上有这个方法，那么直接对应 `{……mounted() {}……}`。Class 本身就是一个 key/value 结构，妇孺皆懂，操作方便：），而这个 `mounted` 字眼是约定好的、固定的，在反射的循环中轻易获取：

for(var  i in obj) { 
      // i 就是 Class 成员名词，字符串类型
    }

那么再组装一下组件的配置参数，十分轻松。如果是组件方法，要求是在 `methods : {xxx, yyy……}` 下面的，那么也没关系，一切不是 Vue API 的方法（`typeof obj[i] == 'function'`且排除 Vue API 的）都视作是组件方法，扔到 `methods : {xxx, yyy……}` 即可。

Vue API 就那么十来个，所以转换不麻烦，逐个对应即可。比较棘手的是 vue 组件属性有两种：data 和 props，如果加上实例字段（不参与数据驱动的），就有三种属性。TS Class 只有一种属性，怎么区分呢？所以前面才会说用注解来解决。但既然注解不可行，又只能另辟蹊径了。——实际上说出来也很简单，甚至有点返璞归真的感觉。

仔细想想，组件的 data 和 props 的写法有显著区别的，props 要么 `xxx: String | Number | Boolean` 声明了类型，要么 `xxx: {type: String, default : "abc"}`，特征足够完备，我们在反射时候即可判断为 props。至于 data，也好办，我们只需要判断是 props，那么剩下的就是 data。

一开始的思路还是那样，可我很快就遇到问题，实际情况没那么简单，主要以下两点：

*  props 要么 `String | Number | Boolean`，要么 `{type: String, default : "abc"}`，虽然是属性挂在类身上，但访问 `this.xxx` 时报错，类型不对。正确方式是 `xxx:string = "";`
 *  data 最终为 function 类型，这个没问题，换作类属性写成 `xxx:string = "";` 也可以，`this.xxx` 能正确访问。问题是有时在 `data(){……}` 函数中可以作一些初始化的工作，如下图。那么此时就必须强制写成函数类型了，

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 3]

类属性还是要写出。其实什么值无所谓，只要类型正确就可以了。

所以有点美中不足，既要写原先的 vue 写法，又要写类属性的写法，多少会造成重复，特别在声明 props 的时候。

然而还有一个遗憾，或者说比较尴尬的地方就是，除了写好类，还要调用一个逻辑“登记组件”：（。这是无法避免的（至少当前是）。仅仅声明的一个类，其实不会使用它的（`new` 实例化），因为使用组件是在标签中是使用 `<aj-xxx>` 的，所以你只能在手动调用一次逻辑执行这个类，就是转化为 vue 组件了。

new XXX().register();

这个 方法是固定的，因为我们组件类都继承于 `VueComponent` 类，他是一个抽象类包含了 `register()` 方法。详细 `VueComponent` 类源码如下。

/** * 为让 Vue 组件使用 Class 风格，通过一个类似语法糖的转换器 * 这是实验性质的 */
    export abstract class VueComponent { 
        /** * 组件名字，必填 */
        abstract name: string;
    
        $el: HTMLElement = document.body;
    
        public $props: any;
    
        props: {  [key: string]: any } = { };
    
        public BUS: any;
    
        public $parent: any;
    
        public $options: any;
    
        public $destroy() {  }
    
        public $emit(e: string, ...obj: any) {  }
    
        /** * 转换为 ClassAPI */
        register(instanceFields?: string[]): void { 
            let cfg: {  [key: string]: any } = { 
                props: { },
                methods: { }
            };
    
            let dataFields: {  [key: string]: any } = { };
    
            for (var i in this) { 
                if (i == 'constructor' || i == 'name' || i == 'register' || i == '$destroy' || i == "$emit" || i == "$options")
                    continue;
    
                let value: any = this[i];
    
                if (isVueCfg(i))
                    cfg[i] = value;
                else if (isSimplePropsField(value))
                    cfg.props[i] = value;
                else if (typeof value == 'function')
                    cfg.methods[i] = value;
                else if (isPropsField(i, this.props))
                    cfg.props[i] = this.props[i];
                else // data fiels
                    dataFields[i] = value;
            }
    
            // 注意如果 类有了 data(){}，那么 data 属性将会失效（仅作提示用），改读取 data() {} 的
            if (!cfg.data)
                cfg.data = () => { 
                    return dataFields;
                }
    
            console.log(cfg)
    
            Vue.component(this.name, cfg);
        }
    }

可见，代码层面几行就搞定了，并不复杂。笔者这里尝试用文字去介绍反而比较多。不忘初心，为的就是简单办好事，所以也舍弃了一些高大全的考量。大家若认可，不妨将就用下：）。

最后补充一下，如果这个 vue 组件比较简单，那么按照原来的写法也是挺好的，不一定全都为类。

[https_blog.csdn.net_zhangxin09_category_782926.html]: https://blog.csdn.net/zhangxin09/category_782926.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70]: /images/20221024/cd0603507c8b49febbaa38d2120fbd7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 1]: /images/20221024/ba5499692f9a437583e0bac9882422c4.png
[Class Component]: https://class-component.vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 2]: /images/20221024/f8c3d776b35f40c0bdc245c6bf7ef215.png
[vue-property-decorator]: https://github.com/kaorun343/vue-property-decorator
[https_blog.csdn.net_marker_article_details_105784520]: https://blog.csdn.net/marker__/article/details/105784520
[Composition_ API]: https://www.vue3js.cn/docs/zh/guide/composition-api-introduction.html#%E4%BB%80%E4%B9%88%E6%98%AF%E7%BB%84%E5%90%88%E5%BC%8F-api
[Decorators]: https://www.tslang.cn/docs/handbook/decorators.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 3]: /images/20221024/1fc861c3c2e342db91bf3801ba70520d.png