初学者使用Typescript踩过的坑：配置、ESlint、polyfill指南

2023-12-01 16:08:43

学习TypeScript作为前端开发的新手，我曾遇到许多问题，这些问题通常与配置TypeScript、ESLint和polyfill的使用有关。通过不断探索和向经验丰富的开发人员学习，我发现了这些问题的解决方案。在此，我想分享这些经验，帮助初学者避免这些坑。

TypeScript配置

使用Typescript时，我们需要安装好Typescript，对于Web项目，需要在package.json文件里配置好：

{
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "typescript": "^4.7.4"
  }
}

Typescript需要配置好tsconfig.json文件，这个文件可以写在项目根目录下，一般我们都会在package.json同级目录下建立这个文件，文件内容如下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

ESLint配置

ESLint是一个JavaScript代码检查工具，可以帮助我们检查代码的质量，避免一些常见的错误。我们可以在项目根目录下安装ESLint。

{
  "devDependencies": {
    "eslint": "^8.17.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-typescript": "^5.22.0"
  }
}

配置package.json后，我们还需要在项目根目录下新建一个.eslintrc.json文件，文件内容如下：

{
  "extends": [
    "plugin:import/errors",
    "plugin:import/typescript",
    "plugin:import/warnings",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "@typescript-eslint/no-unused-vars": ["error", { "args": "after-used", "argsIgnorePattern": "^_" }],
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "@typescript-eslint/prefer-interface": "off",
    "@typescript-eslint/no-use-before-define": "off"
  }
}

使用Polyfill

Polyfill是一种库，它可以帮助我们向后兼容一些新的特性，比如ES6的语法。在Typescript项目中，我们需要先安装polyfill。

{
  "dependencies": {
    "core-js": "^3.23.2",
    "regenerator-runtime": "^0.14.2"
  }
}

在index.html中，我们需要引入polyfill。

<script src="core-js/client/shim.min.js"></script>
<script src="regenerator-runtime/runtime.js"></script>

常见问题

在配置Typescript、ESLint和polyfill的过程中，可能会遇到一些常见问题：

ESLint报错，找不到tsconfig.json文件 。解决方法：确保tsconfig.json文件存在于项目根目录，并且在.eslintrc.json文件中正确配置了"project"选项。
构建Typescript代码时报错，找不到polyfill 。解决方法：确保在index.html文件中正确引入了polyfill。
使用了Typescript的新特性，但浏览器无法兼容 。解决方法：使用polyfill来支持这些新特性。
Typescript代码中出现了类型错误 。解决方法：使用ESLint来检查代码的质量，并修复类型错误。