TypeScript + React

Typer les composants, hooks et le contexte

Section 1

Typer les composants

Step 1

Props avec interface

Définis les props d'un composant avec une interface. React.FC<Props> ou simplement (props: Props) => JSX.Element — les deux fonctionnent, la seconde est recommandée.

TutorialCard.tsx

tsx

1import type { FC, ReactNode } from "react";
2
3interface TutorialCardProps {
4  id: string;
5  title: string;
6  level: "Beginner" | "Intermediate" | "Advanced";
7  duration: number;
8  color: string;
9  onSelect?: (id: string) => void; // prop optionnelle
10  children?: ReactNode;             // contenu JSX optionnel
11}
12
13// Syntaxe recommandée — pas de React.FC
14function TutorialCard({
15  id,
16  title,
17  level,
18  duration,
19  color,
20  onSelect,
21  children,
22}: TutorialCardProps) {
23  return (
24    <div
25      className="tutorial-card"
26      style={{ borderColor: color }}
27      onClick={() => onSelect?.(id)}
28    >
29      <h3>{title}</h3>
30      <span className={`badge level-${level.toLowerCase()}`}>{level}</span>
31      <span>{duration} min</span>
32      {children}
33    </div>
34  );
35}
36
37export default TutorialCard;

Step 2

Typer useState et useRef

TypeScript peut inférer le type de useState depuis la valeur initiale. Mais pour null ou des unions, il faut annoter explicitement.

TutorialCard.tsx

tsx

1import type { FC, ReactNode } from "react";
2
3interface TutorialCardProps {
4  id: string;
5  title: string;
6  level: "Beginner" | "Intermediate" | "Advanced";
7  duration: number;
8  color: string;
9  onSelect?: (id: string) => void; // prop optionnelle
10  children?: ReactNode;             // contenu JSX optionnel
11}
12
13// Syntaxe recommandée — pas de React.FC
14function TutorialCard({
15  id,
16  title,
17  level,
18  duration,
19  color,
20  onSelect,
21  children,
22}: TutorialCardProps) {
23  return (
24    <div
25      className="tutorial-card"
26      style={{ borderColor: color }}
27      onClick={() => onSelect?.(id)}
28    >
29      <h3>{title}</h3>
30      <span className={`badge level-${level.toLowerCase()}`}>{level}</span>
31      <span>{duration} min</span>
32      {children}
33    </div>
34  );
35}
36
37export default TutorialCard;

Section 2

Custom hooks typés

Step 3

Écrire un hook générique

Les custom hooks en TypeScript peuvent être génériques pour être réutilisables tout en restant typés.

TutorialCard.tsx

tsx

1import type { FC, ReactNode } from "react";
2
3interface TutorialCardProps {
4  id: string;
5  title: string;
6  level: "Beginner" | "Intermediate" | "Advanced";
7  duration: number;
8  color: string;
9  onSelect?: (id: string) => void; // prop optionnelle
10  children?: ReactNode;             // contenu JSX optionnel
11}
12
13// Syntaxe recommandée — pas de React.FC
14function TutorialCard({
15  id,
16  title,
17  level,
18  duration,
19  color,
20  onSelect,
21  children,
22}: TutorialCardProps) {
23  return (
24    <div
25      className="tutorial-card"
26      style={{ borderColor: color }}
27      onClick={() => onSelect?.(id)}
28    >
29      <h3>{title}</h3>
30      <span className={`badge level-${level.toLowerCase()}`}>{level}</span>
31      <span>{duration} min</span>
32      {children}
33    </div>
34  );
35}
36
37export default TutorialCard;

Topics and skills covered

TypeScript
React
Props typing
Custom hooks

Génériques — Écrire du code réutilisable

Ch.1

Configuration TypeScript et bonnes pratiques

Ch.2