Existe alguma maneira de detectar tipo de action.payload usando typescript?

votos
1

Eu tenho um monte de ações e eu quero detectar um tipo de minha carga em um específica casena minha redutor dependendo do tipo de ação.

Agora eu não sei o que está em uma carga útil:

function someReducer(state: ISomeState = getDefaultSomeState(), action) {
    switch (action.type) {
        case FIRST: {
            // What is type of action.payload?
            return {...};
        }
        default: {
            return state;
        }
    }
}
Publicado 02/12/2019 em 23:57
fonte usuário
Em outras línguas...                            


1 respostas

votos
1

Tipo Guards é característica original datilografado permite diminuir o tipo de um objeto dentro de um bloco condicional. Isso significa que você pode especificar o tipo de sua variável usando condições e switches.

Como funciona?

Vamos dizer que temos duas interfaces e um objeto:

interface IDog {
    woof();
}

interface ICat {
    meow();
}

const animal: IDog | ICat = getAnimal();

animal.woof(); // can we do it? ...typescript don't know because animal may be a kitten

Vamos adicionar alguns recursos para nossas interfaces

interface IDog {
    type: "Dog"; // yes, type of type is just a string literal
    woof();
}

interface ICat {
    type: "Cat";
    meow();
}

const animal: IDog | ICat = getAnimal();

switch (animal.type) {
    case "Dog":
        animal.woof(); // now we are sure that animal has woof because only Dog has this method
        return;
    case "Cat":
        animal.meow(); // typescript understands what type we are using now
        return;
    default:
        throw Error("I don't know given animal");
}

Então, agora podemos diferenciar tipos de união.

Vamos olhar como podemos usá-lo em nossas aplicações

function someReducer(state: ISomeState = getDefaultSomeState(), action) {
    switch (action.type) {
        case "FIRST": {
            // What is inside action.payload?
            return {...};
        }
        case "SECOND": {
            // Does action.payload have a name property?
            return {...};
        }
        default: {
            return state;
        }
    }
}

Se você tem muitos tipos de ação que você não pode responder a estas perguntas com confiança. Então, nós podemos ajudar a ajuda typescript nós.

Vamos olhar arquivo declarando nossas ações:

interface IFirstAction {
    type: "FIRST";
    payload: {
        name: string;
    };
}

interface ISecondAction {
    type: "SECOND";
    payload: {
        age: number;
    };
}

// we declare union type here
export type TAction =
    IFirstAction |
    ISecondAction;

E o nosso redutor:

function someReducer(state: ISomeReducerState = getDefaultSomeState(), action: TAction) {
    switch (action.type) {
        case "FIRST": {
            // What is inside action.payload?
            // Even our favourite IDE will tell us that action.payload has a name property
            // And the name is a string
            return {...};
        }
        case "SECOND": {
            // Does action.payload have a name property?
            // Nope, action.payload has an age property only
            return {...};
        }
        default: {
            return state;
        }
    }
}

Bem, se você desenvolver usando typescript e redux, use Tipo Guards também. Ele vai certamente poupar tempo para você e sua equipe.

Você também pode ler sobre outros recursos avançados typescript

Respondeu 02/12/2019 em 23:57
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more