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

1、使用官方脚手架构建

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

只需运行 vue createmy-app。

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

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

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

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

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

接下来就跑项目啦。

总之，先跑起来再说。

2、项目目录解析

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

这里主要关注 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，将会发现写法已大有不同

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

3. Vue组件的 Ts写法

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

Vue.extend

vue-class-component

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

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

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

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

4.1 `vue-class-component`

我们回到 `src/components/HelloWorld.vue`

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

vue-property-decorator这个官方支持的库里，提供了函数 装饰器（修饰符）语法

1. 函数修饰符 `@`

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

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

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

直接运行，输出结果：

上面代码可以看出来:

只定义了两个函数： 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组件模版来看：

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

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

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

4.2 添加全局工具

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

npm iVueI18n

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

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

4.3 Axios 使用与封装

1. 新建文件 `request.ts`

文件目录:

2. request.ts文件解析

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

3. main.ts接口调用：

4、编写一个组件

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

然后在 Home.vue中使用:

这时候运行项目

这就是简单的父子组件

5、参考文章

TypeScript — JavaScript with superpowers — Part II

VUE WITH TYPESCRIPT

TypeScript + 大型项目实战

Python修饰符（一）—— 函数修饰符 “@”

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