Using Typescript with Javascript React.JS is a straightforward process. It allows for you to use type checking with your code which comes in handy when cutting down on errors, having a clear definition for state and props and documentation. In this tutorial, we’ll go over using Typescript with Stateful React Components. If you’re interested in the video lesson, please head over to our video tutorials in the link.

React Typescript Setup

The first thing you have to do is set up your react project to use Typescript. Run the following command in your terminal.

npx create-react-app my-app --typescript

This will create a project that uses Typescript by default. Under your src folder, you should see aa App.tsx file.

Creating a Stateful React Component

The next step will be to create a stateful react component. Now create a file called Profile.tsx

import React, { Component } from 'react';

export default class Profile extends Component {

}

The next thing you’ll want to do is define the type of state and props the component will take. We’ll create two interfaces.

interface ProfileProps {
    name: string,
    username: string,
    age: number
}

interface ProfileState {
    publicStatus: boolean;
};

Now we can have a component whose state and props have been defined. We can also define the initial state.

export default class Profile extends Component<ProfileProps, ProfileState> {
  state: ProfileState = {
    publicStatus: false
  };
}

Rendering the React Component

The last step will be to render our component. This component will display profile information for a user and display if they are a public or private user.

export default class Profile extends Component<ProfileProps, ProfileState> {
    state: ProfileState ={
        publicStatus: false
    };

    changeStatus = () => {
        this.setState({
            publicStatus: (!this.state.publicStatus)
        });
    }

    render(){
        return(
            <div>
                
                    { this.state.publicStatus ? (
                        <h1>This Profile is Public</h1>
                    ) : (
                        <h1>This Profile is Private</h1>
                    )} 
                
                <p>Name: {this.props.name}</p>
                <p>Username: {this.props.username}</p>
                <p>Age: {this.props.age}</p>
                <button onClick={this.changeStatus}>Set Status</button>
            </div>
        )
    }
}

Now in the App.tsx file, we will import that Profile component and pass in props to be displayed.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Profile from './Profile';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Profile 
          name="James"
          username="Codebrains"
          age={23}/>
        </header>
      </div>
    );
  }
}

export default App;

Now when you run the app, you should now see the user profile information based on the props that you provided.

Typescript React

Typescript React

Conclusion

Using Typescript with React is a great way to add type checking functionality. It cuts down on errors are helps document how components work. If you’re interested in learning more, check out some of our videos are courses.codebrains.io.

Codebrains Newsletter

Get weekly dev news and tutorials.

Powered by ConvertKit