Использование реактивного маршрутизатора с typescript

Я пытаюсь подключить небольшое приложение для реагирования до typescript.

Я сталкиваюсь с проблемами с маршрутизатором. У меня есть последние определения определенного типа, но следующий код дает мне ошибки:

var routes:Router.Route = (
<Route name="root" path="/" handler={MyApp}>
  <Route path="dashboard" handler={MyDash} />
  <DefaultRoute handler={SomeSection} />
  <NotFoundRoute handler={NotFoundPage} />
</Route>
);

Router.run(routes, function (Handler:React.Component<any, any>) {
  React.render(<Handler/>, document.body);
});

Это ошибки компиляции, которые я получаю:

js/app.tsx(31,3): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Component<RouteProp, any>'.
js/app.tsx(32,5): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements.
js/app.tsx(47,5): error TS2605: JSX element type 'Component<DefaultRouteProp, any>' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Component<DefaultRouteProp, any>'.
js/app.tsx(49,5): error TS2605: JSX element type 'Component<NotFoundRouteProp, any>' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Component<NotFoundRouteProp, any>'.
js/app.tsx(53,20): error TS2345: Argument of type '(Handler: Component<any, any>) => void' is not assignable to parameter of type '(Handler: RouteClass, state: RouterState) => void'.
  Types of parameters 'Handler' and 'Handler' are incompatible.
    Type 'Component<any, any>' is not assignable to type 'RouteClass'.
js/app.tsx(54,17): error TS2604: JSX element type 'Handler' does not have any construct or call signatures.

Каков правильный способ инициализации набора маршрутов-ответчиков с использованием typescript?

(Я должен пояснить, что я использую ночную компоновку typescript, которая поддерживает JSX с помощью флага --jsx react

Ответы

Ответ 1

Коренной проблемой были некоторые определения в response-router, не имеющие явного метода render(). Это было исправлено (косвенно) с помощью https://github.com/borisyankov/DefinitelyTyped/pull/5197

Обратите внимание, что этот код неверен:

Router.run(routes, function (Handler:React.Component<any, any>) {
  React.render(<Handler/>, document.body);
});

Это должно быть:

Router.run(routes, function (Handler: new() => React.Component<any, any>) {
  React.render(<Handler/>, document.body);
});

Потому что Handler является конструктором для компонента React, а не экземпляром его.

Ответ 2

Ошибки в определениях типов являются причиной. Вы можете обойти их, изменив файлы .d.ts следующим образом:

В react.d.ts удалите render из интерфейса JSX.ElementClass

interface ElementClass extends React.Component<any, any> {
}

В react-router.d.ts измените run метод routes на тип параметра React.ReactElement<RouteProp>

function run(routes: React.ReactElement<RouteProp>, callback: RouterRunCallback): Router;
function run(routes: React.ReactElement<RouteProp>, location: LocationBase, callback: RouterRunCallback): Router;

Ответ 3

Чтобы сделать его работающим под typescript 1.6 с реактивным маршрутизатором, я добавил следующий код в файле response-router.d.ts:

interface RouterClass extends React.ComponentClass<any> {}

var Router: RouterClass;

//For Router

function createElement(

type: ReactRouter.RouterClass,

props: any,

...children: __React.ReactNode[]): ReactRouter.Router;

}

interface RouteProp {
    name?: string;
    path?: string;
    handler?: React.ComponentClass<any>;
    ignoreScrollBehavior?: boolean;
    component?: React.ComponentClass<any>;
}