54

I'm working on a project that uses TypeScript as well as React and I am new to both. My question is about interface in TypeScript and how that relates to props and states. What is actually happening? My application doesn't run at all unless I declare interface props and states, but I'm using states through the React constructor function and I've seen examples where all of that information would go into 'interface MyProps' or 'interface MyStates'. Take this code, for example:

"use strict";

import * as React from 'react'
import NavBar from './components/navbar.tsx'
import Jumbotron from './components/jumbotron.tsx';
import ContentPanel from './components/contentPanel.tsx';
import Footer from './components/footer.tsx';

interface MyProps {}
interface MyState {}
class Root extends React.Component <MyProps, MyState>  {
  constructor(props) {
    super(props);
    this.state = {
      ///some stuff in here
  
    };
  }
  render() {
    return (
      <div>
        <NavBar/>
        <Jumbotron content={this.state.hero}/>
        <ContentPanel content={this.state.whatIs}/>
        <ContentPanel content={this.state.aboutOne}/>
        <ContentPanel content={this.state.aboutTwo}/>
        <ContentPanel content={this.state.testimonial}/>
        <Footer content={this.state.footer}/>
      </div>
    )
  }
}
export default Root;

(I've removed the content in this.state just to post on here). Why do I need interface? What would be the correct way to do this, since I think I'm thinking of this in the JSX way and not the TSX way.

3
  • I'm also struggling with this pattern, and wonder how to pass the interfaced props (MyProps here) to the Root component from the outside - when the component is created within the jsx. Sadly the accepted answer does not show that part.
    – Macilias
    Commented Sep 3, 2019 at 10:45
  • 1
    UPDATE: found it, you use the propName = {...} syntax. Just in case someone has the same struggle.
    – Macilias
    Commented Sep 3, 2019 at 10:59
  • the error (which u can paste to elaborate on the question) might be about typescript demanding an interface for properties (typescriptlang.org/docs/handbook/interfaces.html) e.g. see this answer stackoverflow.com/a/46987987/2361131
    – gawkface
    Commented Apr 29, 2021 at 22:13

1 Answer 1

57

It's not clear what you're asking exactly, but:

props: are the key/value pairs that are being passed from the parent of the component and a component should not change it's own props, only react to changes of props from the parent component.

state: kinda like props but they are changed in the component itself using the setState method.

the render method is called when the props or state have changed.

As for the typescript part, the React.Component takes two types as generics, one for the props and one for the state, your example should look more like:

interface MyProps {}

interface MyState {
    hero: string;
    whatIs: string;
    aboutOne: string;
    aboutTwo: string;
    testimonial: string;
    footer: string;
}

class Root extends React.Component <MyProps, MyState>  {
    constructor(props) {
        super(props);
        
        this.state = {
            // populate state fields according to props fields
        };
    }

    render() {
        return (
            <div>
                <NavBar/>
                <Jumbotron content={ this.state.hero } />
                <ContentPanel content={ this.state.whatIs } />
                <ContentPanel content={ this.state.aboutOne } />
                <ContentPanel content={ this.state.aboutTwo } />
                <ContentPanel content={ this.state.testimonial } />
                <Footer content={ this.state.footer } />
            </div>
        )
    }
}

As you can see, the MyState interface defines the fields which are later used in the component this.state member (I made them all strings, but they can be anything you want).

I'm not sure whether or not those fields actually need to be in state and not in props, but that's your call to make.

8
  • Thanks, this answers everything for me.
    – ceckenrode
    Commented Apr 20, 2016 at 13:36
  • 1
    what is the use of MyProps? Commented Nov 29, 2019 at 13:29
  • @BahadurSinghDeol The type of the react component properties. In this example it's empty, but you can put whatever you need. Commented Nov 30, 2019 at 22:44
  • The problem is I can another filed to class state which is not in interface and work with it and the project tun without any Type checking? Commented Apr 16, 2020 at 7:23
  • <MyProps, MyState> helped me a lot! Commented May 27, 2020 at 9:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.