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使う方が今回はよさそう