在你的Vue项目中集成Typescript

本文译自 Integrate TypeScript in your Vue project，如有侵权请联系[email protected]

你有一个 Vue 项目并且你听说 TypeScript 对项目会有很大的帮助。然后你决定开始使用Typescript。那么这将会是一个能够简单快速完成这一点（在Vue项目中集成Typescript）的教程。

在这篇文章中我们假设你已经在使用SFC（Single File Components，单文件组件），但是就算你把他们拆分到多个文件中这依然会起作用。所以...我们开始吧！

集成 Typescript

我们会从 Vue CLI Webpack 模版开始，如果你使用的是非常棒的
PWA 模版，同样可以参照本文在项目中添加 Typescript 支持。以下是使用 Vue CLI 初始化项目的指令，当问到是否使用 ESlint 时，请选择 no：

vue init webpack my-app # or: vue init pwa my-app
cd my-app

然后我们需要做4件事：

1. 在根目录下创建一个 tsconfig.json 文件

首先我们先做一些简单的，后面我们会回到这里做 Typescript 的配置。

{
  "compilerOptions": {
    "lib": ["dom", "es5", "es2015"],
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  }
}

在这里最重要的是 allowSyntheticDefaultImports 这个选项。自从 Vue types 不使用 ES2015 默认的 exports ，这个选项必须要被设置为 true 。可以在 VSCode 文档中查看更多的信息。

选项"module": "es2015"将会通过编译代码为ESM (EcmaScript Modules) 的方式使代码变得 tree-shakeable 。

译者注：tree-shakeable 不知道怎么翻译比较好，大致上就是将代码输出为 ES2015 的模块，使得编译器在编译时能将代码做 tree-shaking ， tree-shaking 简单的来说就是将在实际运行过程中不运行的代码直接在编译的时候移除，即 DCE, dead code elimination，常用的编译工具中 rollup.js 和 webpack 2 / 3 都支持该项技术，有兴趣的可以查看 rollup.js 作者关于 tree-shaking 的文章

2. 添加 ts-loader 并开启 webpack 中的选项

使用npm安装 typescript 和 ts-loader：

npm i -D typescript ts-loader

然后打开 build/webpack.base.conf.js，并且在 module.rules 的开头（ vue-loader 的前面）输入以下代码：

module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
    ...

在这里，重命名入口文件的扩展名为 .ts 并且在 extensions 中添加 .ts 的选项

...
entry: {
  app: './src/main.ts'
},
...
resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
...

3. 添加 es-module: true 至 build/vue-loader.conf.js

这样会使得 vue-loader 使用 ES 模块而不是 CJS (CommonJS) 模块，就像 vue-loader docs 中形容的那样。

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  esModule: true
}

4. 在文件中使用 Typescript

在这里你必须要做2件事情：

• 将src文件夹下扩展名为.js的文件的扩展名改为.ts
• 在Vue文件的script标签中使用lang="ts"。比如在App.vue中：

问题解析

如果你的编辑器在main.js中的import App from './App'抛出没有找到App module的错误，在项目中新建一个vue-shim.d.ts文件并且添加以下内容到文件中即可解决：

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

我使用VSCode 1.13.1，并没有看到这个问题，而且之前也没有（译者使用的是VSCode 1.14.1，还是遇到了...可能是原作者使用了其他类型声明的包）

TSLint, Prettier... 我的天！

我曾经 在 Egghead 上录了两分钟的视频 去解释如何无冲突的使用 TSLint 和 Prettier. 快去看吧！

译者注：这波软广还是可以的，Prettier 是一个代码格式化的工具，现在很多大厂都在使用，有兴趣的同学可以去尝试一下，详情戳 Prettier 的 GitHub

OK，我现在可以使用 Typescript 了...那然后呢？

做到这里，Typescript 通过使用内建的和第三方的类型已经可以指出你的代码里的一些你之前没有意识到的问题了，并且通过 type 界面能够给你一些更好的开发体验。就像 Slack 之前在 TypeScript at Slack 中解释为什么要把他们的代码库迁移到 Typescript 中说到的那样。

当然，你肯定还是需要添加你自己的类型通过UI（指UI上需要用到的数据类型）、类型、枚举、类或者其他你需要用到类型的方式。这会让你添加更多的 Typescript 中用于静态类型检查的类型，从而保证类型的安全。

理想情况下，你最好在你的 tsconfig.json 中使用 Typescript 2.3 中的 strict 编译选项，这将会带来最好的类型安全。Marius Schulz 曾经写过 一篇很棒的文章来解释这个问题。在 Typescript 2.3 中，strict 模式是四个选项的一个组合，但是在未来可能会出现更多选项：

• strictNullChecks
• noImplicitAny
• noImplicitThis
• alwaysStrict

显然，如果你有一个中大型的代码库，使用 strict 模式将会消耗你大量的时间去解决类型缺乏的问题。

在这种情况下，一个比较好的方法是先开启一些比较容易修复的 Typescript 选项，如何当你在代码库中添加到一定类型覆盖率的类型时，尝试单独开启一些上面提到的选项，直到你觉得能开启 strict 选项。这样你就可以比较简单的达到你的目的了。

结尾

Typescript 从最开始就给你的代码库带来了安全的类型，但是你定义的类型越多，你定位 bug 和查找错误的过程就会越容易，并且这能够让你的代码变得更加可靠。Vue 自从升级到2之后就添加了 typings 的支持，所以我们能够更加容易的使用它们。这会让OOP (Object Oriented Programming，即面向对象编程) 在 Vue 中发挥更大的作用，我会在其他的文章中说到。