【伪vue3.0】vue2.0 + composition API + ts__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

vue3.0 正式版已经不远，偷懒一下，跳过vue2.0 + ts 的那套 Class API，一步到位。

而@vue/composition-api已进入beta阶段，掘金上也有见到部分先行者，这为在生产环境中进行尝试提供了便利。

所以，基于原有的 vue2.0 + js开发框架搭建一个 vue 2.0 + compositionAPI + typescript 的开发环境，在一些内部项目中进行尝试，为将来vue3.0 + ts 开发做准备。

于是就有了它, 可直接体验：https://github.com/OldDream/vue2.0-compositionAPI-typescript

优点：可使用完整的 Composition API

缺点：Vuex、vur-router 的使用体验和 2.0 的一样，与3.0的不同。

简单介绍一下配置的过程：

1、vue cli创建 ts 项目

此时项目是基于 Class API 的，没关系，引入 compositionAPI 后删除相关依赖，略微调整 .vue 中的内容即可。

2、webpack相关配置调整、public文件夹直接复制

这部分其实和主题无关，但还是记录一下。

配置打包到测试、正式环境的区分，配置 browserslist，配置 postcss，配置 babel-plugin-import，老项目用的 vue-cli4，这部分直接复制相关配置即可，无变化。

3、引入compositionAPI + 开启 .vue 文件按 typescript 编译

安装 compositionAPI 插件，并按照介绍引入。参考：https://github.com/vuejs/composition-api

3.1、安装依赖npm install [@vue](/user/vue)/composition-api

3.2、main.js 中加入

import VueCompositionAPI from '[@vue](/user/vue)/composition-api'

Vue.use(VueCompositionAPI)

3.3、.vue 文件，开启 typescript 支持。如果不加入lang="ts"，则会按照 js 进行编译。

// script 标签加入
<script lang="ts">

4、原有js工具文件引入

4.1、较为复杂的js模块，在同目录下写.d.ts 类型声明文件，给导出的函数增加类型定义。我这边是使用ES Module导出，CommonJs似乎有所不用。

可参考：https://ts.xcatliu.com/basics/declaration-files.html#export

例如：

// common.js
export {
  protocolLoaded
}
// common.d.ts
export function protocolLoaded(callback: Function): void

4.2、简单的小文件，改成.ts 按照报错提示修改。。。纯粹是练手，直接写 .d.ts 的声明文件也是可以的。

4.3、ts中，访问window下的属性，需要声明一下，比如

declare global {
  interface Window {
    Protocol: any;
  }
}

4.4、 ts中，访问由 <script> 标签引入，在在全局作用域中中声明的 Class（let class const 不会成为全局对象的属性），同样需要声明，在项目中，此类声明可以集中到一个文件中，比如global.d.ts，后配置到tsconfig.json的 include中，或用/// <reference path="..." />在需要调用的文件引入。

declare class Protocol { // 声明用 script 标签引入的 Protocol
  constructor(a: any,b: any);
}

5、composition API的一些小变化

5.1、最明显的就是 setup 中 this 的指向不是组件实例，要获取组件实例，需要用 context.root ：

setup(props, context) => ({
   blabla: computed(() => context.root.$store.myModule.state.blabla)
})

目前来看，只要修改这些就行。

update 1：已经用它开发一个小项目了，真心爽。