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:已经用它开发一个小项目了,真心爽。
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 啊。。。 原文链接:https://juejin.im/post/6850418115106570254