Is er een manier om type action.payload detecteren met typoscript?

stemmen
1

Ik heb veel van de acties en ik wil op te sporen een soort van mijn payload in in een bepaald casein mijn verloopstuk afhankelijk van het type actie.

Nu weet ik niet wat er in een payload:

function someReducer(state: ISomeState = getDefaultSomeState(), action) {
    switch (action.type) {
        case FIRST: {
            // What is type of action.payload?
            return {...};
        }
        default: {
            return state;
        }
    }
}
De vraag is gesteld op 02/12/2019 om 23:57
bron van user
In andere talen...                            


1 antwoorden

stemmen
1

Type Guards is typoscript functie kunt u om een beperking van het type van een object binnen een voorwaardelijk blok. Het betekent dat u uw type variabele met behulp van omstandigheden en schakelaars kunt opgeven.

Hoe het werkt?

Laten we zeggen dat we twee interfaces en een object:

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

Laten we toevoegen dat bepaalde functies aan onze 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");
}

Zo, nu kunnen we onderscheiden types unie.

Laten we eens kijken hoe we dit kunnen gebruiken in onze toepassingen

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

Als je veel actie die u kunt deze vragen geen vertrouwen te beantwoorden. Dus, kunnen we typoscript help help ons.

Laten we eens kijken bij file te verklaren onze acties:

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

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

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

En onze verloopstuk:

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

Nou, als je ontwikkelen met behulp van typoscript en redux, gebruik Type Guards ook. Het zal zeker tijd besparen voor u en uw team.

U kunt ook lezen over andere geavanceerde typoscript functies

antwoordde op 02/12/2019 om 23:57
bron van user

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