Czy istnieje jakiś sposób, aby wykryć rodzaj action.payload użyciu maszynopis?

głosy
1

Mam wiele działań i chcę wykryć rodzaj ładunku do mojego w określonej casew moim reduktora w zależności od rodzaju działania.

Teraz nie wiem, co jest w bloku danych:

function someReducer(state: ISomeState = getDefaultSomeState(), action) {
    switch (action.type) {
        case FIRST: {
            // What is type of action.payload?
            return {...};
        }
        default: {
            return state;
        }
    }
}
Utwórz 02/12/2019 o 23:57
źródło użytkownik
W innych językach...                            


1 odpowiedzi

głosy
1

TYP Gwardii is nagranie funkcja umożliwia zawężenie typ obiektu w obrębie bloku warunkowego. Oznacza to, że można określić typ zmiennej z użyciem warunków i przełączników.

Jak to działa?

Powiedzmy, że mamy dwa interfejsy i obiekt:

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

Dodajmy pewne cechy naszych interfejsów

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

Więc teraz możemy rozróżnić typy związków.

wygląd Spójrzmy prawdzie w jaki sposób możemy wykorzystać w naszych aplikacji

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

Jeśli masz wiele rodzajów działań nie można odpowiedzieć na te pytania pewnie. Tak więc, możemy pomóc maszynopis nam pomóc.

wygląd Spójrzmy prawdzie w pliku deklarowania naszych działań:

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

Dobrze, jeśli wystąpią użyciu maszynopis i Redux, użyj typu Guards też. Będzie to na pewno oszczędność czasu dla Ciebie i Twojego zespołu.

Można również przeczytać o innych zaawansowanych funkcji maszynopis

Odpowiedział 02/12/2019 o 23:57
źródło użytkownik

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