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')} /> }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] }