Statuslose Funktion mit TypeScript-Fehler in React: TS2352 kann nicht in Typ 'Promise <StatelessComponent <{}>>'

Question

konvertiert werden Ich bin neu in TypeScript und mit folgenden Codes.

import * as React from 'react'; 
const Product: React.SFC<{}> =() => <div>Product</div>; 
export default Product; 

---

import { asyncComponent } from 'react-async-component'; 

const AsyncProduct = asyncComponent({ 
    name: 'AsyncProduct', 
    serverMode: 'resolve', 
    resolve:() => { 
    return import(/* webpackChunkName: "Product" */ './Product') as Promise<React.SFC<{}>>; 
    }, 
}); 

export default AsyncProduct; 

./src/AsyncProduct.tsx (7,12): Fehler TS2352: Typ 'Versprechen' kann nicht konvertiert werden, um Typ Promise> '. Typ 'typeof "/ Benutzer/banyan/tmp/Typoskript-react-async-Komponente-Beispiel/src/Produkt"' ist nicht vergleichbar mit dem Typ 'StatelessComponent < {}>'. Typ 'typeof'/Benutzer/banyan/tmp/Typescript-react-async-Komponente-Beispiel/src/Produkt '' liefert keine Übereinstimmung für die Signatur '(Requisiten: {Kinder ?: ReactNode; }, Kontext ?: any): ReactElement | Null'.

Wenn ich die Promise<React.SFC<{}> ändern Promise<any> zu sein, kann es kompiliert werden, aber wie kann ich die staatenlos Funktion angeben?

Dies ist die Mindest Repo mit yarn start zu reproduzieren: https://github.com/banyan/typescript-react-async-component-example

---

Die Definition von Typ ist wie folgt: node_modules/react-async-component/index.d.ts.

/** 
* The configuration for an asynchronous component. 
*/ 
export interface Configuration<P> { 
    resolve:() => Promise<React.ComponentType<P>>; 
... 
} 

Answer 1

Die import Funktion gibt das gesamte Modul, müssen Sie das auswählen, was genau Sie aus dem Modul (Standard-Export oder einer benannten eins) verwenden möchten:

async/await Verwendung:

const AsyncProduct = asyncComponent({ 
    name: 'AsyncProduct', 
    serverMode: 'resolve', 
    resolve: async() => { 
    var module = await import('./Product'); 
    return module.default; 
    }, 
}); 

Oder mit dann:

const AsyncProduct2 = asyncComponent({ 
    name: 'AsyncProduct', 
    serverMode: 'resolve', 
    resolve:() => { 
    return import('./Product').then(m=> m.default); 
    }, 
});