web-dev-qa-db-fra.com

Comment puis-je définir un type pour une couleur CSS dans TypeScript?

J'ai l'exemple d'extrait de code suivant:

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);

Aire de jeux

J'essaie d'obtenir une erreur de construction si la couleur n'est pas valide, comme ceci:

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

Existe-t-il un moyen de définir Color afin qu'il autorise uniquement les chaînes correspondant à l'un des modèles suivants?

  • #FFF
  • #FFFFFF
  • rgb(5, 5, 5)
  • rgba(5, 5, 5, 1)
  • hsa(5, 5, 5)

Je me rends compte qu'il existe des couleurs comme red et white mais cela pourrait rendre la réponse plus difficile si Color peut les accepter.

typescripttypes
13
styfle

Il y avait une proposition pour n type de chaîne qui correspond à un modèle (regex ou autre), mais cette proposition n'a pas encore abouti.

En conséquence, ce que vous demandez est malheureusement impossible à partir de TypeScript 2.2.

9
Madara Uchiha

Vous ne pouvez pas encore le faire dans un sens général, mais vous pouvez utiliser des constantes et des types littéraux de chaîne si vous avez un ensemble de couleurs bien défini:

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

De toute évidence, cela ne sera pas pratique si vous souhaitez autoriser n'importe quelle couleur, mais en réalité vous avez probablement ne voulez de toute façon avoir des variables de couleur réutilisables.

Dans mon projet, j'utilise un script pour générer un fichier similaire à partir de mon colors.css fichier qui définit un tas de propriétés CSS:

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

Qui est converti en:

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

Et je l'utiliserais comme:

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

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

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