tsx (TypeScript JSX)：调试？

Question

如果我在React中使用tsx文件(TypeScript JSX)，有两个转换：

1. TypeScript
2. JSX

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

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

背景:我想学习反应。到目前为止，我开发Python已经20年了。我知道一些JavaScript和jquery。

(如果您对如何开发和调试tsx有提示，请留下评论)

Answer 1

是的，是的。许多人犯的一个很大的错误(我自己也犯了这个错误)就是在他们的alwaysStrict文件中没有使用严格的tsconfig.json和strictNullChecks。为什么？严格的空检查+ alwaysStrict大大提高了类型记录intellisense的有用性。如果没有这些标志，它就不会发现一些细微的错误，这些错误可能会使雪球变成非常不受欢迎的东西。

在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"]
}