What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
You can start using TypeScript with React without mastering all of TypeScript first: set up the project using its framework’s instructions, give JSX files the .tsx extension, and type component props as you build. TypeScript checks your code before it runs; it does not validate external data at runtime.
Choose the right setup for your React project
React’s documentation says that production-grade React frameworks support TypeScript and recommends following the setup instructions for the framework you use. That is the best starting point for a new app: the framework and its build pipeline determine how TypeScript and JSX should be configured. Read React’s TypeScript guide.
For an existing React project, React’s guide shows installing the React type definitions as development dependencies:
Recommended Free Tools
npm install --save-dev @types/react @types/react-domUse the package manager and project setup already in place, and check your framework’s instructions before changing its TypeScript configuration.
#1 Best Overall
Check the TypeScript configuration
For a React web project, the TypeScript configuration needs the dom library in lib so browser types are available, and a valid jsx option. The appropriate JSX mode depends on the toolchain: it may preserve JSX for another transform or emit JavaScript itself. React says preserve is sufficient for most applications; libraries should consult the JSX documentation.
TypeScript documents these JSX modes: preserve, react, react-jsx, react-jsxdev, and react-native. In broad terms, preserve leaves JSX for another tool, react emits React.createElement calls, and react-jsx emits calls to the JSX runtime. Don’t choose a mode just because it appears in an example; use the one your framework or build pipeline expects. See TypeScript’s JSX documentation.
Use .tsx for files with JSX
Every file containing JSX needs the .tsx extension. A file containing only TypeScript, with no JSX, can use .ts. The extension lets TypeScript parse JSX syntax, but it does not by itself select the correct JSX output mode; that is configured separately in tsconfig.json.
Rank #2
- TypeScript implements a superset of syntax for strictly typed development, facilitating deep static analysis and enhanced development environment integration. The compiler translates source into standard script formats, ensuring parity across any runtime.
- TypeScript is ideal for front-end developers, full-stack engineers, and software architects who build large-scale web applications. It serves those looking to improve code excellence, reduce bugs through static checking, and maintain complex projects more.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
Type component props
Props describe the values a parent component passes to a child. For a small component, you can write the prop shape directly in the function signature:
function Greeting({ name }: { name: string }) {
return <h1>Hello, {name}!</h1>;
}Here, name is required and must be a string. If a parent passes a different value, TypeScript can report the mismatch in the editor or during type checking.
Name the props shape as it grows
When a component has several props or its shape is reused, give that shape a name. You can use either a type or an interface:
interface ProfileCardProps {
name: string;
location: string;
isOnline: boolean;
}
function ProfileCard({ name, location, isOnline }: ProfileCardProps) {
return (
<section>
<h2>{name}</h2>
<p>{location}</p>
<p>{isOnline ? "Online" : "Offline"}</p>
</section>
);
}This makes the component’s inputs easier to scan and gives your editor a clear shape to document and check. You generally do not need to add an explicit return type just for formality when TypeScript can infer it.
Free tools Windows power users keep installed
One-click scans. No signup required.
Let Hook types be inferred when possible
React’s type definitions include the built-in Hooks. For straightforward state, TypeScript often infers the type from the initial value:
import { useState } from "react";
function Toggle() {
const [isOn, setIsOn] = useState(false);
return (
<button onClick={() => setIsOn(!isOn)}>
{isOn ? "On" : "Off"}
</button>
);
}Because the initial value is false, TypeScript infers a boolean state value. Add an explicit type argument when the initial value does not give TypeScript enough information—for example, when state begins empty but will later hold a particular kind of value.
const [selectedId, setSelectedId] = useState<string | null>(null);This state can hold either a string or null; the type argument makes that intended range explicit.
Type event handlers without guessing
React’s event types vary with the element and event. Instead of trying to memorize a type name, write the handler in the JSX and hover over the event parameter in your editor to see the inferred type:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →function SearchBox() {
return (
<input onChange={event => console.log(event.currentTarget.value)} />
);
}If you move the handler into a separate function, use the type suggested for that element and event by your editor or React’s type definitions. React’s guide identifies React.SyntheticEvent as the base type when a more specific event type is not included. Prefer a specific event type when one is available.
Best Value
Choose a children type that matches what you accept
A component’s children prop can be typed broadly or narrowly depending on what the component is meant to receive.
| Type | Use it when | Boundary |
|---|---|---|
React.ReactNode |
The component accepts broad renderable children, such as text or JSX. | It allows a wider range of children. |
React.ReactElement |
The prop must be a JSX element. | It is narrower than React.ReactNode, but does not restrict the child to a particular tag such as only <li>. |
For example, a wrapper that accepts general renderable content can declare its props like this:
interface PanelProps {
children: React.ReactNode;
}
function Panel({ children }: PanelProps) {
return <section className="panel">{children}</section>;
}Type inline styles with React’s style type
When you store an inline style object in a variable, React provides React.CSSProperties for its type:
const headingStyle: React.CSSProperties = {
color: "rebeccapurple",
marginBottom: "1rem",
};This describes the object’s expected style properties and values; it does not apply the styles unless you pass the object to an element’s style prop.
Know what TypeScript does—and does not—check
TypeScript checks that your code is consistent with the types you have declared. Those checks help catch mistakes while you work, but types are not runtime validation. If your application receives JSON or other external data and needs guarantees about its shape while running, validate that data at runtime before relying on it.
Quick Recap
Where to continue learning
- The TypeScript Handbook covers core language features such as types, interfaces, and generics.
- React’s TypeScript guide walks through React-specific topics, including props, Hooks, events, and children.
- The React TypeScript Cheatsheet is a community-maintained reference for additional React and TypeScript patterns.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
