Как реализовать union типы для action?

Question

[iordania]

Учу typescript и пытаюсь сделать union тип для многих экшенов, но почему-то не подхватывается если у payload есть вложенность, как можно исправить ? в каком направлении документации к ts копать ?

export type TodoCH = {
  type: TodosActionsTypes.CHANGE_TODO;
  payload: {
    checked: boolean;
    id: number;
  };
};

export type TodoAD = {
  type: TodosActionsTypes.ADD_TODO;
  payload: string;
};

type TT = TodoCH | TodoAD

function* changeTodo(action: TT) {
  try {
    yield call(() =>
      axios.patch(`http://localhost:3100/todos/${action.payload.id}`, {
        checked: !action.payload.checked,
      })
    );
    yield put({
      type: TodosActionsTypes.CHANGE_TODO_SUCCESS,
      payload: action.payload.id,
    });
  } catch (e) {}
}

в данном случае выпадает 2 ошибки на id и checked:

// Property 'checked' does not exist on type 'string | { checked: boolean; id: number; }'.
// Property 'checked' does not exist on type 'string'.

// Property 'id' does not exist on type 'string | { checked: boolean; id: number; }'.
// Property 'id' does not exist on type 'string'.

Comments

[WbICHA]

Длч чего тебе тут юнион, если ты используешь только 1 тип?

[iordania]

WbICHA, 1 я указал для примера, а так их около 30(action)

[WbICHA]

iordania, так приведи корректный пример, со всеми проверками, что ты делаешь.

Answer 1

[Aetae]

Также как и всегда, в этом суть типов.
Переданное значение может быть или одного типа или другого. И пока ты явно не проверишь через if какого же именно типа прилетело значение - использовать его нельзя.

Comments

[iordania]

Aetae как я понял, с помощью union типов можно обобщать множество возможных типов
в чём тогда суть проверки через if если я могу описать всё заранее ?

[Aetae]

iordania, что в твоём понимании "обобщать"? Как ты собрался обобщить string и { checked: boolean; id: number; }? Это два совершенно разных типа. Что-то не может быть одновременно и тем и тем.

Единственный тип который ведёт себя как любой(точнее как все типы одновременно) - это any, специальный уникальный тип для затыкания дыр, который в обычном коде использовать нельзя. Другие же типы могут быть только более-менее конкретны.

[iordania]

Aetae, тот подход, который я описал выше он может быть верным ? или нужно для каждого action описывать тип ?

[Станислав Макаров]

iordania чтобы ваш код работал правильно, вам сначала нужно проверить, что ваш экшен - типа Change. В функцию вы передаёте значение типа TT, оно может быть, судя по вашему же коду, Change или Add. Если вы сейчас уберёте все типы, и напишете это на голом JS, то при передаче в changeTodo экшена типа Add у вас код упадёт в рантайме.

Теперь видите проблему? TypeScript вас заранее предупреждает об этом, не давая этому коду скомпилиться. А благодаря code flow typing, который есть в TypeScript, обыкновенного if, который и предложил автор ответа, будет достаточно для сужения типа до нужного.

[iordania]

Станислав Макаров, я понял, а можете пожалуйста на основе моего кода показать куда вставить проверку ?

[Aetae]

iordania,

function* changeTodo(action: TT) {
  try {
    if (action.type === TodosActionsTypes.CHANGE_TODO) {
      yield call(() =>
        axios.patch(`http://localhost:3100/todos/${action.payload.id}`, {
          checked: !action.payload.checked,
        })
      );
      yield put({
        type: TodosActionsTypes.CHANGE_TODO_SUCCESS,
        payload: action.payload.id,
      });
    } 
  } catch (e) {
    console.error(e);
  }
}

[iordania]

Aetae, понял, но в данном же случае проверка получается избыточна, лучше в таком случае просто описать отдельным интерфейсом action ?
Просто есть union тип который применяется в reducer и там без лишних проверок работает, так как есть switch case - думал можно применить этот же union тип и в saga описав тем самым action в worker function

[iordania]

Aetae, Получается в моём случае либо условие в функции, либо отдельный интерфейс для action ?

[Aetae]

iordania, а какая разница между if и switch? Ну напиши так, если тебе это понятнее:

function* changeTodo(action: TT) {
  try {
    switch (action.type) {
      case TodosActionsTypes.CHANGE_TODO:
        yield call(() =>
          axios.patch(`http://localhost:3100/todos/${action.payload.id}`, {
            checked: !action.payload.checked,
          })
        );
        yield put({
          type: TodosActionsTypes.CHANGE_TODO_SUCCESS,
          payload: action.payload.id,
        });
      break;
    } 
  } catch (e) {
    console.error(e);
  }
}

Если ты работаешь с двумя типами на вход, ты должен отделить обработку одного от обработки другого. А через switch ты это сделаешь, через if, или через танец живота - значения не имеет.

Просто ответ да: "либо условие в функции, либо отдельный интерфейс".

Но я всё ещё хочу понять, а как ты себе представляешь что-то иное.
Вот прилетел тебе в payload string, что дальше?
Допустим typescript бы это пропустил в таком виде как есть. Тогда у нас payload.checked и payload.id - undefined. И call и axios и put при этом выполнятся без ошибок, но с неверными значениями. Именно для защиты от такого как раз и придуман typescript.

[Aetae]

iordania, может у тебя задача вообще не в том что ты описал, и ты просто не знаешь что можно получить отдельный тип из юниона, например так:

Extract<TT, { type: TodosActionsTypes.CHANGE_TODO }>

?

[iordania]

Aetae, по идее это
я просто хотел использовать повторно TT не копируя интерфейс