我已经四处寻找解决这个问题的办法了。他们都建议在你的tsconfig中添加"jsx": "react"。json文件。我已经做到了。另一个是添加“include:[]”，我也这样做过。然而，当我试图编辑.tsxfiles时，我仍然得到错误。下面是我的tsconfig文件。
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"allowJs": true,
"checkJs": false,
"jsx": "react",
"outDir": "./build",
"rootDir": "./lib",
"removeComments": true,
"noEmit": true,
"pretty": true,
"skipLibCheck": true,
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true
},
"include": [
"./lib/**/*"
],
"exclude": [
"node_modules"
]
}
任何建议都会很有帮助。我使用babel 7编译所有的代码与env, react和typescript预设。如果你们需要更多的文件来帮助调试，请告诉我。
这个答案是关于VS Code和这个特定的错误在该IDE中持续存在。(有人可能会觉得这很有用)
如果你正在使用Webpack或其他类似的工具，即使你的tsconfig已经将jsx的编译器选项设置为React，你仍然可能会得到这个错误。
有一个解决方案。问题是VS Code已经内置了自动检测tsc。
为了消除编辑器中的错误，你可以把这个放在你的用户设置中:
{
"typescript.tsc.autoDetect": "off"
}
请注意，您将不再得到tsc自动检测，但如果您主要使用Webpack等工具或自己处理带有标记的命令，那么这并不是什么大问题。
注意:只有当错误在VS Code中持续存在时才这样做。要确保这种行为持续存在，在配置tsconfig之后重新加载窗口并重新启动编辑器。json文件。
这个链接有助于解决这个问题:
https://staxmanade.com/2015/08/playing-with-typescript-and-jsx/
参考章节:
修复错误TS17004:除非提供了'——JSX '标志，否则不能使用JSX。
下一个错误对我来说是新的，但它有一定的意义，所以我将——jsx标志添加到tsc，并尝试tsc——jsx helloWorld。tsx，但看起来我错过了一个参数——jsx。
tsc—jsx helloWorld.tsx
'——jsx'的参数必须是'preserve'或'react'。
在当前的TypeScript 1.6迭代中，——jsx似乎有两个选项，分别是preserve或react。
Preserve将在输出中保留JSX。我认为这是为了让您可以使用JSX之类的工具来实际提供翻译。
react将删除jsx语法，并将其转换为纯javascript，因此在TSX文件中将成为react。createElement (" div ", null)。
通过传递react选项，这里是我们结束的地方:
tsc—jsx react helloWorld.tsx
tsx(11,14):错误TS2607: JSX元素类不支持属性，因为它没有“props”属性
helloWorld.tsx(11,44):错误TS2304:无法找到名称“mountNode”。
接下来我将处理最后一个错误，因为最初我不理解上面的JSX错误。
在我的例子中，问题是VSCode生成了一个空的tsconfig。Json文件，当然，它什么也没做。
我把这个添加到tsconfig。json from Typescript的React Page:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react"
}
}
.．.然后点击保存，VSCode从那里取出它。
编辑:
自从我最初发布这个答案以来，通用的tsconfig文件已经变得更广泛地可用。如果你想了解这些选项，我已经发布了一个更详细的版本作为主旨。
我必须把我的整个应用程序添加到include中。
我的tsconfig。Json是这样的:
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "es6",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",
"incremental": true,
"jsx": "react",
"allowJs": true
},
"include": ["./"]
}
下面是我在运行纱线启动后得到的错误:
> multi-step-form-typescript@0.1.0 start /home/ehsan/Documents/GitHub/multi-step-form-typescript
> react-scripts start
/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
appTsConfig.compilerOptions[option] = value;
^
TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
at verifyTypeScriptSetup (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
at Object.<anonymous> (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/start.js:31:1)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! multi-step-form-typescript@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the multi-step-form-typescript@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ehsan/.npm/_logs/2020-11-22T18_20_20_546Z-debug.log
你需要做什么来摆脱这个
在终端上单击错误链接
/home/ehsan/Documents/GitHub/multi-step-form-typescript / node_modules / react-scripts /脚本/跑龙套/ verifyTypeScriptSetup.js: 239
appTsConfig.compilerOptions[option] = value;
然后把239行改成
否则(parsedcoleroptions [option] !== valuetoche&& option !== jsx)
现在，在将goto更改为tsconfig.json之后
然后将“jsx”:“react-jsx”替换为“jsx”:“react”
现在用sudo yarn start运行您的项目
这是我的工作，希望这对你也有用:)
每次我运行npm start时，它都会覆盖我在{jsx:…}使用React - JSX，以便与React 17中的JSX转换兼容。
The following changes are being made to your tsconfig.json file:
- compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)
问题是VSCode使用了旧版本的typescript(4.0.3)，而项目附带的typescript版本是(4.1.2)。
下面的方法对我很有效:
转到命令面板CTRL+Shift+P(或Mac上⌘+Shift+P)。
选择“TypeScript: Select a TypeScript Version…”
选择“使用工作区版本”。
PS:这个选项不会显示，除非你在任何。tsx文件(谢谢@awran5的评论和很好的捕捉)
我的经验
我正在转换现有的新创建的NextJS应用程序使用TS遵循官方的下一步指南，当我到达页面/_app。需要修改TSX。
我按照VSCode提示添加——jsx标志，这将添加以下行到next.config.js文件:
module.exports = {
reactStrictMode: all,
};
这导致了另一个错误:
Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
ReferenceError: all is not defined
在删除next.config.js文件中的行并重新启动VSCode并重新运行yarn dev或npm运行dev，瞧!它开始工作了!
