वहाँ टाइपप्रति का उपयोग कर action.payload के प्रकार का पता लगाने के कोई तरीका है?

वोट
1

मैं कार्यों का एक बहुत कुछ है और मैं अपने पेलोड का एक प्रकार एक विशिष्ट में में पता लगाने चाहते caseकार्रवाई प्रकार के आधार पर मेरी कम करने में।

अब मैं नहीं जानता कि क्या एक पेलोड में है:

function someReducer(state: ISomeState = getDefaultSomeState(), action) {
    switch (action.type) {
        case FIRST: {
            // What is type of action.payload?
            return {...};
        }
        default: {
            return state;
        }
    }
}
02/12/2019 को 23:57
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
1

प्रकार गार्ड है टाइपप्रति सुविधा आपको एक सशर्त ब्लॉक के भीतर एक वस्तु के प्रकार को कम करने के लिए अनुमति देता है। इसका मतलब है कि आप अपने चर की स्थिति और स्विच का उपयोग करने का प्रकार निर्दिष्ट कर सकते हैं।

यह काम किस प्रकार करता है?

मान लीजिए कि हम दो इंटरफेस और एक वस्तु करते हैं:

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

के कुछ विशेषताएं हमारे इंटरफेस के जोड़ें

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

तो, अब हम संघ प्रकारों में अंतर कर सकते हैं।

आइए नज़र हम इसे कैसे हमारे अनुप्रयोगों में उपयोग कर सकते हैं

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

आप कई कार्यों के प्रकार पर है, तो आप इन सवालों आत्मविश्वास से उत्तर नहीं दे सकता। तो, हम टाइपप्रति हमारी मदद कर सकते हैं।

फ़ाइल पर आइए नज़र हमारे कार्यों की घोषणा:

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

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

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

और हमारे कम करने:

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

खैर, अगर आप टाइपप्रति और redux का उपयोग कर विकसित, का उपयोग प्रकार गार्ड भी। यह निश्चित रूप से आप और आपकी टीम के लिए समय की बचत होगी।

तुम भी दूसरे के बारे में पढ़ सकते हैं उन्नत टाइपप्रति सुविधाओं

02/12/2019 को 23:57
का स्रोत उपयोगकर्ता

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