Error TS2415 in simple Typescript/React class

Question

TS2415: Class 'MyComponent' incorrectly extends base class

I have created the following code snippet:

import * as React from "react";

export interface IMyProps {
}

export interface IMyState {
}

export class MyComponent extends React.Component<IMyProps, IMyState> {
    constructor(props: IMyProps) { 
        super(props);
    }

    render() {

    }
}

But the TypeScript compiler gives me the following error:

(9,14): error TS2415: Class 'MyComponent' incorrectly extends base class 'Component'. Types of property 'render' are incompatible. Type '() => void' is not assignable to type '() => false | Element'. Type 'void' is not assignable to type 'false | Element'.

What's wrong here?

01F0 01F0 · Accepted Answer · 2017-10-25T14:42:51

I had to add a return statement to the render method for it to compile:

import * as React from "react";

export interface IMyProps {
}

export interface IMyState {
}

export class MyComponent extends React.Component<IMyProps, IMyState> {
    constructor(props: IMyProps) { 
        super(props);
    }

    render() {
        return <div/> // I had to return a valid return type here.
    }
}

I think this is because because the return type is not known until the return statement has been interpreted. Until then, the render() method gets interpreted as returning 'void'.

Error TS2415 in simple Typescript/React class

1 Answers