TSKaigi

トーク

TSConfig Solution Style & subpath imports でファイル単位で型を切り替える
LT
TSConfig Solution Style & subpath imports でファイル単位で型を切り替える
DAY1 / 15:00 〜 15:30アセンドトラック

Node.js の subpath imports を使うと特定の条件下において参照されるモジュールを切り替えることが可能になるため test や Storybook でモックする手法としてたびたび紹介されます。

ニッチではありますが、特定ファイルでのみ型の参照を切り替える方法として TSConfig の Solution Style と組み合わせて開発者体験を向上させた事例をご紹介します。

具体的には gql.tada による Fragment Colocation が Storybook 体験を複雑化させてしまう問題に対して、.stories.tsx ファイルでは fragment masking を解除させることで型をシンプルにし、Story によってはコード量を25~30%削減させることに成功しました。

kotori

kotori

株式会社Gaudiy / フロントエンドエンジニア

株式会社Gaudiyのフロントエンドエンジニア。Enablingチームに所属しフロントエンドエコシステムの改善や開発者体験の向上に努めている。自動化や効率化が得意。

XGitHub