Question

我正在学习 TypeScript，并且正在尝试将 TypeScript 添加到我的宠物项目中。在 ReactDOM.render 函数调用中，我收到此错误：

<块引用>

没有与此调用匹配的过载。最后一次重载给出了以下内容错误。

“BrowserRouter”类型的参数不可分配给“ReactElement ReactElement |空) | (new (props: any) => Component)>[]'.

类型 'BrowserRouter' 缺少类型 'ReactElement ReactElement |空) | (new (props: any) => Component)>[]': length、pop、push、concat 等 26 个。

代码如下：

import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';

import App from "./App";
import configureStore from './store';

const store = configureStore();

ReactDOM.render(
    <Router>
        <Provider store={store}>
            <App />
        </Provider>
    </Router>, 
    document.getElementById("root")
);

package.json

{
  "name": "WhatToCook",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.12.13",
    "@babel/core": "^7.12.13",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "@types/react-dom": "^17.0.3",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "babel-loader": "^8.2.2",
    "css-loader": "^1.0.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "lodash": "^4.17.20",
    "react": "^17.0.1",
    "react-addons-update": "^15.6.3",
    "react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "react-jss": "^10.5.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  }
}

我尝试为我在此文件中使用的所有包安装类型依赖项，但没有帮助。

Answer 1

如果您添加 typescript 并且如果您的组件或组件测试文件中有 JSX，则必须将 .tsx 作为您的文件扩展名。如果您有 .ts 文件扩展名，则无法编译代码。因此，如果您遇到这种情况，请将其重命名为 .tsx。

降级到 15.04 版本的 React 类型定义也可以看到这个线程：Allow SFC to return null

类型“BrowserRouter”缺少以下属性... - TypeScript

1 个答案: