выборка написана в Typescript

Question

Я хочу написать оболочку машинописного текста, чтобы сделать безопасное извлечение типов с помощью Typescript.Я гуглял вокруг, и лучший источник, который я нашел, - это ветка 2016 .Казалось, что это помогло людям в 2016 году, но теперь я не получаю сниппет на работу.

Следующее заставляет TS Linter жаловаться ([ts] Ожидаемые аргументы типа 0, но получил 1.):

response.json<T>()

Таким образом, в соответствии с этой веткой Я изменил его на следующий

data => data as T

Ни один из приведенных выше вариантов не работает, так как оба вызова возвращают неопределенный.Если используется источник, такой как this , я ожидаю, что смогу использовать {name: string, username: string}, например так:

api<{ name: string; username: string }>('https://jsonplaceholder.typicode.com/users')

Следующее предложение then:

 .then(({ name, username })

Был бы признателен подробный обзор того, как создать функцию-обертку для выполнения вызовов безопасной выборки.

РЕДАКТИРОВАТЬ

Добавление более полного фрагмента по запросу

api<T>(url: string): Promise<T> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      return response.json().then(data => data as T);
    })
    .catch((error: Error) => {
      throw error;
    });
}

// consumer
this.api<{ name: string; username: string }>("https://jsonplaceholder.typicode.com/users/")
  .then(({ name, username }) => {
    console.log(name, username);
  })
  .catch(error => {
    console.error(error);
  });

Answer 1

Часть Typescript в порядке.Использование as T в методе json должно работать нормально.

Проблема в том, что ваш json содержит массив, а не один объект.Таким образом, остальная часть кода будет работать, если вы напишите return response.json().then(data => data[0]);, выбрав только один элемент.

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

this.api<Array<{ name: string; username: string }>>("https://jsonplaceholder.typicode.com/users/")
    .then(data  => {
       data.forEach(({ name, username }) => console.log(name, username))
    })
    .catch(error => {
      console.error(error);
    });