tsx 文件（TypeScript JSX）：调试？答案

【问题标题】：tsx-Files (TypeScript JSX): Debugging?tsx 文件（TypeScript JSX）：调试？
【发布时间】：2019-06-12 15:03:59
【问题描述】：

如果我在 React 中使用 tsx 文件（TypeScript JSX），有两种转换：

打字稿
JSX

我想不可能一步一步调试这个，因为 JS 解释器不知道我的 tsx 文件中的哪些行被执行。但这只是一个猜测。到目前为止，我只是在阅读有关 tsx 的信息。

是否可以调试此 JavaScript 代码并在我的 (tsx) 代码中查看此调试过程？

背景：我想学习 React。到现在，我开发 Python 已经 20 年了。我知道一些 JavaScript 和 jquery。

（如果您有关于如何开发和调试 tsx 的提示，请发表评论）

【问题讨论】：

这取决于您的设置。 typescript 和 babel（通常用于 react 转换）都支持源映射。如果您使用 react 命令行工具创建应用程序，它应该具有对源映射的内置支持，并且应该允许逐步调试。
@TitianCernicova-Dragomir 如果您将您的评论写为答案，那么我可以投票并接受它。也许一些如何设置的细节会很好。文档链接对我来说已经足够了。谢谢。
我把它作为评论，因为我不知道这在反应中是如何工作的。我只能说用github.com/facebook/create-react-app 创建你的应用程序，它应该“正常工作” “如果没有，我真的一点头绪都没有。或者，如果您已经设置了一个应用程序，我不会冒险回答如何在 babel 中使用 tsx 启用源映射

标签： javascript reactjs typescript jsx

【解决方案1】：

是的，是的。很多人犯的一个大错误（我自己对此感到内疚）是在他们的tsconfig.json 文件中没有使用严格、alwaysStrict 和 strictNullChecks。为什么？严格的 Null 检查 + alwaysStrict 极大地增强了 typescript 智能感知的实用性。没有这些标志，它就不会发现细微的错误，这些错误可能会滚雪球成非常不受欢迎的东西

您可以在 tsconfig 中设置的另一个标志是 jsx 选项

将标志设置为"jsx": "preserve"

为什么？

这会强制 tsx 在编译成 js 之前先编译成 jsx。这有效地创建了一个额外的编译层，一个激活的短暂复合体，就像化学中的逐步反应

我在最近的 nextjs 项目中使用的 tsconfig.json 文件的内容

{
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "lib": ["ESNext", "DOM", "DOM.Iterable"],
        "declaration": true,
        "strict": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "alwaysStrict": true,
        "moduleResolution": "node",
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "jsx": "preserve",
        "downlevelIteration": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "inlineSourceMap": true,
        "inlineSources": true,
        "experimentalDecorators": true,
        "strictPropertyInitialization": false,
        "baseUrl": ".",
        "allowJs": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "paths": {
            "@/components/*": ["components/*"],
            "@/config/*": ["config/*"],
            "@/graphql/*": ["graphql/*"],
            "@/lib/*": ["lib/*"],
            "@/pages/*": ["pages/*"],
            "@/scripts/*": ["scripts/*"],
            "@/styles/*": ["styles/*"],
            "@/test/*": ["test/*"],
            "@/types/*": ["types/*"]
        }
    },
    "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
    "exclude": ["node_modules", ".next", "out"]
}

【讨论】：