With TypeScript 1.4 I've run into an issue using react.d.ts using the new ES6 class coding style for components. Below I've narrowed the issue down to an issue resolving overloaded functions when one of the parameters is a type for which all properties are optional. The below excerpt shows the problem within www.typescriptlang.org/Playground, as well as in IntelliJ IDEA with typescript 1.4
Thanks,
Roy Procops
------------ code demonstrating issue follows ----------------
// A mimimal representation of an overload issue resolution seen
// using React with react.d.ts.
// This is a common React usage pattern using the new ES6 class support in React,
// and the error is preventing clean typescript compiles.
// Minimal React component, generic on type of 'props' member
class Component<P> {
constructor(props: P) {}
props: P;
}
// The static class type that goes with Component<P>
interface ComponentClass<P> {
new(props?: P): Component<P>;
}
// An overloaded function
// First arg can be a string or a ComponentClass<P>
function createElement<P>(type: string, props?: P): void;
function createElement<P>(type: ComponentClass<P>, props?: P): void;
function createElement(type: any): void {}
// A 'props' type in which all members are optional
interface MyProps {
value?: string;
option?: boolean;
}
// A component based on MyProps
class MyComponent extends Component<MyProps> {
}
// Here's the problem
// The first call works, but the second and third and fifth give the error:
// Argument of type 'typeof MyComponent' is not assignable to parameter of type 'string'
createElement(MyComponent, {value: 'abc', option: true}); // OK
createElement(MyComponent, {option: true}); // unexpected error
createElement(MyComponent, {value: 'abc'}); // unexpected error
createElement(MyComponent, <MyProps>{value: 'abc'}); // OK with extra type help on props arg
createElement(<ComponentClass<MyProps>>MyComponent, {value: 'abc'}); // unexpected error
// but this works...
var p: MyProps = {value: 'abc'}
// If at least ONE of the members of the props class is NON-OPTIONAL then everything is OK.
interface MyProps2 {
value: string;
option?: boolean;
}
class MyComponent2 extends Component<MyProps2> {
}
createElement(MyComponent2, {value: 'abc', option: true}); // OK
createElement(MyComponent2, {value: 'abc'}); // OK
With TypeScript 1.4 I've run into an issue using react.d.ts using the new ES6 class coding style for components. Below I've narrowed the issue down to an issue resolving overloaded functions when one of the parameters is a type for which all properties are optional. The below excerpt shows the problem within www.typescriptlang.org/Playground, as well as in IntelliJ IDEA with typescript 1.4
Thanks,
Roy Procops
------------ code demonstrating issue follows ----------------