J'ai un problème délicat avec TypeScript.
Supposons que j'ai un composant icône avec une taille d'accessoire. La taille peut être « 2 », « 4 », « 6 ». Je mappe ces valeurs à une classe de vent arrière prédéfinie.
Alors je tape comme ça
type SizeValues = '2' | '4' | '6';
function Icon({size = '4'}: {size: SizeValues}) {
const sizeMap = {
'2': 'w-2 h-2',
'4': 'w-4 h-4',
'6': 'w-6 h-6',
};
return <span className={sizeMap[size]}>My icon goes here</span>
}
<Icon size="sm" />
Tout va bien. Mais que se passe-t-il si je souhaite avoir des tailles différentes en fonction de la taille de mon écran ? Je veux donc essayer d’avoir une bonne grammaire qui se passe bien.
J'ai donc réécrit le composant Icon comme suit :
type SizeValues = ???
function Icon({size = '4'}: {size: SizeValues}) {
const sizeMap = {
'2': 'w-2 h-2',
'4': 'w-4 h-4',
'6': 'w-6 h-6',
'md:2': 'md:w-2 md:h-2',
'md:4': 'md:w-4 md:h-4',
'md:6': 'md:w-6 md:h-6',
'lg:2': 'lg:w-2 lg:h-2',
'lg:4': 'lg:w-4 lg:h-4',
'lg:6': 'lg:w-6 lg:h-6',
};
return <span className={size.split(' ').map(s => sizeMap[s]).join(' ').trim()}>My icon goes here</span>
}
<Icon size="2 md:4 lg:6" />
Cela fonctionne très bien, mais comment puis-je y accéder ? J'ai lu que TypeScript prendrait en charge les expressions régulières à l'avenir. Cela facilitera les choses, mais puis-je taper ceci maintenant ?
Ce n'est pas un composant réel, alors s'il vous plaît, ne me donnez pas de bonnes suggestions sur la façon de l'améliorer. Je me demande simplement comment saisir mon attribut de taille pour qu'il fonctionne comme je l'ai codé.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tout d'abord, nous devons extraire
sizeMapdans la portée globale et const assert pour faire savoir au compilateur qu'il s'agit d'une constante immuable et l'empêcher d'étendre le type :const sizeMap = { '2': 'w-2 h-2', '4': 'w-4 h-4', '6': 'w-6 h-6', 'md:2': 'md:w-2 md:h-2', 'md:4': 'md:w-4 md:h-4', 'md:6': 'md:w-6 md:h-6', 'lg:2': 'lg:w-2 lg:h-2', 'lg:4': 'lg:w-4 lg:h-4', 'lg:6': 'lg:w-6 lg:h-6', } as const;Ensuite, nous devons obtenir le type de clé de
sizeMap:Mise en œuvre : Nous allons créer un type qui accepte une chaîne et renvoie cette chaîne si elle est valide, sinon, renvoie
never;Pseudo-code :
Laissez le type accepter
T- 要验证的字符串，Original- 原始字符串，AlreadyUsed- l'union des clés utilisées.Si
Test la chaîne vide-
AlreadyUsed, suivi d'un espace et de la chaîne restante (- break).
ClassName
.Retour
ClassName), exclut原始Sinon, siT以大小映射 (ClassName) 的键开头，不包括AlreadyUsed，后跟一个空格和剩余的字符串(休息commence par la clé de la carte de taille (
etRest作为字符串传递以验证Original，并将AlreadyUsedAppelez ce type de manière récursive, en y ajoutantT是尺寸映射的键，不包括AlreadyUsedSinon, si- est la clé de la carte des tailles, à l'exclusion de
-
Sinon
原始AlreadyUsed从不RetourRetour
jamais
Mise en œuvre :Item添加一个通用参数来表示大小type _SizeValue< T extends string, Original extends string = T, AlreadyUsed extends string = never > = T extends "" ? Original : T extends `${infer ClassName extends Exclude< SizeMapKeys, AlreadyUsed >} ${infer Rest extends string}` ? _SizeValue<Rest, Original, AlreadyUsed | ClassName> : T extends Exclude<SizeMapKeys, AlreadyUsed> ? Original : never;size在组件中是可选的，因此我们将在SizeValue周围添加一个包装器，它将把string | undefined到string并将其传递给_SizeValueNous devons ajouter un paramètre commun à Item pour représenter lasize.
function Icon<T extends string | undefined>({ size, }: { size: _SizeValue<T>; }) { return null; }Puisque size est facultatif dans le composant, nous ajouterons un wrapper autour de SizeValue qui convertira
string | undefined en 🎜string et le transmettra à 🎜_SizeValue , en plus nous ajouterons une valeur par défaut pour la taille : 🎜type SizeValue<T extends string | undefined> = _SizeValue<NonNullable<T>>; function Icon<T extends string | undefined>({ size = "2", }: { size?: SizeValue<T> | "2"; }) { return null; }🎜Utilisation : 🎜 🎜🎜Aire de jeux🎜🎜