Using TypeScript in React Projects
By 2023, TypeScript had become almost the default for serious React projects. At first, I resisted — plain JavaScript felt faster to prototype with. But once I used TypeScript on a production project, I realized the benefits far outweighed the extra setup.
Here’s what I learned while integrating TypeScript into React apps.
Why TypeScript?
Type safety → Catches errors at compile-time instead of runtime.
Better IDE support → Autocomplete, IntelliSense, refactoring.
Team collaboration → Easier for new developers to understand code.
A Simple Example
JavaScript (error-prone)
function add(a, b) {
return a + b;
}
console.log(add(5, "2")); // outputs "52"
No errors — but the result is wrong.
TypeScript (safe)
function add(a: number, b: number): number {
return a + b;
}
// console.log(add(5, "2")); // ❌ Compile-time error
console.log(add(5, 2)); // ✅ 7
React with TypeScript
Props Example
type ButtonProps = {
label: string;
onClick: () => void;
};
function Button({ label, onClick }: ButtonProps) {
return <button onClick={onClick}>{label}</button>;
}
TypeScript ensures the component is always used correctly:
<Button label="Click me" onClick={() => alert("Clicked")} /> // ✅ Works
<Button label={123} onClick={() => alert("Clicked")} /> // ❌ Error
State Example
const [count, setCount] = React.useState<number>(0);
setCount(1); // ✅ Works
setCount("1"); // ❌ Error
Lessons Learned
Early Pain, Long-Term Gain → The first setup took time, but bugs decreased drastically.
Great for Large Teams → Everyone instantly sees what data structures look like.
Not Always Needed → For small scripts or quick prototypes, TypeScript can feel heavy.
Tooling Got Better → By 2023, CRA, Vite, and Next.js made TS setup easy.
Final Thoughts
TypeScript made me write cleaner, safer React code. It forced me to think about data structures upfront, which reduced surprises in production.
By mid-2023, I started defaulting to TypeScript for new React projects — unless I had a very small prototype where plain JavaScript was faster.