es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo permitir valores específicos para una importación dinámica de íconos.

06 Aug, 2023 Programación

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;//¿Es este el tipo correcto, por cierto?
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

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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 propiedad iconName en el esquema. Aquí tienes un ejemplo:

    // archivo icons
export const availableIcons = ['ArrowLeft', 'ArrowRight', 'Checked', 'CircleCar'] as const;

export type IconsType = typeof availableIcons[number];

export { ArrowLeft } from './ArrowLeft';
export { ArrowRight } from './ArrowRight';
export { Checked } from './Checked';
export { CircleCar } from './CircleCar';

// componente
import * as Icons from '../../components/Icons';
import * as z from 'zod';
import { availableIcons, IconsType } from '../../components/Icons';

const Schema = z.object({
  content: z.object({
    iconName: z.enum(availableIcons)
  })
});

type JustAReactComponentProps = z.infer<typeof schema="">;

const JustAReactComponent = ({ content }: JustAReactComponentProps) => {
  const SecondaryIcon = Icons[content.iconName] as React.JSXElementConstructor<any>;
  return <secondaryicon></secondaryicon>;
};

    En este ejemplo, definimos el array availableIcons que contiene los nombres de los íconos disponibles para su uso. Luego creamos un tipo IconsType a partir del array availableIcons utilizando el operador typeof y el tipo de índice number. Este tipo IconsType representa la unión de todos los valores en el array availableIcons.

    Luego utilizamos el método enum de la biblioteca zod para crear un esquema de validación para la propiedad iconName. Este esquema solo permite valores que sean miembros del tipo IconsType, lo que significa que solo se permiten los nombres de íconos enumerados en el array availableIcons.

    Finalmente, utilizamos el tipo IconsType y el array availableIcons para crear el componente SecondaryIcon. Este componente es validado por TypeScript y solo se pueden usar los íconos disponibles en el archivo icons

Comments are closed.