javascript - Type checking the API response in typescript - Stack Overflow

admin管理员组

文章数量:1323353

I'm curious what happens when you expect a certain type as a response from fetch / Axios / etc and its response is of a different type. Can i detect that mismatch?

interface HttpResponse<T> extends Response {
  parsedBody?: T;
}
export async function http<T>( request: RequestInfo ): Promise<HttpResponse<T>> {
  const response: HttpResponse<T> = await fetch( request );
  response.parsedBody = await response.json();
  return response;
}

// example consuming code
const response = await http<number>(
  "https://thisURLdoesNotReturnANumber"
);

Will the code throw an error? Will it pass silently? How do i detect a mismatch?

I'm curious what happens when you expect a certain type as a response from fetch / Axios / etc and its response is of a different type. Can i detect that mismatch?

interface HttpResponse<T> extends Response {
  parsedBody?: T;
}
export async function http<T>( request: RequestInfo ): Promise<HttpResponse<T>> {
  const response: HttpResponse<T> = await fetch( request );
  response.parsedBody = await response.json();
  return response;
}

// example consuming code
const response = await http<number>(
  "https://thisURLdoesNotReturnANumber"
);

Will the code throw an error? Will it pass silently? How do i detect a mismatch?

• javascript
• typescript
• async-await

Share Improve this question Follow edited Mar 18, 2020 at 16:44 Nilanka Manoj 3,73844 gold badges2020 silver badges5252 bronze badges asked Mar 18, 2020 at 12:27 iluvASiluvAS 51344 silver badges1010 bronze badges 3

• The API call will happen at runtime after types have been erased, so if there's a mismatch you'll get a runtime exception. – bugs Commented Mar 18, 2020 at 12:29
• If you want to do runtime type validation you need to use some ad-hoc library, like io-ts – bugs Commented Mar 18, 2020 at 12:29
• A very good question. Sadly the answers are right and show how far behind web development (thanks to JS) is when it es to type-safety, and therefore development in general; no runtime typing - that's half the power of static typing, and it doesn't exist. – Ash Commented Aug 11, 2020 at 3:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Your typescript code traspiles to javascript before browsers execute it. It will look something like this:

export async function http( request ) {
  const response = await fetch( request );
  response.parsedBody = await response.json();
  return response;
}
const response = await http("https://thisURLdoesNotReturnANumber");

No types, as you can see. Browsers know nothing about types defined in typescript.

Later on you may or may not get a runtime error. To throw as early as possible you need to implement a runtime check by youself inside you http<T>() function.
Or you can use a third-party library to do the job. There are plenty of them out there.

Your Typescript code will be parsed to Javascript, so at runtime, when the different type arrives from your api, the type-check is not available anymore.

You won't get any errors.

TypeScript is just a very good help at developing, but sadly, it won't fail on runtime type validations.

本文标签： javascriptType checking the API response in typescriptStack Overflow