TypeScript in React - Full Tutorial

Vite scaffolding automates TypeScript configuration

Using `npm create vite` with the TypeScript variant automatically configures tsconfig.json, tsconfig.node.json, and installs React type definitions without manual setup.

Migration strategy preserves original JavaScript files

The instructor recommends maintaining the original React project in a separate folder while creating new `.ts` and `.tsx` files to gradually port functionality and styling.

Manual installation of additional dependencies required

Packages like `clsx` and `react-confetti` must be manually installed in the new TypeScript project alongside the auto-generated TypeScript dependencies.

Arrays and objects need explicit type annotations

Simple arrays use `string[]` while object arrays benefit from explicit typing either inline or through custom definitions like `type Language = { name: string; backgroundColor: string }`.

Custom types provide better reusability than inline definitions

Creating named types for complex objects allows for cleaner code maintenance and enables importing types across multiple component files.

Function parameters and return values require explicit typing

Functions like `getRandomWord` and `getFarewellText` need typed parameters (e.g., `language: string`) and return annotations (e.g., `: string`) to prevent implicit `any` types.

useState hooks utilize generic type arguments

When initial state is an empty array or ambiguous, explicitly type state with generics like `useState<string[]>()` to ensure type safety for both values and setters.

Type inference automatically handles derived constants

Local derived values within components typically don't need explicit types because TypeScript correctly infers types from existing state and variables.

Refactoring creates reusable typed utility functions

Extracting repeated logic like `getRandomIndex` into standalone typed functions reduces duplication while maintaining strict type safety across the codebase.