如何在你的Vue项目中集成TypeScript

Posted 2021-04-25 AutoCFE

原文：

https://alexjoverm.github.io/2017/06/28/Integrate-TypeScript-in-your-Vue-project/#Ok-I-can-use-TypeScript…-so-now-what’s-next

决定去使用  TypeScript 。在这里,您将看到如何以一个平易近人和务实的方式去实现他。

在本文中,我们将假定您正在使用 SFC (Single File Components) 但即使你把它们分成多个文件，它也能正常工作。让我们开始。

集成 TypeScript

我们从 Vue CLI (https://github.com/vuejs-templates/webpack) 模板开始,  但是也会和神奇的 PWA (https://github.com/vuejs-templates/pwa) 一起工作。不要选择 ESLint 模式。

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,

    "allowJs": true

  }

}

上述配置最重要的部分是 allowSyntheticDefaultImports   因为 Vue 类型不使用 ES2015 中默认 exports 方式。你可以看到更多的信息在 VSCode docs ((https://code.visualstudio.com/docs/languages/javascript#_common-questions) 文档里。

设置  "module": "es2015"

2. 添加 ts-loader 和 webpack 调整

安装  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 里

...

entry: {

  app: './src/main.ts'

},

...

resolve: {

    extensions: ['.ts', '.js', '.vue', '.json'],

...

3. 配置  es-module: true

在  build/vue-loader.conf.js  中配置  es-module: true 会告知 vue-loader 使用 ES 替代  CJS (CommonJS) 。文档见 vue-loader docs (https://github.com/vuejs/vue-loader/blob/master/docs/en/options.md#esmodule)

module.exports = {

  loaders: utils.cssLoaders({

    sourceMap: isProduction

      ? config.build.productionSourceMap

      : config.dev.cssSourceMap,

    extract: isProduction

  }),

  esModule: true

}

4. 使用 TypeScript 

所以你必须做两件事： 

- 在 src 文件夹中将  .js 重命名为  .ts

- vue 文件中  script  标签添加  lang="ts"  , 比如在  App.vue 中修改：

<script>

export default {

  name: 'app'

}

</script>

排错

如果编译时  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 ，没有发现这种报错，但是以前见过。

TSLint, Prettier… Goddess!

我已经录制了2分钟的视频(https://egghead.io/lessons/typescript-use-prettier-with-tslint-without-conflicts-c39670eb)，告诉你如何在没有任何冲突的设置 tslint。去看看！

接下来呢

这时候，在使用内置和第三方类型之前, TypeScript 已经指出一些您可能没有注意到的错误，并通过使用类型推断让您获得更好的开发经验。TypeScript at Slack (https://slack.engineering/typescript-at-slack-a81307fa288d) 文章解释到。

不过，你必须使用接口，添加自己的类型、枚举、类和你所需要的任何东西。这样你会增加更多的覆盖，TypeScript 将使用适用于静态类型，确保类型安全

理想情况下，你在 tsconfig.json 中使用 TypeScript 2.3  strict  模式，因为它会给你带来更多的安全类型。 Marius Schulz 有一篇文章(https://blog.mariusschulz.com/2017/06/09/typescript-2-3-the-strict-compiler-option)对此做了解释。 TypeScript 2.3 版本严格的选项是一组4个选项，但在未来的版本中会加入更多的。

strictNullChecks

noImplicitAny

noImplicitThis

alwaysStrict

然而，如果你有一个庞大的代码库，使用严格模式会使你花费巨大的精力和时间来解决所有类型不足的问题。在这种情况下，一个好的解决方法是集成 TypeScript 。

结论

TypeScript 从最源头给你的代码带来了类型安全使代码具有可维护性，但你定义的类型越多，越容易发现bug和错误。Vue 2版本内置 typings ，所以我们可以利用它们。在 Vue 中使用 OOP（Object Oriented Programming）时会变得更强大。请关注另外一篇文章。

如果你喜欢，请分享它！如果有任何问题请在博客中提或者在 twitter中 @alexjoverm。

AutoHome

     车服务前端团队