Есть ли способ, чтобы обнаружить тип 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