快速掌握Vue.js 3.0之前的TypeScript上手实战指南

前言

我个人对更严格类型限制没有积极的看法，毕竟各类转类型的骚写法写习惯了。

然鹅最近的一个项目中，是 TypeScript+ Vue，毛计喇，学之...…真香！

1. 使用官方脚手架构建

  
  
  

npm install -g @vue/cli
   
   
   
# OR
   
   
   
yarn global add @vue/cli
  
  
  

新的 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，将会发现写法已大有不同

  
  
  

<template>
   
   
   
 <div class="hello">
   
   
   
 <h1>{{ msg }}</h1>
   
   
   
 <!-- 省略 -->
   
   
   
 </div>
   
   
   
</template>
   
   
   


   
   
   
<script lang="ts">
   
   
   
import { Component, Prop, Vue } from 'vue-property-decorator';
   
   
   


   
   
   
@Component
   
   
   
export default class HelloWorld extends Vue {
   
   
   
 @Prop() private msg!: string;
   
   
   
}
   
   
   
</script>
   
   
   


   
   
   
<!-- Add "scoped" attribute to limit CSS to this component only -->
   
   
   
<style scoped></style>
  
  
  

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

上一篇： 在TypeScript中理解null和undefined的区别

下一篇： 在TypeScript里，有两种方法创建泛型接口的简明解释