【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

1、使用官方脚手架构建

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目。

只需运行 vue createmy-app

然后,命令行会要求选择预设。使用箭头键选择 Manuallyselectfeatures

接下来,只需确保选择了 TypeScript和 Babel选项,如下图:

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

完成此操作后,它会询问你是否要使用 class-style component syntax

然后配置其余设置,使其看起来如下图所示。

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

Vue CLI工具现在将安装所有依赖项并设置项目。

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

接下来就跑项目啦。

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

总之,先跑起来再说。

2、项目目录解析

通过 tree指令查看目录结构后可发现其结构和正常构建的大有不同。

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

这里主要关注 shims-tsx.d.ts和 shims-vue.d.ts两个文件

两句话概括:

  • shims-tsx.d.ts,允许你以 .tsx结尾的文件,在 Vue项目中编写 jsx代码

  • shims-vue.d.ts 主要用于 TypeScript 识别 .vue 文件, Ts默认并不支持导入 vue 文件,这个文件告诉 ts导入 .vue 文件都按 VueConstructor<Vue>处理。

此时我们打开亲切的 src/components/HelloWorld.vue,将会发现写法已大有不同

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

至此,准备开启新的篇章 TypeScript极速入门 和 vue-property-decorator

3. Vue组件的 Ts写法

从 vue2.5 之后,vue 对 ts 有更好的支持。根据官方文档,vue 结合 typescript ,有两种书写方式

Vue.extend

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

vue-class-component

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

理想情况下, Vue.extend 的书写方式,是学习成本最低的。在现有写法的基础上,几乎 0 成本的迁移。

但是 Vue.extend模式,需要与 mixins 结合使用。在 mixin 中定义的方法,不会被 typescript 识别到

,这就意味着会出现丢失代码提示、类型检查、编译报错等问题。

菜鸟才做选择,大佬都挑最好的。直接讲第二种吧:

4.1 vue-class-component

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

我们回到 src/components/HelloWorld.vue

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

有写过 python的同学应该会发现似曾相识:

  • vue-property-decorator这个官方支持的库里,提供了函数 装饰器(修饰符)语法

1. 函数修饰符 @

“@”,与其说是修饰函数倒不如说是引用、调用它修饰的函数。

或者用句大白话描述: @: "下面的被我包围了。"

举个栗子,下面的一段代码,里面两个函数,没有被调用,也会有输出结果:

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

直接运行,输出结果:

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

上面代码可以看出来:

  • 只定义了两个函数: test和 func,没有调用它们。

  • 如果没有“@test”,运行应该是没有任何输出的。

但是,解释器读到函数修饰符“@”的时候,后面步骤会是这样:

1、去调用 test函数, test函数的入口参数就是那个叫“ func”的函数;

2、test函数被执行,入口参数的(也就是 func函数)会被调用(执行);

换言之,修饰符带的那个函数的入口参数,就是下面的那个整个的函数。有点儿类似 JavaScript里面的 functiona(function(){...}); 

2. vue-property-decorator和 vuex-class提供的装饰器

vue-property-decorator的装饰器:

  • @Prop

  • @PropSync

  • @Provide

  • @Model

  • @Watch

  • @Inject

  • @Provide

  • @Emit

  • @Component (provided by vue-class-component)

  • Mixins (the helper function named mixins provided by vue-class-component)

vuex-class的装饰器:

  • @State

  • @Getter

  • @Action

  • @Mutation

我们拿原始Vue组件模版来看:

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

以上模版替换成修饰符写法则是:

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

正如你所看到的,我们在生命周期 列表那都添加 privateXXXX方法,因为这不应该公开给其他组件。

而不对 method做私有约束的原因是,可能会用到 @Emit来向父组件传递信息。

4.2 添加全局工具

引入全局模块,需要改 main.ts:

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

npm iVueI18n

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

但仅仅这样,还不够。你需要动 src/vue-shim.d.ts

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

之后使用 this.$i18n()的话就不会报错了。

4.3 Axios 使用与封装

1. 新建文件 request.ts

文件目录:

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

2. request.ts文件解析

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

为了方便,我们还需要定义一套固定的 axios 返回的格式,新建 ajax.ts

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

3. main.ts接口调用:

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

4、编写一个组件

为了减少时间,我们来替换掉 src/components/HelloWorld.vue,做一个博客帖子组件:

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

然后在 Home.vue中使用:

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

这时候运行项目

【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

这就是简单的父子组件

5、参考文章

TypeScript — JavaScript with superpowers — Part II

VUE WITH TYPESCRIPT

TypeScript + 大型项目实战

Python修饰符 (一)—— 函数修饰符 “@”

Typescript 中的 interface 和 type到底有什么区别

上一篇:理解 OpenStack 高可用(HA)(5):RabbitMQ HA


下一篇:(转)如何阅读OpenStack源码