TypeScript Fundamentals for React Developers

What is TypeScript?

TypeScript is a superset of JavaScript that adds optional static types. It compiles down to plain JavaScript that runs in any browser or JavaScript environment.

By adding types, TypeScript helps catch errors during development rather than at runtime, improving code quality.

• Developed and maintained by Microsoft.
• Supports all JavaScript features plus additional type syntax.
• Integrates seamlessly with React to provide type safety.

Basic TypeScript Types

TypeScript provides several built-in types to describe data structures. Understanding these is essential for typing React components.

• string: represents text data.
• number: represents numeric values.
• boolean: true or false values.
• array: a collection of elements of a specific type.
• tuple: fixed-length array with specified types.
• any: disables type checking (use sparingly).
• void: represents absence of any type, often for functions that return nothing.

Interfaces and Type Aliases

Interfaces and type aliases allow you to define custom types, which is especially useful for typing React component props and state.

Interfaces describe the shape of an object, while type aliases can define types for primitives, unions, intersections, and more.

• Use interfaces to define props for React components.
• Type aliases can create union types to allow multiple possible types.
• Both improve code readability and enforce contracts.

Type Inference and Type Checking

TypeScript can often infer types based on the assigned values, reducing the need for explicit annotations.

However, explicit typing is recommended for function parameters and component props to improve clarity and maintainability.

• Type inference works well for variables initialized immediately.
• Explicit types help document intent and catch errors early.
• React components benefit from typed props and state.

Writing a Simple React Component with TypeScript

Let's see a practical example of a React functional component using TypeScript to type its props.