Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

167
Views
¿Cómo puedo discriminar una unión de interfaces usando un mapa de objetos sin declaración de cambio?

Soy bastante nuevo en conceptos avanzados de mecanografiados, así que tengan paciencia conmigo. Tengo una serie de proyectos que usan objetos para mapear componentes de reacción por algún accesorio común (por ejemplo, _type).

Lo que quiero hacer es devolver automáticamente el tipo correcto para el componente resuelto usando estos mapas de objetos, sin embargo, solo recibo un tipo de any cuando intento esto.

Muchas publicaciones en línea recomiendan usar la declaración de cambio (ejemplo a continuación). Nuestra empresa utiliza el patrón de mapa de objetos, por lo que me gustaría evitar el uso de declaraciones de cambio si es posible. Gracias. Para mayor contexto, este es nuestro primer proyecto de reacción usando mecanografiado (pasando de javascript).

 // types type AnimalType = 'cat' | 'dog' interface Cat { _type: AnimalType name: string onMeow: () => void } interface Dog { _type: AnimalType name: string onBark: () => void } type Animal = Cat | Dog type AnimalMap = { [property in Animal['_type']] }
 // THIS WORKS BUT WE DON'T WANT TO USE THIS // resolving animal type via switch const CatComponent = ({ _type, name, onMeow }: Cat) => <div>I'm a cat!</div> const DogComponent = ({ _type, name, onBark }: Dog) => <div>I'm a dog!</div> function resolveAnimal(_type: AnimalType): React.Component<Animal> { switch(_type) { case "dog": return DogComponent case "cat": return CatComponent } return animalMap[_type] }
 // THIS DOESN'T WORK, WE'D LOVE TO USE THIS! // resolving animal type via object map const animalMap: AnimalMap = { cat: CatComponent, dog: DogComponent, } function resolveAnimal(_type: AnimalType): React.Component<Animal> { return animalMap[_type] } function App() { const ResolvedAnimalComponent = resolveAnimal('dog') return <ResolvedAnimalComponent onBark={() => console.log('HE BARKED')} /> }
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Elimine la notación explícita de : AnimalMap para que los valores de declaración de objeto no se amplíen; desea que TypeScript vea

 const animalMap: { cat: CatComponent, dog: DogComponent, }

no

 const animalMap: AnimalMap

(no solo porque su AnimalMap no anota los valores, los componentes, sino también porque no vincula las propiedades a sus componentes)

Usar

 const animalMap = { cat: CatComponent, dog: DogComponent, } function resolveAnimal<T extends keyof typeof animalMap>(_type: T) { return animalMap[_type] }
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!