将react js文件转换为tsx文件将react项目转换为typescript时发生

Question

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

1. git克隆https://github.com/coreui/coreui-free-react-admin-template.git
2. yarn添加typescript(…与其他@types/…一起(
3. 已将app.js重命名为app.tsx
4. 纱线起始
5. 获取类型脚本错误

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

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

但是，它仍然不起作用。需要帮助。

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>
);
}
}

Answer 1

您需要使用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

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

请记住，Route没有name属性。

以下是Route:的源代码(类型(

export interface RouteProps {
location?: H.Location;
component?: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
render?: (props: RouteComponentProps<any>) => React.ReactNode;
children?: ((props: RouteChildrenProps<any>) => React.ReactNode) | React.ReactNode;
path?: string | string[];
exact?: boolean;
sensitive?: boolean;
strict?: boolean;
}
export class Route<T extends RouteProps = RouteProps> extends React.Component<T, any> {}

Answer 2

您是否尝试导入此(https://www.npmjs.com/package/@types/react路由器(？