Vue3.X集成TypeScript

---

前言

TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。

TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。这样会大大提升代码的可阅读性。

与此同时，TypeScript 也是 JavaScript ES6 的超集，Google 的 Angular 2.0 也宣布采用 TypeScript 进行开发。这更是充分说明了这是一门面向未来并且脚踏实地的语言。

强类型语言的优势在于静态类型检查，具体可以参见 http://www.zhihu.com/question… 的回答。概括来说主要包括以下几点：

静态类型检查
IDE 智能提示
代码重构
可读性
静态类型检查可以避免很多不必要的错误, 不用在调试的时候才发现问题

---

一、初始化项目

使用@vue/cli创建模版项目

yarn global add @vue/cli
vue init webpack my-app # or: vue init pwa my-app
vue add typescript

二、Vue引入TypeScript

1.安装插件

安装vue的官方插件
npm i vue-class-component vue-property-decorator --save
// ts-loader typescript 必须安装，其他的相信你以后也会装上的
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

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

首先我们先做一些简单的，后面我们会回到这里做 Typescript 的配置。代码如下（示例）：

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

在这里最重要的是 allowSyntheticDefaultImports 这个选项。自从 Vue types 不使用 ES2015 默认的 exports ，这个选项必须要被设置为 true 。

---

3.将ts-loader在webpack中配置

然后打开 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'],
...

4.添加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
}

5.在文件中使用 Typescript

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

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

<script lang="ts">
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
}