web-dev-qa-db-ja.com

TypeScriptでCSSカラーのタイプを定義するにはどうすればよいですか？

次のサンプルコードスニペットがあります。

_type Color = string;

interface Props {
    color: Color;
    text: string;
}

function Badge(props: Props) {
    return `<div style="color:${props.color}">${props.text}</div>`;
}

var badge = Badge({
    color: '#F00',
    text: 'Danger'
});

console.log(badge);
_

遊び場

次のように色が無効な場合、ビルドエラーを取得しようとしています。

_var badge = Badge({
    color: 'rgba(100, 100, 100)',
    text: 'Danger'
});
_

次のパターンのいずれかに一致する文字列のみを許可するようにColorを定義する方法はありますか？

  • _#FFF_
  • _#FFFFFF_
  • rgb(5, 5, 5)
  • rgba(5, 5, 5, 1)
  • hsa(5, 5, 5)

redやwhiteのような色があることに気づきましたが、Colorがそれらを受け入れることができる場合、これは答えるのを難しくするかもしれません。

typescripttypes
13
styfle

パターンに一致する文字列のタイプ （正規表現など）の提案がありましたが、その提案はまだ実現していません。

その結果、TypeScript 2.2では、残念ながら要求することは不可能です。

9
Madara Uchiha

一般的な意味ではまだこれを行うことはできませんが、明確に定義された色のセットがある場合は、定数と文字列リテラルタイプを使用できます。

type Color = "#FFFFFF" | "#FF0000" | "#0000FF";
const WHITE: Color = "#FFFFFF";
const RED: Color = "#FF0000";
const BLUE: Color = "#0000FF";

明らかに、これはany colorを許可したい場合には実用的ではありませんが、実際にはおそらくdoはとにかく再利用可能なcolor変数を必要としています。

私のプロジェクトでは、スクリプトを使用して、一連のCSSプロパティを定義するcolors.cssファイルから同様のファイルを生成します。

:root {
  --primary-red: #ff0000;
  --secondary-red: #993333;
  /* etc */
}

これは次のように変換されます：

export const primaryRed: Color = "#ff0000";
export const secondaryRed: Color = "#993333";
// etc
export type Color = "#ff0000" | "#993333" // | etc...

そして私はそれを次のように使います：

import {primaryRed} from "./Colors.ts";

interface BadgeProps {
    color: Color;
    text: string;
}  

var badge = Badge({
    color: primaryRed,
    text: 'Danger'
});
6
Aaron Beall