Middle kick
Marketing vs Développement : une guerre éternelle et un amas de dette technique
Voir plus
/https://medias.yama-cms.com/fbe88647624e76d5bcdec2d0e89dc506/2025-03/67d3ee44b7ec0106527189.png)
ts-pattern
permet d’émuler un système de pattern matching en Typescript. Il est possible de match sur la forme d’un objet (les valeurs qu’il contient), de le destructurer, et de s’assurer que le match est exhaustif (ce qui veut dire qu’on a un pattern pour chaque possibilités).
Cette librairie permet aussi d’émuler des variants (des formes différentes d’un objet, mais associées au même Type) en utilisant un “tag” (ici le champ type
).
import { match, P } from 'ts-pattern';
type Data =
| { type: 'text'; content: string }
| { type: 'img'; src: string };
type Result =
| { type: 'ok'; data: Data }
| { type: 'error'; error: Error };
const result: Result = ...;
const html = match(result)
.with({ type: 'error' }, () => <p>Oups! An error occured</p>)
.with({ type: 'ok', data: { type: 'text' } }, (res) => <p>{res.data.content}</p>)
.with({ type: 'ok', data: { type: 'img', src: P.select() } }, (src) => <img src={src} />)
.exhaustive();
L’article d’introduction écrit par l’auteur rentre plus dans les détails, en particulier l’intérêt des variants, une comparaison du pattern matching et d’autre flow-control (if/then/else, ternaires) : Bringing Pattern Matching to TypeScript 🎨 Introducing TS-Pattern (anglais).