在React项目中导入.ts或.tsx文件

Question

寻找关于在我的React项目中导入.tsx或.ts文件的适当设置的建议。目前，我正在将.js文件转换为.tsx，并且只在导入时使用@ts-ignore，但我希望正确配置所有内容。有什么建议吗？

下面是我的ts-config文件：

  "compilerOptions": {
    "target": "es2016",
    "module": "esnext",
    "noImplicitAny": true,
    "esModuleInterop": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "strict": true,
    "jsx": "react-jsx",
    "allowJs": true,
    "checkJs": false,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": [
    "src"
  ]
}

Answer 1

• 如果这是一个新项目(或者您的第一次使用React和Typescript的组合)，那么我不会自己配置它，而是使用创建React应用程序的类型记录模板：npx create-react-app my-app --template typescript
• 如果这是您要添加类型记录的现有项目，那么我将查看向项目中添加类型记录上的正式文档
• 如果您正在搜索有关tsconfig的更多信息，请参见类型记录文档：什么是tsconfig.json？。此页面还包括您可以扩展的TSConfig Bases。
• 如果您正在寻找合理的默认来扩展您已经配置的应用程序，那么请考虑使用类型记录创建一个虚拟的creating，并比较您的配置文件。基本配置非常好。

额外好处：React TypeScript Cheatsheets可能也值得一查。它在Migrating (to Typescript)上有一个页面