Closed
Description
TypeScript Version: 2.6.0-dev.20171015
This relates to the render method of React components, specifically the use of false
in the union return type:
render(): JSX.Element | null | false
I've create a stand-alone example that demonstrates the issue. See the code comments for instructions.
Code
declare class Base {
render(): Date | false;
}
class TestImplicitReturnType extends Base {
render() /* ': false' is required here as explicit return type to prevent a compile error */ {
return false;
}
}
class TestControlFlow extends Base {
render() {
if (new Date().getTime() % 2 === 0) {
return new Date(); /* removing this return statement causes the false value below to be rejected */
}
return false;
}
}
Expected behavior:
For TestImplicitReturn I should not be required to manually add : false
as return type.
For TestControlFlow I should not be required to also return a Date to satisfy the type checker.
Actual behavior:
For TestImplicitReturn the compiler outputs:
Class 'TestImplicitReturnType' incorrectly extends base class 'Base'.
Types of property 'render' are incompatible.
Type '() => boolean' is not assignable to type '() => false | Date'.
Type 'boolean' is not assignable to type 'false | Date'.
For TestImplicitReturnType the compiler outputs the following when the date return statement is removed:
Class 'TestControlFlow' incorrectly extends base class 'Base'.
Types of property 'render' are incompatible.
Type '() => boolean' is not assignable to type '() => false | Date'.
Type 'boolean' is not assignable to type 'false | Date'.