Как передать ответ API выборки определенному типу в TypeScript?

Я пытаюсь преобразовать ответ вызова API в определенный тип в моем коде (TypeScript). Однако мне не удалось получить ответ на мой тип, а только на Object.

Пробовал несколько способов, в частности описанный здесь: https://www.carlrippon.com/fetch-with-async-await-and-typescript/

Тип:

export interface MyType{
  id: number;
  name: string;
  date: Date;
}

Получить код:

export default class api {
  static async get<T>(url: string): Promise<T> {
    return new Promise(resolve => {
      fetch(url)
        .then(response => response.json())
        .then(body => {
          resolve(body);
        });
    });
  }
}

Звонивший:

const result = await api.get<MyType[]>(
      "my-url-here"
    );

Я ожидаю, что result будет типа MyType[], но это Object[]. (со всеми полями)

Далее я попытался изменить тип поля name на number (при этом всегда оставляя один и тот же ответ от API, т.е. имя — это какая-то строка, не конвертируемая в число) и ожидал какую-то ошибку приведения типа, но ее не было. result по-прежнему создается с тем же содержанием и тем же типом: result: Array(3) [Object, Object, Object]

Кажется, что никакого кастинга нет вообще.

Не могли бы вы сказать мне, где я ошибаюсь, и показать мне, что делать?

Спасибо большое.

При проверке ваших типов в детская площадка все выглядит нормально. Проблема должна быть в другом.

Etheryte 02.05.2019 23:44

TypeScript — это всего лишь компилятор. Он компилируется в JavaScript, где типы (кроме типов JS: логические, числовые, объектные и т. д.) больше не существуют. А в TypeScript нет кастинга. Все, что делает ваш код, это говорит компилятору: поверьте мне, объекты, возвращаемые моим API, будут выглядеть так. Во время выполнения объекты представляют собой просто POJO, и проверка типов вообще не выполняется.

JB Nizet 02.05.2019 23:48

Спасибо @JBNizet, для меня это ясно!

Marimout 03.05.2019 15:16
Как сделать HTTP-запрос в Javascript?
Как сделать HTTP-запрос в Javascript?
В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:
3
3
6 114
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

expected some type casting error, but there was none.

TypeScript не В ролях. Это утверждатьs. Это способ целенаправленно сообщить компилятору, что будет во время выполнения. Если это не окажется так во время выполнения, это на вас.

Исправить

Варианты либо:

  • измените ответ бэкэнда, чтобы он соответствовал тому, что вы утверждаете.
  • измените утверждение, чтобы оно соответствовало тому, что возвращает серверная часть.

Более

Другие вопросы по теме