Reactjs 将react js文件转换为tsx文件

将react项目转换为typescript时发生typescript错误

TypeScript error in /src/App.tsx(34,44):
No overload matches this call.
  Overload 1 of 2, '(props: RouteProps | Readonly<RouteProps>): Route<RouteProps>', gave the following error.
    Type '{ exact: true; path: string; name: string; render: (props: RouteComponentProps<any, StaticContext, unknown>) => Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<RouteProps>> & Readonly<RouteProps> & Readonly<...>'.
      Property 'name' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<RouteProps>> & Readonly<RouteProps> & Readonly<...>'.
  Overload 2 of 2, '(props: RouteProps, context: any): Route<RouteProps>', gave the following error.
    Type '{ exact: true; path: string; name: string; render: (props: RouteComponentProps<any, StaticContext, unknown>) => Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<RouteProps>> & Readonly<RouteProps> & Readonly<...>'.
      Property 'name' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<RouteProps>> & Readonly<RouteProps> & Readonly<...>'.  TS2769

    32 |             <React.Suspense fallback={loading}>
    33 |               <Switch>
  > 34 |                 <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
       |                                            ^
    35 |                 <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
    36 |                 <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
    37 |                 <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />

/src/App.tsx（34,44）中的类型脚本错误： 没有与此调用匹配的重载。 重载2中的1’（道具：RouteProps | Readonly）：Route’给出了以下错误。 键入“{exact:true；path:string；name:string；render:（props:RouteComponentProps

添加typescript（…与其他一些@types/…）

将app.js重命名为app.tsx

起纱

获取类型脚本错误

似乎脚本类型需要额外的代码（道具和状态）

所以我添加了接口道具和状态来解决上面的错误

但还是不行，需要帮助

interface Props {};

interface State {};



const loading = (
  <div className="pt-3 text-center">
    <div className="sk-spinner sk-spinner-pulse"></div>
  </div>
)
// Containers
const TheLayout = React.lazy(() => import('./containers/TheLayout'));

// Pages
const Login = React.lazy(() => import('./views/pages/login/Login'));
const Register = React.lazy(() => import('./views/pages/register/Register'));
const Page404 = React.lazy(() => import('./views/pages/page404/Page404'));
const Page500 = React.lazy(() => import('./views/pages/page500/Page500'));
const TestPage = React.lazy(() => import('./views/pages/testPage/TestPage'));
class App extends Component  {


  render() {
    return (
        <HashRouter>
            <React.Suspense fallback={loading}>
              <Switch>
                <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
                <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
                <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
                <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
                <Route exact path="/test_page" name="Test Page" render={props => <TestPage {...props}/>} />
                <Route path="/" name="Home" render={props => <TheLayout {...props}/>} />
              </Switch>
            </React.Suspense>
        </HashRouter>
    );
  }
}

接口支柱{}；
界面状态{}；
常量加载=(
)
//容器
constthelayout=React.lazy（（）=>import（'./containers/TheLayout'）；
//页数
const Login=React.lazy（（）=>import（'./views/pages/Login/Login'）；
const Register=React.lazy（（）=>import（“./views/pages/Register/Register”）；
const Page404=React.lazy（（）=>import（'./views/pages/Page404/Page404'））；
const Page500=React.lazy（（）=>import（'./views/pages/Page500/Page500'）；
const TestPage=React.lazy（（）=>import（'./views/pages/TestPage/TestPage'）；
类应用程序扩展组件{
render（）{
返回(
} />
} />
} />
} />
} />
} />
);
}
}

是否尝试导入此（）？

您需要使用

jsx

选项将tsconfig.json添加到项目中

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

然后您应该安装

@types/react

，

@types/react-dom

和

@types/react-router-dom

之后，您应该调整组件的类型

请记住，

路线

没有

名称

属性

以下是路由的源代码（类型）：

导出接口路由操作{
位置？：H.位置；
组件？：React.ComponentType | React.ComponentType；
渲染？：（props:RouteComponentProps）=>React.ReactNode；
儿童：（（道具：RouteChildrenProps）=>React.ReactNode）| React.ReactNode；
路径？：字符串|字符串[]；
精确？：布尔；
敏感？：布尔值；
严格？：布尔；
}
导出类路由扩展React.Component{}

感谢您提供的有用建议。我刚刚删除了Route上的name属性，并将（：any）添加到每个常量变量中，它与一些警告消息一起工作。