【沉浸式学习】一起学习Typescript的第二天--10分钟让vue老项目支持JS与TS混用

这是我参与新手入门的第2篇文章。

双双碎碎念：是的，她她她又来了，俺也是没得办法。前天发完文章后就突然有很多想法，万一没人喜欢呢，万一被人嫌弃呢，是不是一个女孩子搞得太油腻了呢，也想到很多文章说要想坚持下去还是要做自己，可那种是不是自己的风格呢？就在刚刚还在犹豫今晚要不要继续发文章呢，可就是这么凑巧，刚刚收到了除了我本人以外的一个赞还有两个关注，哈哈哈哈，感谢“一尾流莺和前端打工人”！！！因为你们又元气满满啦~

好啦！在阅读本文十分钟内不许回复微信哦，不许东张西望看身边漂亮的小姐姐哦，每天和双双一起沉浸式学习十分钟叭~

安装Typescript,ts-loader

第一步呢，当然是老项目内安装Typescript和ts-loader啦

npm：
npm i typescript ts-loader -D

yarn
yarn add typescript ts-loader

修改 webpack 配置

因为我们这次是老项目内添加，所以直接在build/webpack.base.conf.js中做相关的修改即可，如果是vue-cli3是把webpack的配置全部隐藏起来了，只能通过在项目根目录下建立vue.config.js来修改配置的。关键代码如下：

// build/webpack.base.conf.js
module.exports = {
  /** 其他与本次改动无关的配置 */
  resolve: {
    /** other code */
    extensions: ['.js', '.vue', '.json', '.ts'], // 添加 .ts 扩展名
  },
   module: {
    rules: [
      /** other code */
      {
        test: /\.tsx?$/,
        use: [
          { loader: 'babel-loader' },
          { 
            loader: 'ts-loader', 
            exclude: /node_modules/, 
            options: {
              transpileOnly: true,
              appendTsSuffixTo: [
                '\\.vue$'
              ],
              happyPackMode: false
            }
          }
        ]
      }
    ]
  }
}

开始配置tsconfig.json

ts的编译需要读取tsconfig.json文件，所以呢咱们在根目录下创建tsconfig.json文件。

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.js",  //src为本地开发目录
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
}

进行到这一步，如果你只是想简单的在项目中混用ts的话(比如在.js、.vue中引入.ts)，配置就算是全部完成了，你可以新建一个 .ts 文件，然后再入口文件中导入开发测试啦。

需要支持在ts文件中导入.vue文件

默认情况下，typescript是无法识别 .vue 文件，当你需要在ts导入vue的单文件组件时(比如路由配置)，编辑器会报错：找不到模块。为了让ts能将 .vue 当成模块识别，需要在项目中创建shims-vue.d.ts文件，这样ts就会把 .vue 文件当成模块来解析啦。

// shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

注意哦：这里加入文件后如果编译器下载eslint插件就会报错了哦，提示您import需要使用import type，而export不能在这里使用。这个时候呢只需要在.eslintignore文件内加入忽略shims-vue.d.ts就好啦！！

可以删除jsconfig.json

如果你使用了vscode作为开发工具，并且也配置了jsconfig.json文件。那么在引入ts之后，你完全可以删除这个文件，然后将tsconfig.json中的compilerOptions.allowJs设置为true即可。code.visualstudio.com/docs/langua…

问题解答：

shims-vue.d.ts文件内eslint检测import和export报错，怎么办？
解答：只需要在.eslintignore文件内加入忽略shims-vue.d.ts就好啦！
问题在公司电脑上，明早补上哦！！！