03 / Article -- 記事組版
記事ページの組版サンプル
TypeScript で始めるデザインシステムの型安全な管理
デザインシステムの運用において、カラートークンやスペーシング値を TypeScript の型で管理することで、開発時のミスを大幅に減らせます。この記事では、as const と Template Literal Types を活用した実装パターンを紹介します。
1. デザイントークンの型定義
まず、カラーパレットを as const で定義します。これにより、TypeScript がリテラル型として推論し、存在しない色名を参照した際にコンパイルエラーが発生します。
// デザイントークンの型安全な定義 const colors = { primary: "#3ea8ff", danger: "#f43f5e", text: "rgba(0,0,0,0.82)", } as const; type ColorKey = keyof typeof colors;
font-family のフォールバックチェーンも同様に管理できます。Zenn では -apple-system を先頭に配置し、ヒラギノ角ゴ ProN、Meiryo と続くシステムフォント構成を採用しています。Qiita の YakuHanJPs のような Web フォントは使用していません。