convert react js files to tsx files

Question

typescript error occured while converting a react project to 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 clone https://github.com/coreui/coreui-free-react-admin-template.git
2. yarn add typescript (...with some other @types/...)
3. renamed app.js to app.tsx
4. yarn start
5. got type-script errors

it seems like additional codes(props and state) are required for types-script

so I added interface props and state for solving the error above.

but still, it doesn't work. need help.

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

You need to add tsconfig.json to your project with jsx option.

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

Then you should install @types/react, @types/react-dom and @types/react-router-dom

After that, you should adjust types for your components.

Please keep in mind, Route has not name property.

Here is source code (types) of 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

have you tried to import this (https://www.npmjs.com/package/@types/react-router) ?