Migrating from React ES6 to TypeScript: converting (This) to type

Question

I am fairly new to TypeScript, and have been handed an ES6 based react project, and would like to Migrate over to TypeScript for a more integrated state. Anything following a (this.) seems to break with error (Property "foo" does not exist on Type "bar")

import * as React from 'react';
import { Component } from 'react';
class Clock extends Component {
    constructor(props: {}) {
        super(props);
        this.state = {
            date: new Date()
        };
    }

    componentDidMount() {
        this.timerId = setInterval(
            () => this.tick(), 500
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerId);
    }

    tick() {
        this.setState({
            date: new Date()
        });
    }

    render() {
        const options = { hour24: false };

        return (
            <div className="clockDesign">{this.state.date.toLocaleString('en-US', options)}</div>
        );
    }
}

export default Clock;

My question is this. How would I go about converting the inline definitions to types within my class statement?

Samuli Hakoniemi · Accepted Answer · 2017-10-24 13:57:05Z

1

Use interfaces (https://www.typescriptlang.org/docs/handbook/interfaces.html):

interface Props = {

};

interface State = {
  date: Date;
}

class Clock extends Component<Props, State> {
  private timerId: any;

  constructor(props: Props) {
    super(props);

    this.state = {
      date: new Date()
    };
  }
  ...
}

answered Oct 24, 2017 at 13:57

Samuli Hakoniemi

19.1k1 gold badge64 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Duncan Lukkenaer · Accepted Answer · 2017-10-24 13:49:22Z

0

Declare the fields of your class before assigning them. For example:

class Clock extends Component {

    private state: { date: Date }

    constructor(props: {}) {
        super(props);
        this.state = {
            date: new Date()
        };
    }

    // ...
}

Or if state is supposed to be inherited from Component, then you might have some problems with your typings (npm install @typings/react).

answered Oct 24, 2017 at 13:49

Duncan Lukkenaer

14.2k19 gold badges75 silver badges109 bronze badges

4 Comments

jpearsonNode Over a year ago

Would this also apply to the (this.timerId) statements? I should have been more clear in my question, but the date was a secondary issue as well

Duncan Lukkenaer Over a year ago

Yes, there you would use private timerId: number (or public depending on your case)

jpearsonNode Over a year ago

Thank you very much, testing now. I am on hold for accepting.

jpearsonNode Over a year ago

That seemed to do the trick. I had to switch them all to public, to prevent an incorrect extension error.

Per Svensson · Accepted Answer · 2017-10-24 14:00:08Z

You need to add correct generic arguments and you need to define the class properties. See comments.

import * as React from 'react';

interface IProps { }
interface IState {
    date: Date;
}

class Clock extends React.Component<IProps, IState> { //You need to define both props and state
    constructor(props: {}) {
        super(props);
        this.state = {
            date: new Date()
        };
    }

    timerId: any; //Props needs to be defined;
    componentDidMount() {
        this.timerId = setInterval(
            () => this.tick(), 500
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerId);
    }

    tick() {
        this.setState({
            date: new Date()
        });
    }

    render() {
        const options = { hour24: false };

        return (
            <div className="clockDesign"> {this.state.date.toLocaleString('en-US', options)} </div>
        );
    }
}

export default Clock;

Collectives™ on Stack Overflow

Migrating from React ES6 to TypeScript: converting (This) to type

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related