Typescriptにおけるカラーコードの文字列型の定義方法 - typeとinterfaceの比較と使い分け
カラーコードを入れるための変数の型を定義したかったんだけど、interfaceとtype どちらを使えばいいか曖昧だったのでまとめといた。
Typescriptでカラーコードの文字列を扱う変数の型を定義する方法には、typeとinterfaceの2つのアプローチがあるが、それぞれの違い 向き不向き どちらを使うべきか。
1.-typeを使う
type ColorCode = string;
typeキーワードを使用して型エイリアスを定義。ColorCodeはstring型の別名として定義される。
type ColorCode = `#${string}`;
テンプレートリテラルを使用することで、カラーコードの文字列を#で始まるものに制約することができる。
この書き方だと#
から始まる文字列ってことしか制限できないけど、とりあえず大体の制限は設けられる。
2- interfaceの使用
interfaceを使用してオブジェクトの形状を定義。ColorCodeはvalueプロパティを持つオブジェクトの形状を表jsu。この方法では、カラーコードを表すオブジェクトを宣言し、valueプロパティにカラーコードの文字列を格納する。
interface ColorCode { value: string; }
interfaceの利点:
カラーコード以外の文字列を受け入れない制約がある(あとから拡張とかできない)。 オブジェクトの形状を詳細に制御できる。 interfaceの制限:
シンプルな型エイリアスよりも記述が煩雑になる場合がある。 実際にこの型で宣言した変数に値を代入しようとすると
const color:ColorCodes = {value: '#000000'}
というオブジェクトになってしまい冗長な感じになる。また制限をがかけられないので、別途ベリデーションを作る必要がある。
interface ColorCode extends String {}
という風にもできるけど、多少の制限がワンラインでかけられるtype使う方が今回はよさそう