reactjs - Hur man använder Flux Container.create i Typescript 2.8

Jag försöker uppdatera mitt react/flux-projekt från TypeScript 2.2 till 2.8.

Jag har följande som definierar en butik med hjälp av container.create-nyttjandefunktionen:

import * as React from 'react';
import { Container } from 'flux/utils';

export let MyContainer = Container.create(class extends React.Component<props, state> {
    static getStores() {
        return [/* list of stores here*/]
    }

    static calculateState(prevState: state, props: props): state {
        return {hello: true}
    }

    render() {
        return <div>something</div>
    }
}, { withProps: true });

Om jag exporterar denna komponent och försöker använda den får jag följande fel:

TS2605: JSX element type 'Component<props, ComponentState>' is not a constructor function for JSX elements.

Detta fungerade bra när jag använde TypeScript 2.2, men efter uppdateringen får jag fel överallt där jag försöker använda container-komponenten på detta sätt.

Jag använder @types/react-typningarna version 15.0.28. Här är definitionerna för Flux-containrar.

Svar #1

Tydligen uppstår detta fel med TypeScript 2.6 och framåt. Men jag är inte säker på vilken brytande ändring som orsakar detta beteende, ingen verkar stämma.

Den grundläggande orsaken är denna:

let readOnlyOrVoid: Readonly<void | {}> // resolves to void | Readonly<{}>
let readOnlyOfAny: Readonly<any> // in 2.5 this resolves to any, in 2.6 it does not we still have Readonly<any>
readOnlyOfAny = readOnlyOrVoid; // valid in 2.5, not so in 2.6

Relaterat tillbaka till React, definieras ComponentState i 15.0.23 som :

type ComponentState = {} | void ;

Medan state för en JSX.ElementClass (som utökar React.Component<any, any>) har typen Readonly<any>.

Eftersom Container.create kommer att returnera en omsluten komponent med tillståndet ComponentState stöter vi på precis detta problem att tilldela Readonly<void | {}> (från den omslutna komponenten) till Readonly<any> (från definitionen av JSX.ElementClass)

Den enklaste lösningen är att uppdatera typerna för react till 15.0.39 vilket ersätter definitionen av ComponentState med:

type ComponentState = {};

Relaterade artiklar