React에 TypeScript 오류가있는 상태 비 저장 기능 : TS2352를 'Promise <StatelessComponent <{}>>'

Question

유형으로 변환 할 수 없습니다. TypeScript를 처음 사용하며 다음 코드가 있습니다.

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) : 오류 TS2352 : 유형 '약속' 이 '약속>'형식으로 변환 할 수 없습니다. 'typeof "/ 사용자/banyan/tmp/typescript-react-async-component-example/src/Product" 은'StatelessComponent < {}> '유형과 비교할 수 없습니다. 'typeof'/ Users/banyan/tmp/typescript-react-async-component-example/src/Product를 입력하십시오. " ' 은 서명과 일치하지 않습니다.'(소품 : {children ?: ReactNode; }, context ?: any) : ReactElement | 없는'. 나는 Promise<React.SFC<{}>이 Promise<any>로 변경하는 경우

, 그것은 컴파일 할 수 있지만 내가 어떻게 비 저장 기능을 지정할 수 있습니다?

이 yarn start로 재생하기위한 최소의 repo는 다음 유형의 https://github.com/banyan/typescript-react-async-component-example

---

정의는 다음과 같이이다 : node_modules/react-async-component/index.d.ts.

이 async/await 사용 :

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

Answer 1

import 기능은 전체 모듈을 반환, 당신은 당신이 모듈 (기본 수출 또는 명명 된 하나)에서 사용할 정확히 무엇을 선택해야

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

또는 다음과 :

이

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