A Quick Guide to React with TypeScript

How to combine two of the most popular tools in web development

Bret Cameron
Apr 16 · 5 min read
Image for post
Image for post
Photo by Ben Kolde on Unsplash

What is React?

What is Typescript?

Making a React-TypeScript Project

# npx
npx create-react-app app-name --template typescript
# yarn
yarn create react-app app-name --template typescript

Building a Simple Counter

cd src && mkdir components && cd components && touch ClassCounter.tsx && touch FunctionalCounter.tsx

The Class Component Version

import React, { PureComponent } from "react";class ClassCounter extends PureComponent<{}, { count: number }> {
state = { count: 0 };
updateCount = (e: React.MouseEvent<HTMLButtonElement>): void => {
switch (e.currentTarget.innerText) {
case "-":
this.setState({ count: this.state.count - 1 });
break;
case "+":
default:
this.setState({ count: this.state.count + 1 });
break;
}
};
render(): JSX.Element {
const { count } = this.state;
return (
<div>
<h2>Class Component</h2>
<h1>{count}</h1>
<button onClick={this.updateCount}>+</button>
<button onClick={this.updateCount}>-</button>
</div>
);
}
}
export default ClassCounter;

The Functional Component Version

import React, { FC, useState, useCallback } from "react";const FunctionalCounter: FC<{}> = (): JSX.Element => {
const [count, setCount] = useState(0);
const updateCount = useCallback(
(e: React.MouseEvent<HTMLButtonElement>): void => {
switch (e.currentTarget.innerText) {
case "-":
setCount(count - 1);
break;
case "+":
default:
setCount(count + 1);
break;
}
},
[count]
);
return (
<div>
<h2>Functional Component</h2>
<h1>{count}</h1>
<button onClick={updateCount}>+</button>
<button onClick={updateCount}>-</button>
</div>
);
};
export default FunctionalCounter;

Adding Props

The Class Component Version

type ButtonType = "+" | "-";class Button extends PureComponent<
{ type: ButtonType; updateCount: (type: ButtonType) => void },
{}
> {
render(): JSX.Element {
const { type, updateCount } = this.props;
return <button onClick={() => updateCount(type)}>{type}</button>;
}
}
<Button updateCount={this.updateCount} type="+" />
<Button updateCount={this.updateCount} type="-" />

The (Stateless) Functional Component Version

type ButtonType = "+" | "-";const Button = ({
type,
updateCount,
}: {
type: ButtonType;
updateCount: (type: ButtonType) => void;
}): JSX.Element =>
<button onClick={() => updateCount(type)}>{type}</button>;
<Button updateCount={updateCount} type="+" />
<Button updateCount={updateCount} type="-" />

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store