vue3.0 正式版已经不远，偷懒一下，跳过vue2.0 + ts 的那套 Class API，一步到位。
而在2.0环境下提供ts支持的插件@vue/composition-api已发布正式版，这为在生产环境中进行尝试提供了便利。
因此，基于原有的 vue2.0 + js开发环境搭建一个 vue 2.0 + compositionAPI + typescript 的开发环境，在一些内部项目中进行尝试，为将来vue3.0 + ts 开发做准备。
于是就有了它【求star】, 下载后可直接体验：github.com/OldDream/vu…
优点：可使用完整的 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 插件，并按照介绍引入。参考：github.com/vuejs/compo…
3.1、安装依赖npm install @vue/composition-api
3.2、main.js 中加入
import VueCompositionAPI from '@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似乎有所不同，考虑到对treeshaking的支持，不建议用commonJs了。
可参考：ts.xcatliu.com/basics/decl…
例如：
// common.js
export {
protocolLoaded
}
// common.d.ts
export function protocolLoaded(callback: Function): void
4.2、简单的小文件，改成.ts 按照报错提示修改。。。纯粹是练手，直接写 .d.ts 的声明文件也是可以的。
4.3、ts中，访问window下的属性，需要声明一下，比如需要访问window.Protocol, 则需要添加声明（为了全局使用，我写到global.d.ts中）：
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：已经用它开发一个小项目了，真心爽。
