reactjs - 将 react js 文件转换为 tsx 文件

Question

将反应项目转换为打字稿时发生打字稿错误。

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 add typescript (...with some other @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>
    );
  }
}

标签： reactjstypescript

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