Part 7.1Setting up React with TypeScript

TypeScript checks the values passed between React components before the application runs. Files containing both TypeScript and JSX use the .tsx extension; ordinary TypeScript modules use .ts.

Create the project

npm create vite@latest typed-task-list -- --template react-ts
cd typed-task-list
npm install
npm run dev
    

What TSX adds

React still behaves in the same way. TypeScript checks component inputs, event values and state updates, then the build removes the types. A type error is development feedback, not a runtime condition shown to the user.

Typing props

type TaskItemProps = {
  title: string;
  complete?: boolean;
};

function TaskItem({
  title,
  complete = false
}: TaskItemProps) {
  return (
    <li className={complete ? "task task--complete" : "task"}>
      {title}
    </li>
  );
}
    

The type describes the component's public inputs. The question mark makes complete optional, matching its default. TypeScript now rejects a missing title or a non-boolean completion value at the call site.