TypeScript初心者へ送る、もう一歩先のTypeScript

ARANK

とりあえず型を書いている人へどうも、よだかです。この記事はTSKaigi Advent Calendar 2024の16日目の記事です。TypeScript初級者の方のために、自分が実際にコードを書いている時によく使うTypeScriptのテクニックをまとめてみました。参考になれば幸いです。タグ付きユニオン「タグ付きユニオン（Tagged Union）」は、「判別可能なユニオン（Discriminated Union）」と呼ばれることもあります。簡単に言うと、タグとなるプロパティを定義したユニオン型を定義し、TypeScriptがそのタグの値を読んで、ユニオンで渡している型の中から適切な型を推論できるようにさせるということです。使い方以下の例では、typeというプロパティをタグに、判別可能なユニオン型を定義しています。 type Rectangle = { type: "rectangle"; width: number; height: number }; type Circle = { type: "circle"; radius: number } type Shape = Circle Rectangle function calculateArea(shape: Shape): number { switch (shape.type) { case "circle": return Math.PI * shape.radius ** 2; case "rectangle": return shape.width *…