В проекте TypeScript + React я использую react-dnd с Определенно типизированные тиски:
interface ExampleScreenProps { a, b, c }
interface ExampleScreenState { x, y, z }
class ExampleScreen extends React.Component<ExampleScreenProps, ExampleScreenState> { }
export default DragDropContext(HTML5Backend)(ExampleScreen);
Это отображается в другом компоненте:
import ExampleScreen from "./ExampleScreen";
<ExampleScreen a="a" b="b" c="c" />
Это работает в TS 1.8 без каких-либо ошибок. Когда я обновился до TS 2.0, я получил следующую ошибку компиляции:
Ошибка: (90, 10) TS2600: тип атрибутов элемента JSX '(ПримерScreenProps и {children?: ReactNode;}) | (ExampleScreenProps и {children... "не могут быть типом объединения.
Это определение типа для DragDropContext
:
export function DragDropContext<P>(
backend: Backend
): <P>(componentClass: React.ComponentClass<P> | React.StatelessComponent<P>) => ContextComponentClass<P>;
Я не могу собрать это вместе. За что жаловаться? Кажется, что ему не нравится объединение ComponentClass<P> | StatelessComponent<P>
, но это не атрибуты элемента, атрибуты элемента просто <P>
. Я пробовал явно пропустить <P>
:
export default DragDropContext<ExampleProps>(HTML5Backend)(ExampleScreen);
Но такая же ошибка сохраняется. Я могу обойти это, утверждая вывод:
export default DragDropContext(HTML5Backend)(ExampleScreen) as React.ComponentClass<ExampleProps>;
Но мне не нравится, когда нужно использовать утверждение, и я не понимаю, в чем проблема, или если я что-то делаю неправильно. Это проблема с типизиями, которые могут быть исправлены?