TypeScript で Enum をもっと使いやすく! 特定の項目を除外してスッキリコード
TypeScript で Enum から特定の項目を除外する方法
このチュートリアルでは、TypeScript で Enum から特定の項目を除外する方法をいくつか紹介します。
never を使用する
never
型を使用すると、特定の値が Enum に存在しないことを明示的に示すことができます。
enum Color {
Red,
Green,
Blue,
// Yellow を除外
never: "yellow"
}
この例では、Yellow
は Color
Enum に存在しないことが明確になります。
const を使用する
const
キーワードを使用すると、特定の値を Enum に固定し、変更できないようにすることができます。
enum Color {
Red = "red",
Green = "green",
Blue = "blue",
// Yellow を除外
Yellow = "yellow" as const
}
型エイリアスを使用する
型エイリアスを使用すると、Enum の一部のサブセットを定義することができます。
type PrimaryColor = Color.Red | Color.Green | Color.Blue;
// PrimaryColor は Red、Green、Blue のみを含む
この例では、PrimaryColor
型は Color
Enum の Red
、Green
、Blue
のみを表します。
カスタム型ガードを使用する
カスタム型ガードを使用すると、特定の値が Enum に存在するかどうかを動的にチェックすることができます。
enum Color {
Red = "red",
Green = "green",
Blue = "blue",
Yellow = "yellow"
}
function isPrimaryColor(color: Color): color is PrimaryColor {
return color === Color.Red || color === Color.Green || color === Color.Blue;
}
// isPrimaryColor を使用して PrimaryColor 型にキャスト
const primaryColor: PrimaryColor = Color.Green;
この例では、isPrimaryColor
関数は、引数が PrimaryColor
型かどうかを判断します。
enum Color {
Red,
Green,
Blue,
// Yellow を除外
never: "yellow"
}
function getColorName(color: Color): string {
switch (color) {
case Color.Red:
return "赤";
case Color.Green:
return "緑";
case Color.Blue:
return "青";
default:
return "想定外の値です";
}
}
const selectedColor: Color = Color.Red;
console.log(`選択された色は ${getColorName(selectedColor)} です。`); // 出力: 選択された色は 赤 です。
enum Color {
Red = "red",
Green = "green",
Blue = "blue",
// Yellow を除外
Yellow = "yellow" as const
}
function isPrimaryColor(color: Color): boolean {
return color === Color.Red || color === Color.Green || color === Color.Blue;
}
const primaryColor: Color = Color.Red;
const isYellow: boolean = isPrimaryColor(Color.Yellow); // false
console.log(`Yellow はプライマリカラーですか?: ${isYellow}`); // 出力: Yellow はプライマリカラーですか?: false
enum Color {
Red = "red",
Green = "green",
Blue = "blue",
Yellow = "yellow"
}
type PrimaryColor = Color.Red | Color.Green | Color.Blue;
function isPrimaryColor(color: Color): color is PrimaryColor {
return color === Color.Red || color === Color.Green || color === Color.Blue;
}
const primaryColor: PrimaryColor = Color.Green;
console.log(`primaryColor はプライマリカラーですか?: ${isPrimaryColor(primaryColor)}`); // 出力: primaryColor はプライマリカラーですか?: true
enum Color {
Red = "red",
Green = "green",
Blue = "blue",
Yellow = "yellow"
}
function isPrimaryColor(color: Color): color is PrimaryColor {
return color === Color.Red || color === Color.Green || color === Color.Blue;
}
function getColorName(color: Color): string {
if (isPrimaryColor(color)) {
switch (color) {
case Color.Red:
return "赤";
case Color.Green:
return "緑";
case Color.Blue:
return "青";
}
} else {
return "想定外の値です";
}
}
const selectedColor: Color = Color.Green;
console.log(`選択された色は ${getColorName(selectedColor)} です。`); // 出力: 選択された色は 緑 です。
ジェネリック型を使用する
ジェネリック型を使用すると、Enum の型を動的に生成することができます。
enum Color<T extends string> {
Red = "red",
Green = "green",
Blue = "blue",
// Yellow を除外
// 他の色を追加可能
}
type PrimaryColor = Color<"red" | "green" | "blue">;
const primaryColor: PrimaryColor = Color.Green;
この例では、Color
Enum はジェネリック型として定義され、T
型パラメータを受け取ります。T
型パラメータは、Enum の値の型を表します。PrimaryColor
型は、Color
Enum のサブセットを表すために使用されます。
Union 型を使用する
Union 型を使用すると、複数の種類の値を表現することができます。
enum PrimaryColor {
Red = "red",
Green = "green",
Blue = "blue"
}
enum SecondaryColor {
Yellow = "yellow",
Orange = "orange"
}
type Color = PrimaryColor | SecondaryColor;
function getColorName(color: Color): string {
switch (color) {
case PrimaryColor.Red:
return "赤";
case PrimaryColor.Green:
return "緑";
case PrimaryColor.Blue:
return "青";
case SecondaryColor.Yellow:
return "黄色";
case SecondaryColor.Orange:
return "オレンジ";
default:
return "想定外の値です";
}
}
const selectedColor: Color = PrimaryColor.Red;
console.log(`選択された色は ${getColorName(selectedColor)} です。`); // 出力: 選択された色は 赤 です。
この例では、PrimaryColor
と SecondaryColor
という 2 つの Enum を定義します。Color
型は、PrimaryColor
と SecondaryColor
の Union 型として定義されます。
カスタムロジックを使用する
カスタムロジックを使用すると、より複雑な条件で Enum から項目を除外することができます。
enum Color {
Red = "red",
Green = "green",
Blue = "blue",
Yellow = "yellow",
Pink = "pink"
}
function isPrimaryColor(color: Color): boolean {
return color === Color.Red || color === Color.Green || color === Color.Blue;
}
function isWarmColor(color: Color): boolean {
return color === Color.Red || color === Color.Yellow || color === Color.Orange;
}
function getColorInfo(color: Color): string {
if (isPrimaryColor(color)) {
return `プライマリカラー: ${color}`;
} else if (isWarmColor(color)) {
return `暖色: ${color}`;
} else {
return `その他の色: ${color}`;
}
}
const selectedColor: Color = Color.Pink;
console.log(getColorInfo(selectedColor)); // 出力: その他の色: pink
typescript