Как типизировать fetch без as?

Question

[MishaXXL]

Как правильно типизировать функцию, которая возвращает промис или в любом случае при работе с fetch внутри нужно указывать через as, что она возвращает?
У меня получилось это сделать только при указании, что полученные данные as Res

type Res = {
    userId: number;
    id: number;
    title: string;
    completed: boolean;
}

const getData = async (url: string): Promise<Res> => {
    const result = await fetch(url).then(data => data.json()).catch(err => err.message) as Res
    return result
}

Comments

[WbICHA]

в любом случае при работе с fetch внутри нужно указывать через as, что она возвращает?

К сожалению, фетч, видимо, было "очень трудно" типизировать нормально, поэтом без эсс никак. Правда, кетч лучше убрать, чтобы не смешивать тип ответа и ошибки. Либо кидать из него новую ошибку.

[fkk]

А в чем практический смысл? as - это нормально. Ты никак нет можешь типизировать заранее какой-то рантайм булщит, который отдает неизвестно кто и что, ты можешь только предположить.

Как сказали catch лучше убрать, ошибки можно обрабатывать на уровне выше например через try / catch. Сейчас, если у тебя будет ошибка - вернется ее message, что далеко не Res.

Можно тогда и без as обойтись, еще советовал бы сделать кастомный тип ошибки - HttpError.
Ее удобно потом отделять от всех через instanceof в catch блоке try:

type Fkk = {
  userId: number;
}

const getMyData = async (): Promise<Fkk> => {
  const response = await fetch("url", {
    // ....
  })

  if (response.status > 200  || response.status < 200) {
    throw new HttpError("response code is not in 200-299 range", response)
  }

  return await response.json()
}

[WbICHA]

Ты никак нет можешь типизировать заранее какой-то рантайм булщит, который отдает неизвестно кто и что, ты можешь только предположить.

Для этого в нормальной типизации есть дженерики.

response.status > 200 || response.status < 200
"response code is not in 200-299 range"

:)

Answer 1

[historydev]

Fetch это промис.
Промис возвращает твою "data" и соответственно типизировав data и то, что возвращает callback, ты типизируешь данные которые он возвращает.

Однако catch здесь тоже нужно учесть, т.к. он возвращает Promise<any>, соответственно тебе нужно использовать примерно такую конструкцию:

const getData = async (url: string): Promise<Res | any> => await fetch(url).then((data: Response): Promise<Res> => data.json()).catch(err => err.message);

Comments

[WbICHA]

const result: Promise<Res | any> = await fetch

Ты серьёзно?

[historydev]

WbICHA, не нравится any - типизируй catch)

Догадаться не сложно.

[historydev]

WbICHA, а ты про result: type, я поправил, да, бред)

[Дмитрий Беляев]

historydev, T | any это any при любом T

[MishaXXL]

Что-то мне подсказывает, что
Res | anyэто всё равно, что просто написать any

[historydev]

MishaXXL, заменяешь any на свой тип для ошибок.

[historydev]

Дмитрий Беляев, да, это понятно, хотел показать что можно указать 2 типа, плохой пример, но дописывать тип ошибки лень.