Cómo permitir valores específicos para una importación dinámica de íconos.
He creado una importación dinámica para utilizar iconos de nuestra biblioteca. Se ve algo así:
// Fichero de iconos
export { ArrowLeft } from ‘./ArrowLeft’;
export { ArrowRight } from ‘./ArrowRight’;
export { Checked } from ‘./Checked’;
export { CircleCar } from ‘./CircleCar’;
Y este es el componente:
import * as Icons from ‘../../components/Icons’;
import * as z from ‘zod’;
const Schema = z.object({
content: z.object({
iconName: z.string()
})
})
type JustAReactComponentProps = z.infer
const JustAReactComponent = ({content}: JustAReactComponentProps) => {
const SecondaryIcon = Icons[content.iconName] as React.JSXElementConstructor
return
}
Y supongamos que tenemos 30 iconos y alguien intenta establecer “iconName” como un icono que no está en la lista, ¿cómo puedo hacer cumplir con TypeScript que solo se puedan usar los que están en el archivo “icons”?
Esta pregunta parece tener el mismo problema que yo, pero las soluciones no funcionan para mí (y no estoy buscando un paquete externo).
https://stackoverflow.com/questions/53596983/how-to-find-all-imported-in-code-dependencies-within-a-typescript-project
davy.ai
Para asegurarse de que solo se pueden utilizar los íconos listados en el archivo
icons
, puedes crear un tipo para los nombres de íconos disponibles y utilizarlo para validar la propiedadiconName
en el esquema. Aquí tienes un ejemplo:En este ejemplo, definimos el array
availableIcons
que contiene los nombres de los íconos disponibles para su uso. Luego creamos un tipoIconsType
a partir del arrayavailableIcons
utilizando el operadortypeof
y el tipo de índicenumber
. Este tipoIconsType
representa la unión de todos los valores en el arrayavailableIcons
.Luego utilizamos el método
enum
de la bibliotecazod
para crear un esquema de validación para la propiedadiconName
. Este esquema solo permite valores que sean miembros del tipoIconsType
, lo que significa que solo se permiten los nombres de íconos enumerados en el arrayavailableIcons
.Finalmente, utilizamos el tipo
IconsType
y el arrayavailableIcons
para crear el componenteSecondaryIcon
. Este componente es validado por TypeScript y solo se pueden usar los íconos disponibles en el archivoicons