在Vue中使用TypeScript

TypeScript提供的类型注解在多人前端项目中，能显著提高开发效率、协作性和可维护性。

假定你已经使用 vue-cli 初始化了一个项目。

引入 TpyeScript 的相关依赖。

npm install typescript ts-loader --save-dev

添加项目的根目录下添加TypeScript配置文件 tsconfig.json。tsconfig.json 文件中指定了用来编译这个项目的根文件和编译选项。更多编译选项。

添加tsconfig.json

重命名 ./src/main.js 文件 为 ./src/main.ts，修改 webpack 入口文件为 ./src/main.ts，添加文件扩展.ts、.tsx。

修改webpack配置

在 webpack 的配置文件中添加 TypeScript 加载器 ts-loader，appendTsSuffixTo: [/\,vue$/] 选项用于提取 .vue单文件组件中的TS代码。

webpack配置

现在还需要在 src 目录下配置 Vue 的 vue-shims.d.ts 声明文件，ts-loader 才能知道Vue 是什么。

添加vue-shims.d.ts

添加辅助库vue-property-decorator

npm i -S vue-property-decorator

Vue Property Decorator提供了7个装饰器(@Emit、@Inject、@Model、@Prop、@Provide、@Watch、@Component)，实现像原生 JavaScript class 那样声明组件。别忘了在 <script>标签中添加 lang=ts。

class声明组件