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
函数)会被调用(执行);
换言之,修饰符带的那个函数的入口参数,就是下面的那个整个的函数。有点儿类似 JavaScrip
t里面的 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 namedmixins
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到底有什么区别