-1

我正在生成一个新的反应应用程序 npx create-react-app front-end2 --template typescript ，但没有改变核心，我有这个错误：

类型'{孩子：元素；类名：字符串；}' 不可分配给类型 'DetailedHTMLProps, HTMLDivElement>'。

类型'{孩子：元素；类名：字符串；}' 不可分配给类型 '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 声明为全局
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'my-html-custom-tag': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}

package.json 依赖部分：


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

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

4

2 回答 2

1

我也在使用基于 typescript 构建的 React，起初我使用tslintlint 我的脚本和男孩，配置和修复 linting 问题并不是那么有趣。在尝试了这么多天并没有取得太大进展之后，我决定放弃tslint然后开始使用eslint，我就是喜欢eslint。

在对它们进行了很长时间的定制之后，我得出了一个理想的（当然也是稳定的）eslint配置。遵循这些步骤，你会更喜欢react typescript。

  1. 将此包添加到您的devDependencies并安装它们：
"@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",
  1. 这是eslintrc.js文件：
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']},
    },
  },
};
  1. 最后，这是我的tsconfig.json文件：
{
  "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"
  ]
}

而已。它将根据打字稿标准跟踪任何类型的 linting 问题（将是您在任何项目中的最佳伙伴）。到目前为止，我从未为任何模块创建声明文件。我希望它有助于解决您的 linting 错误。

于 2020-01-21T09:32:08.067 回答
0

第 1 步：“@types/typescript”：“^2.0.0”，删除这一行，

第二步：删除 node_modules 目录，

第三步：执行 cmd npm install && npm start

此过程可能对您有所帮助

于 2020-01-21T09:40:57.483 回答