在vue-admin-element中植入TypeScript

1. 安装ts

npm install --save-dev typescript
npm install --save-dev ts-loader

2. 在根目录建tsconfig.json文件

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "node",
      "jest",
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.js",
    "tests/**/*.ts",
    "tests/**/*.tsx",
  ],
  "exclude": [
    "node_modules"
  ]
}

3. 在package-lock.json文件中的dependencies里添加以下代码

"@vue/cli-plugin-typescript": {
      "version": "3.11.0",
      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-3.11.0.tgz",
      "integrity": "sha512-oL0ctNVvbD7gZr3DDv6gxxWjw0lUrh4sGMk7InCakEooo/790DqZRX6lx9stXEv/+zELkgddcY3hjNEopbJg+w==",
      "dev": true,
      "requires": {
        "@types/webpack-env": "^1.13.9",
        "@vue/cli-shared-utils": "^3.11.0",
        "fork-ts-checker-webpack-plugin": "^0.5.2",
        "globby": "^9.2.0",
        "ts-loader": "^6.2.0",
        "tslint": "^5.15.0",
        "webpack": "^4.0.0",
        "yorkie": "^2.0.0"
      }
    },
    "ts-loader": {
      "version": "6.2.0",
      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-6.2.0.tgz",
      "integrity": "sha512-XYsjfnRQCBum9AMRZpk2rTYSVpdZBpZK+kDh0TeT3kxmQNBDVIeUjdPjY5RZry4eIAb8XHc4gYSUiUWPYvzSRw==",
      "dev": true,
      "requires": {
        "chalk": "^2.3.0",
        "enhanced-resolve": "^4.0.0",
        "loader-utils": "^1.0.2",
        "micromatch": "^3.1.4",
        "semver": "^5.0.1"
      }
    },

4. 在package.json文件中的devDependencies里添加以下代码

    "@vue/cli-plugin-typescript": "^3.11.0",
    "@vue/eslint-config-typescript": "^4.0.0",

5. 覆盖jest.config.js文件

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue',
    'ts',
    'tsx'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.tsx?$': 'ts-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  collectCoverage: true,
  collectCoverageFrom: [
    'src/utils/**/*.{ts,vue}',
    '!src/utils/auth.ts',
    '!src/utils/request.ts',
    'src/components/**/*.{ts,vue}'
  ],
  coverageDirectory: '<rootDir>/tests/unit/coverage',
  coverageReporters: [
    'lcov',
    'text-summary'
  ],
  testURL: 'http://localhost/',
  globals: {
    'ts-jest': {
      babelConfig: true
    }
  }
}

6. 修改.eslintrc.js文件(添加对ts文件语法支持)

  extends: ['plugin:vue/recommended', 'eslint:recommended', '@vue/standard','@vue/typescript'],

7. 在src目录下新建shims-vue.d.ts文件代码如下

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

8. 改造vue文件(因为 TypeScript 默认只识别 .ts 文件，不识别 .vue 文件)

// <script>标签添加lang="ts"声明
<script lang="ts">

9. 最后修改根目录下的main.js的文件后缀为main.ts

现在就可以在vue-admin-element项目中使用ts文件了

注：

1. 在ts文件中引入vue文件时必须加上**.vue**后缀
2. 如果运行时报错，那么请重新安装依赖，执行如下命令

npm install

或者使用yarn

yarn