ТС: Как обрабатывать несколько возможных типов на одном типе?

Question

У меня есть модальный интерфейс данных

interface ModalData {
 ...
 payload: any; // At any given time, this payload might be a string or number or boolean;
 ...
}

В модальной полезной нагрузке данных есть возможность разных типов, поэтому для этого я создал другой тип:

type IPayLoad = string | number | boolean;

Теперь, когда Я использую эти типы в своем коде. Я получаю следующие ошибки:

Проблема в том, что мне не нравится установка типа any для полезной нагрузки выше. Но если я установлю его на тип IPayLoad, я получу следующие ошибки:

this.service.saveString(modal.payload) // Argument of type 'IPayLoad' id not assignable to parameter of type 'string'.

this.service.saveNumber(modal.payload) // Argument of type 'IPayLoad' id not assignable to parameter of type 'number'.

this.service.saveBool(modal.payload) // Argument of type 'IPayLoad' id not assignable to parameter of type 'boolean'.

Функции вызова в службе приведены ниже:

public saveString(res: string): void {}

public saveNumber(res: number): void {}

public saveBool(res: boolean): void {}

Answer 1

Предполагая, что вы установили тип ModalData.payload на IPayLoad вместо any, вам необходимо сузить тип объединения следующим образом:

if (typeof modal.payload === 'string') {
    saveString(modal.payload)
} else if (typeof modal.payload === 'number') {
    saveNumber(modal.payload)
} else if (typeof modal.payload === 'boolean') {
    saveBool(modal.payload)
}

typeof - проверки называются защитниками типов, о которых вы можете прочитать в документации TypeScript .

Answer 2

Ключевое слово as решает проблему здесь.

public getLoad (payload: IPayLoad) {

  this.service.saveString(payload as string);

  this.service.saveNumber(payload as number);

  this.service.saveBoolean(payload as boolean);

}

Answer 3

Я думаю, что вы можете использовать один метод, который принимает IPayload или string|boolean|number тип.

Но если вы действительно хотите использовать эти три функции,

Вы можете сделать следующее :

this.service.saveString(`${payload}`);

this.service.saveNumber(Number(payload));

this.service.saveBoolean(Boolean(payload));