Existuje nějaký způsob, jak zjistit typ action.payload pomocí strojopis?

hlasů
1

Mám spoustu akcí a chci zjistit typ mého nákladu do v určitém casev mém reduktoru v závislosti na typu akce.

Teď nevím, co je v užitečného zatížení:

function someReducer(state: ISomeState = getDefaultSomeState(), action) {
    switch (action.type) {
        case FIRST: {
            // What is type of action.payload?
            return {...};
        }
        default: {
            return state;
        }
    }
}
Položena 02/12/2019 v 23:57
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
1

Typ strážců je strojopis funkce umožňuje zúžit typ objektu v rámci podmíněného bloku. To znamená, že můžete určit typ proměnné pomocí podmínek a spínače.

Jak to funguje?

Řekněme, že máme dvě rozhraní a objekt:

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

Pojďme přidat některé funkce na našich rozhraních

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");
}

Takže teď můžeme rozlišit druhy svazu.

Pojďme se podívat, jak ji můžeme použít v našich aplikací

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;
        }
    }
}

Pokud máte mnoho typů akcí nemůžete odpovědět na tyto otázky s jistotou. Ano, můžeme pomoci strojopisem pomoz nám.

Podívejme se na souboru deklarovat naše akce:

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

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

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

A naše reduktor:

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;
        }
    }
}

No, pokud jste rozvíjet pomocí strojopis a Redux, použijte typ stráže taky. To bude určitě ušetří čas pro vás a váš tým.

Můžete také přečíst o dalších pokročilých funkcí strojopisem

Odpovězeno 02/12/2019 v 23:57
zdroj uživatelem

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