我已经四处寻找解决这个问题的办法了。他们都建议在你的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预设。如果你们需要更多的文件来帮助调试,请告诉我。


当前回答

下面是我在运行纱线启动后得到的错误:

> 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运行您的项目

这是我的工作,希望这对你也有用:)

其他回答

我的经验

我正在转换现有的新创建的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,瞧!它开始工作了!

每次我运行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的评论和很好的捕捉)

我必须把我的整个应用程序添加到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": ["./"]
}

Create-react-app打破了常规。截至2022年5月

在tsconfig中,include只被设置为/src,更改为:

  "include": [
    "./src/**/*.ts"
  ]

在我的例子中,问题是VSCode生成了一个空的tsconfig。Json文件,当然,它什么也没做。

我把这个添加到tsconfig。json from Typescript的React Page:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}

...然后点击保存,VSCode从那里取出它。

编辑: 自从我最初发布这个答案以来,通用的tsconfig文件已经变得更广泛地可用。如果你想了解这些选项,我已经发布了一个更详细的版本作为主旨。