Javascript Typescript不允许我编写html

我正在生成一个新的react应用程序

npx创建反应应用程序前端2——模板类型脚本

但在不改变核心的情况下，我有一个错误：

类型“{children:Element；className:string；}”不能分配给类型“DetailedHTMLProps，HtmlLevel>”

类型“{children:Element；className:string；}”不能分配给类型“HTMLAttributes”

属性“结果”的类型不兼容

类型“any[]”不能分配给类型“number”

对于我的返回中存在的每个html元素

我的默认app.tsx：

import React from 'react';
import './App.css';

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

我尝试了什么：

-npm install @types/typescript

-npm intall @types/react

-npm intall @prop-types

-delete and re-npm create-react-app...

-npm cache clean --force

• 我在app.tsx和react-app-env.d.ts中将jsx声明为全局

我只是不知道该怎么办。如果我能给你更多的信息，请告诉我，谢谢。

我也在使用基于typescript构建的React，起初我使用

tslint

来lint我的脚本，配置和修复lint问题并不是那么有趣。在尝试了这么多天，但没有取得多大进展后，我决定放弃

tslint

，然后开始使用

eslint

，我就是喜欢

eslint

在定制了很多时间之后，我找到了一个理想的（当然也是稳定的）

eslint

配置。遵循这些步骤，你会比任何事情都更喜欢react-typescript

将此软件包添加到您的devdependency并安装：

这是eslintrc.js文件：

最后，这是我的tsconfig.json文件：

就这样。它将根据typescript标准跟踪任何类型的linting问题（将是您在任何项目中的最佳搭档）。到目前为止，我从未为任何模块创建过声明文件。我希望它有助于修复您的linting错误。

步骤1:“@types/typescript”：“^2.0.0”，删除此行

步骤2：删除节点\模块目录

步骤3:exec cmd npm安装和npm启动

---

此过程可能对您有所帮助

您有以下版本的软件：

typescript

、

@types/react

和

react

？如果不在package.json中，那么package lock/thread.lock呢？您可以共享package.json文件吗？@PrakashT您需要整个package.json吗？我是新来的，我不知道我是否应该把它贴在问题上。有40行代码。是的。如果您发布完整的package.json文件，这可能会更好地理解。还告诉如何运行此代码？好的。您只能发布依赖项，脚本部分？

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'my-html-custom-tag': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.0",
    "@types/node": "^12.12.25",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.5",
    "@types/typescript": "^2.0.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0",
    "typescript": "^3.7.5"
  }

"@typescript-eslint/eslint-plugin": "^2.12.0",
"@typescript-eslint/parser": "^2.12.0",
"eslint": "^6.7.2",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.7.0",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-prettier": "^3.1.2",

const status = (process.env.NODE_ENV === 'production') ? 'error' : 'warn';

module.exports = {
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  plugins: ['@typescript-eslint', 'react-hooks', 'prettier'],
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'prettier',
    'airbnb',
    'airbnb/hooks',
  ],
  parserOptions: {
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
    ecmaFeatures: {
      jsx: true, // Allows for the parsing of JSX
    },
  },
  env: {
    browser: true,
    node: true,
  },
  rules: {
    // plugin overrides
    'node/no-unsupported-features/es-syntax': 'off',
    'jsx-a11y/img-redundant-alt': 'off',
    'react/jsx-first-prop-new-line': [status, 'multiline'],
    'react/no-unescaped-entities': 'off',
    'react/jsx-indent-props': [status, 2],
    'react/jsx-filename-extension': ['error', {extensions: ['.jsx', '.tsx']}],
    'react/jsx-max-props-per-line': [1, {'when': 'always'}],
    'react/jsx-props-no-spreading': 'off',
    'react/jsx-space-before-closing': [status, 'always'],
    'react/prop-types': 'off',
    'react-hooks/rules-of-hooks': 'error',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/prefer-interface': 'off',
    // custom eslint overrides
    'arrow-body-style': 'off',
    'camelcase': [
      0, {
        'properties': 'never',
      },
    ],
    'consistent-return': [0, 'never'],
    'import/extensions': [status, 'always', {
      'js': 'never',
      'jsx': 'never',
      'ts': 'never',
      'tsx': 'never',
    }],
    'import/no-named-default': 'off',
    'import/prefer-default-export': 'off',
    'indent': [
      status,
      2,
    ],
    'linebreak-style': ['error', 'unix'],
    'max-len': 'off',
    'no-console': status,
    'no-debugger': status,
    'no-unused-expressions': [status, {
      'allowShortCircuit': true,
      'allowTernary': true,
    }],
    'no-underscore-dangle': ['off', {'properties': 'never'}],
    'no-useless-escape': 'off',
    'object-curly-newline': 'off',
    'quotes': [
      status,
      'single',
    ],
    'semi': [
      status,
      'always',
    ],
  },
  settings: {
    react: {
      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
    },
    'import/resolver': {
      'node': {'extensions': ['.js', '.jsx', '.ts', '.tsx']},
    },
  },
};

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "./"
  },
  "include": [
    "src"
  ]
}