typescript vuex_vue3.0 beta+typescript初体验

Vue3.x 设计目标

• 更小更快 - Vue 3.0大小大概减少一半，只有10kB
• 加强TypeScript支持
• 加强API设计一致性 - 易读
• 提高自身可维护性
• 开放更多底层功能

vue3.x 采用Function-based API 形式组织代码，使其更容易压缩代码且压缩效率也更高，由于修改了组件的声明方式，以函数组合的形式完成逻辑，完美与typescript相结合。

注意：vue2.x中的组件是通过声明的方式传入一系列options的，所以在2.x下使用typeScript 需要装饰器的方式vue-class-component才行

// vue2.x 要想使用ts 需要这样处理,详见官方文档 https://cn.vuejs.org/v2/guide/typescript.html

二、typescript 有什么优点

1、增加代码的可读性与可维护性

• 大部分函数看类型定义就知道是干嘛的
• 静态类型检查，减少运行时错误

2、社区活跃，众多技术大佬

• 在vue3热潮下，之后typescript要成为主流

三、搭建vue3.x + typescript + vue-router 环境

• 全局安装vue-cli脚手架

npm install -g @vue/cli

• 初始化vue项目

vue create vue-next-project

输入命令后，需要选择Manually select features, 至少要把 babel typescript router 选上，(vuex 看自身情况是否需要)如下图：

• 升级为v3.x项目

cd vue-next-projectvue add vue-next

这个命令会自动帮你把vue2.x升级到vue3.x ，包括项目中对应的依赖进行升级与模板代码替换，像：vue-router vuex

完成以上三步主体环境算搭建完成，看刚才创建的目录里多了个tsconfig.json 配置文件，可以根据自身与项目需要，进行配置。

接下来需要简单处理一下，使其支持typescript形式。(模板cli还没完善typescript的模板代码)

• 将shims-vue.d.ts文件中的内容修改一下，这步操作应该会少了一些报错。

// declare module "*.vue" {//   import Vue from 'vue';//   export default Vue;// }declare module "*.vue" {    import {defineComponent} from 'vue'    const Component: ReturnType;    export default Component}

• 组件里使用需声明 script lang="ts" ,然后用defineComponent进行包裹,即可。

❤️ 最后

如果你觉得这篇内容对你有帮助，点个「关注/转发」，让更多的人也能看到这篇内容！