Fetch & TypeScript
Published: 2022-07-29 11:06:07

[Andrew](https://dev.to/iamandrewluca/typed-fetch-response-in-typescript-1eh1) posted a very nice an usefull article on Typed Fetch Response

Here I wanted to illustrate with a real exemple.

Using [DummyJSON](https://dummyjson.com/) I translated JSON data to Typescript with [QuickType](https://quicktype.io/)

Here the final code 

```js
interface TypedResponse<T = any> extends Response {
    json<P = T>(): Promise<P>
}
declare function fetch<T>(...args: any): Promise<TypedResponse<T>>

export interface Mat {
    users: User[];
    total: number;
    skip: number;
    limit: number;
}

export interface User {
    id: number;
    firstName: string;
    lastName: string;
    maidenName: string;
    age: number;
    gender: Gender;
    email: string;
    phone: string;
    username: string;
    password: string;
    birthDate: Date;
    image: string;
    bloodGroup: string;
    height: number;
    weight: number;
    eyeColor: EyeColor;
    hair: Hair;
    domain: string;
    ip: string;
    address: Address;
    macAddress: string;
    university: string;
    bank: Bank;
    company: Company;
    ein: string;
    ssn: string;
    userAgent: string;
}

export interface Address {
    address: string;
    city?: string;
    coordinates: Coordinates;
    postalCode: string;
    state: string;
}

export interface Coordinates {
    lat: number;
    lng: number;
}

export interface Bank {
    cardExpire: string;
    cardNumber: string;
    cardType: string;
    currency: string;
    iban: string;
}

export interface Company {
    address: Address;
    department: string;
    name: string;
    title: string;
}

export enum EyeColor {
    Amber = "Amber",
    Blue = "Blue",
    Brown = "Brown",
    Gray = "Gray",
    Green = "Green",
}

export enum Gender {
    Female = "female",
    Male = "male",
}

export interface Hair {
    color: Color;
    type: Type;
}

export enum Color {
    Auburn = "Auburn",
    Black = "Black",
    Blond = "Blond",
    Brown = "Brown",
    Chestnut = "Chestnut",
}

export enum Type {
    Curly = "Curly",
    Straight = "Straight",
    Strands = "Strands",
    VeryCurly = "Very curly",
    Wavy = "Wavy",
}

fetch<Mat>('https://dummyjson.com/users/')
    .then(res => res.json())
    .then(json => console.table(json))

```

See how we can get Intellisense from the Users reponse


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oat7lrszvvm9v0vke10h.png)

You can test it here [TypedFetch](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB08wgDQlgHsA7MQmNA8qAQwAdIV8AzASxh1QG1RiaBbCJQwALePyh4qxRDMogAvrl4Ch6LDnxEZEOegA6xCAA86hAE7wABKx3nmNWBCsBZGteCGr3qwFdI5mCoVgCqAVwAugDcXj7whPA0UMHEvvwARhDmMcQ+VmAA1qx0KWmZ2bHeUKz8rPClGVk5CoaGJmaWNnYOTqEBVp65PqxIDeU5eWyB8AByqsFg8Oa2AOYTPrSLc4ILS6vr3vw0I7rbELvLxGuVVjQr51apjRVD3vfESFnBAOK6ny95CBHdgXfY3OgiEgPRaXa6vPwBPg7fJ7K4HKx0GhgMAAdwsoxRsPR6VYlhEABF3A9KYh0TU7tDUXC8ukoIRCEhvuZCL4SoSwfCRBBWCsxGMmjcccLRfVHmUJfCIABPCAAYXIFmCAFEVeq2QCfCJjuZggAJY3opCEYHEUFom7FO3Mnw0JBIcwQbHBACCbo92PRR1gvvdnqC-Pt8N8xFYADcsmA6kqncSaMQCsEAEJpgrooj8THEZNWdUFtNK9HC20R53ebHVmECvL+LLe96yxuRlrENqmCzWWyIeyOZwh-1gAY3V2hr01vNJgD8KZuRHxtip4fVa74iDA6LMiyS6s+y-hh8Qp+7vY6A+6I5L7PMSHXu8n8Nosqe4xuUCu4peV5GH2nSDlkPTONm6ZvnksA0E+WqmKSjJEiucFIDM8omnOqFPgAKkqdDIU2PiwL45gesQsDFp2tY2OkaaXq0QE3l0Q7gQ+ZZFtBLp+mGPq8QGNyfJiliCDIp55EiRGRnk8B1DAjE9sx-ZWLoaRWDqaoauY3HeN6zxWAAvFY+ggPp5SmbgNyZlAvjOMZpk2XZlnWdyOK5A5ICZm5PZ4DcXI0EqRkmSAAVKi58JchAujBaZUW6BFgHtCpan8FYvwfFkulWAAYkCST2SFzD5TAEV5G4MCxSARylX5xBJcBt5sfe5qktlRD6sEeoWOi8AEQ8+GEc0THJZ0qUPvq2Xer46RkR5IXTbN5i+VZ8I2Y4BRVetsAFGVPg2SQSBbWyHx7d43mEO5W0+WdJZCosqTWJ5qr3fAj2JSNjWqU8ViDc4gx5KqZFQEFz3A+FdV5AAyksxwylVMPmHDYi3YjaZIBOnlox8YC3QAalkSpA+YINVQT5hBaRJMQ6teQAOo0LGoMhQzTMfUpfWEVYAAyrCLGECbBQL5iRDkhigcOvR-UgABKnpmKQEAADy4cF5YAHyqcYsgY1YctgArkDZQAVmQxBKwACsFuHqwAFAAlMEFvcrUkCW+rhiAZ8sC0B6VjMNGCCsCQ-sQPAsAiCrdsYDHcErOG5aO1YzvWnzyvS-rhvp+rHtKcV4eR7z-MBGAdsAORiPADCoAA9DXSBpPwSqmyQGD5jXLaBDXZf20xeRYEKxC2-6Rma-6GAt0P9u90p-fwIPtuT6PVjaGQMAYGyKyL2b09MVI+Z0OwWSUNgUiQDAQckJwIAAIwAAwAOyoHfijKCAUnCLA2L7yQsjwPICgIgKCAA)