0
328
VistasTipos de devolución condicional en mecanografiado
Estoy tratando de recorrer una serie de funciones (haciendo llamadas de red) que devuelven diferentes tipos de objetos de configuración. Basado en esta configuración, estoy renderizando componentes de reacción con diferentes accesorios. Pero estoy luchando para que el texto mecanografiado coopere en esto.
Aquí hay un ejemplo simplificado de lo que tenía hasta ahora;
type FirstConfig = { a: 'a'; }; type SecondConfig = { b: 'b'; }; type ConfigObject = FirstConfig | SecondConfig; type ConfigFunction = () => ConfigObject; const configArray: ConfigFunction[] = [() => ({ a: 'a' }), () => ({ b: 'b' })]; configArray.map(getConfig => { const { a, b } = getConfig(); console.log(a, b); }); Cada vez que recorro la matriz de funciones de configuración y la llamo, parece quejarse de que ninguna de las propiedades definidas en ConfigObject está presente. ¿Algún consejo/guía aquí?
1 Respuestas
Responde la pregunta0
Este es el comportamiento esperado. Su ConfigObject es FirstConfig o SecondConfig . Antes de acceder a sus distintas propiedades, debe resolver su tipo o si la propiedad existe en ese tipo.
Hay diferentes maneras de lograr esto.
- Defina un protector de tipo personalizado para verificar un tipo.
const isFirstConfig = (config: ConfigObject): config is FirstConfig => !!(config as any).a;
- Comprobar si la propiedad existe en el objeto
const config = getConfig(); if ("a" in config) { // the config is of FirstConfig type here }- Agregue una propiedad común para todos los tipos de configuración mediante la cual puede verificar su tipo
type FirstConfig = { type: "first"; a: "a"; }; type SecondConfig = { type: "second"; b: "b"; };entonces puedes verificar tipos como este
const config = getConfig(); if (config.type === "first") { console.log("first type"); // config is FirstConfig type in this 'if' block }- Tener un tipo para todas las configuraciones con propiedades establecidas como opcionales
type ConfigObject = { a?: "a"; b?: "b"; };En este caso puedes escribir tu código inicial:
const { a, b } = getConfig(); console.log({ a, b });