对于不使用 typescript 的纯 javascript 项目来说，starter tsconfig.json 是最宽松/宽松的？

Question

我很难找到一个最不严格/最宽松/宽松选项的示例/入门 tsconfig.json 文件。我有一个大型的 javascript 项目，我真的对修复大量打字稿错误不感兴趣，但是，我想允许我的同事编写打字稿，如果他们愿意的话。

我们正在使用 create-react-app，因此我可以使用此TSC_COMPILE_ON_ERROR标志来使其打字稿错误不会影响正常使用。（“当设置为 true 时，即使存在 TypeScript 类型检查错误，您也可以运行并正确构建 TypeScript 项目。这些错误将作为警告打印在终端和/或浏览器控制台中。”）

到目前为止我所知道的是我希望allowJs: true打字稿在 .js/.jsx 文件上运行。

所以我想启用打字稿，但我想从最少数量的打字稿错误+警告开始。随着我们的发展，我们可以解决我们看到的这些问题，并逐渐启用更严格的选择。

---

更新：发现一个类似的问题，不完全相同，但有些人可能认为它是重复的：TypeScript - possible to disable typechecking?

我尝试使用这个 tsconfig.json 文件...这是我几个月前的旧文件，进行了一些修改：

{
  "compilerOptions": {
    "target": "es5", // cra default
    "lib": [
      "es6", // old cra default?
      "dom", // cra default
      "dom.iterable", // cra default
      "esnext" // cra default
    ],
    "allowJs": true, // cra default
    "skipLibCheck": true, // cra default
    "esModuleInterop": true, // cra default
    "allowSyntheticDefaultImports": true, // cra default
    "strict": false, // cra default
    "forceConsistentCasingInFileNames": true, // cra default
    "module": "esnext", // cra default
    "moduleResolution": "node", // cra default
    "resolveJsonModule": true, // cra default
    "isolatedModules": true, // cra default
    "noEmit": true, // cra default
    "jsx": "react", // cra default

    "sourceMap": true, // old cra default?
    "checkJs": true,
    "noImplicitReturns": false, // old tsconfig was set to true
    "noImplicitThis": true,
    "noImplicitAny": false, // old tsconfig was set to true
    "strictNullChecks": false, // old tsconfig was set to true
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "types": ["jest"],

    "disableSizeLimit": true,
    "downlevelIteration": true,
    "allowUmdGlobalAccess": true,
    "allowUnreachableCode": true,
    "allowUnusedLabels": true,
    "alwaysStrict": false, // default
    "newLine": "lf"
  },
  "awesomeTypescriptLoaderOptions": {
    "useBabel": true,
    "babelCore": "@babel/core"
  },
  "include": ["src"], // cra default
  "exclude": ["node_modules"] // from old tsconfig
}

我陷入了这样的错误：

Property 'languageSettingString' does not exist on type 'Window & typeof globalThis'.  TS2339

    1602 |         action.data.data.account.locale !== state.locale
    1603 |       ) {
  > 1604 |         window.languageSettingString = action.data.data.account.locale
         |                ^
    1605 |         return {
    1606 |           ...state,
    1607 |           locale: action.data.data.account.locale,

在我调用 redux 操作/属性之类的地方this.props.setTaskValue，我遇到了这个错误...这显然位于 reduxconnect调用的同一个文件中。

Property 'setTaskValue' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.ts(2339)

Answer 1

这是我的tsconfig.strictest.json：

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,

    "importsNotUsedAsValues": "error",
    "forceConsistentCasingInFileNames": true,

    /* Backwards compat flags */
    "noStrictGenericChecks": false,
    "suppressExcessPropertyErrors": false,
    "suppressImplicitAnyIndexErrors": false,

    /* Type Checking */
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "allowUnusedLabels": false,
    "allowUnreachableCode": false
  }
}

您可以翻转所有这些来创建“最宽松”的配置。

我鼓励使用它来开始：

{
  "compileOnSave": true,
  // You could toggle this between "strictest" and "loosest"
  // "extends": "./tsconfig.loosest.json",
  "compilerOptions": {
    "incremental": true,
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

除此之外，一个非常理想的选择是使用快照跟踪每个文件的打字稿错误状态。预提交挂钩可以：

1. 跑步yarn tsc --pretty --noEmit
2. 分解每个文件的错误
3. 将错误存储在其旁边Foo.tsx.terrs（“类型错误”）