【Typescript5.4】NoInferを活用して型安全なUIコンポーネントを設計する

はじめに Webエンジニアをしております齋藤です。最近 Typescript の 5.4 がリリースされました その中でも注目度が高い機能がNoInferという新しい Utility Type です。今回はフロントエンドのコンポーネント設計において、この NoInfer をどう活用できるのかを考えていきたいと思います。 NoInfer とは そもそもNoInferとは何なのでしょうか。NoInfer は不要な型推論を抑制してくれる Utility Type です。言葉で説明してもピンとこないかと思うので、Typescript5.4 リリースノートに記載されているサンプルコードを読んでみましょう function createStreetLight<C extends string>(colors: C[], defaultColor?: C) { ... } createStreetLig