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两个文件
两句话概括：
此时我们打开亲切的 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的同学应该会发现似曾相识：
1. 函数修饰符 @
“@”，与其说是修饰函数倒不如说是引用、调用它修饰的函数。
或者用句大白话描述： @: "下面的被我包围了。"
举个栗子，下面的一段代码，里面两个函数，没有被调用，也会有输出结果：
直接运行，输出结果：
上面代码可以看出来:
但是，解释器读到函数修饰符“@”的时候，后面步骤会是这样：
1、去调用 test函数， test函数的入口参数就是那个叫“ func”的函数；
2、test函数被执行，入口参数的（也就是 func函数）会被调用（执行）；
换言之，修饰符带的那个函数的入口参数，就是下面的那个整个的函数。有点儿类似 JavaScript里面的 functiona(function(){...});
2. vue-property-decorator和 vuex-class提供的装饰器
vue-property-decorator的装饰器：
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到底有什么区别
客服电话
APP下载
官方微信
请发表评论