React with TypeScript

Setting Up React + TypeScript

Scaffold with npm create vite@latest my-app -- --template react-ts. Vite configures TypeScript, JSX as .tsx, and strict checking via tsconfig.json.

Install @types/react and @types/react-dom for React type definitions. Enable strict mode for maximum safety.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Use .tsx extension for files containing JSX.

Basic Typed Component

function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}</h1>;
}

// Or with interface
interface GreetingProps { name: string; }
function Greeting({ name }: GreetingProps) { ... }

• Type props with interfaces or inline object types.
• Import types: import type { FC } from 'react' (FC optional).
• Strict null checks catch missing optional chaining.
• Use satisfies for typed object literals (TS 4.9+).

React TypeScript Essentials

Core types and files in react-ts projects.

Strict TypeScript Settings

Enable strict, noUncheckedIndexedAccess, and exactOptionalPropertyTypes incrementally. Strictness prevents entire categories of runtime bugs in React apps.

Type vs Interface for Props

Interfaces extend cleanly for component prop inheritance; types work better for unions and computed types. Teams often use interfaces for props consistently.

Common Mistakes

• Using .jsx files in TS projects without types.
• Typing everything as any defeating TypeScript purpose.
• Not typing event handlers — losing autocomplete.
• Ignoring TS errors in CI builds.

Key Takeaways

• Use Vite react-ts template for new typed React apps.
• Type props, state, events, and refs explicitly.
• Strict tsconfig catches more bugs early.
• Dedicated lessons follow for props, state, and hooks typing.