Question

我通过转换我的ES6 React / Redux应用程序，首次在Typescript上运行。到目前为止，这是一场斗争。

我相信，我遇到了传播运营商的问题。我无法发布整个仓库，但可以发布有问题的文件。 FWIW，我正在使用react-scripts-ts@2.3.2，使用Typescript 2.3.4。我已经看到在2.3.3之前报告的问题，但我认为这些都应该修复。这是我的文件：

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createHashHistory';
import AppContainer from '../components/App/containers/AppContainer';
import { RouteTemplates } from './AppRouteUtility';

interface RouteTemplateType {
    path: string;
    component: new() => React.Component<RouteTemplateType>;
    routes: Array<RouteTemplateType>;
}

let appRoute = {
    path: RouteTemplates.AppRootTemplate,
    component: AppContainer,
    routes: []
} as RouteTemplateType;

export function makeRoutes(routes: Array<RouteTemplateType>) {
    if (!routes) {
        return;
    }

    return (
        <Switch>{routes.map((r, i) => <Routes {...r} key={i} />)}</Switch>
    );
}

export function Routes(routeConfig: RouteTemplateType) {
    return (
        <Route 
            path={routeConfig.path} 
            render={props => (
                <routeConfig.component {...props} routes={routeConfig.routes} />
            )} 
        />
    );
}

const historyObject = createHistory({
    getUserConfirmation: (message, callback) => {
        callback(window.confirm(message));
    }
});

export function history() {
    return historyObject;
}

export default class AppRouter extends React.Component<{}, {}> {
    render() {
        return (
            <Router history={historyObject}>
                <Routes {...appRoute} />
            </Router>
        );
    }
}

这是编译错误：

Failed to compile.

./src/routes/AppRouter.tsx
(13,16): error TS2352: Type '{ path: string; component: typeof default; routes: never[]; }' cannot be converted to type 'RouteTemplateType'.
  Types of property 'component' are incompatible.
    Type 'typeof default' is not comparable to type 'new () => Component<RouteTemplateType, {}>'.
      Type 'default' is not comparable to type 'Component<RouteTemplateType, {}>'.
        Types of property 'props' are incompatible.
          Type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' is not comparable to type 'Readonly<{ children?: ReactNode; }> & Readonly<RouteTemplateType>'.
            Type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' is not comparable to type 'Readonly<RouteTemplateType>'.
              Property 'path' is missing in type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

感谢任何帮助！

更新

更改

interface RouteTemplateType {
    path: string;
    component: new() => React.Component<RouteTemplateType>;
    routes: Array<RouteTemplateType>;
}

到

interface RouteTemplateType {
    path: string;
    component: new() => React.Component<RouteTemplateType>;
    routes: Array<RouteTemplateType> | never[];
}

传递了第一个错误。这是否真的有必要，提一个数组可能是空的？对我来说似乎有点疯狂。

我现在得到这个错误，这似乎有点复杂，我相信与传播有关：

Failed to compile.

./src/routes/AppRouter.tsx
(34,40): error TS2322: Type '{ routes: never[] | RouteTemplateType[]; match: match<any>; location: Location; history: History;...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<RouteTemplateType, {}>> & Readonly<{ chi...'.
  Type '{ routes: never[] | RouteTemplateType[]; match: match<any>; location: Location; history: History;...' is not assignable to type 'Readonly<RouteTemplateType>'.
    Property 'path' is missing in type '{ routes: never[] | RouteTemplateType[]; match: match<any>; location: Location; history: History;...'.

为什么使用扩展运算符的这个打字稿（w / React）没有编译？

0 个答案: