Limitations on quantity utilizing typescript

Question

Limitations on quantity utilizing typescript

Looking to create a type/interface with generics that has two properties:

interface Response<T> {
  status: number;
  data: T | undefined;
}

Specifically, I want to enforce a rule where if the status is not equal to 200, then data must be undefined. On the other hand, if the status is equal to 200, then data must be of type T. This would eliminate the need to always check if response.data is defined after verifying that response.status is 200:

if (response.status === 200 && response.data) {
  // It would be ideal for TypeScript to automatically understand that response.data 
  // is not undefined without additional explicit checks
}

This is what I currently have:

interface IOkResponse<T> {
  status: 200;
  data: T;
}

interface IErrorResponse {
  status: number;
  data: undefined;
}

type Response<T> = IOkResponse<T> | IErrorResponse;

The issue lies in the fact that IErrorResponse does not restrict the status value to numbers other than 200. How can this restriction be implemented?

typescript typescript-generics

Answer 1

Answer №1

I concur with @jcalz's assessment that there is no straightforward way to achieve this. One approach you can take is utilizing typeguards. While it enhances the type safety of your code, there is a cost associated with it in terms of function overhead.


interface IOkResponse<T> {
  status: 200;
  data: T;
}

interface IErrorResponse {
  status: number;
  data: undefined
}

type Result<T> = IOkResponse<T> | IErrorResponse;

const isOK = <T,>(arg: Result<T>): arg is IOkResponse<T> => arg.status === 200

const foo = <T,>(arg: Result<T>) => {
  if (isOK(arg)) {
    const y = arg //  IOkResponse<T> 
  } else {
    const z = arg // IErrorResponse;
  }
}

Answer 2

I concur with @jcalz's assessment that there is no straightforward way to achieve this. One approach you can take is utilizing typeguards. While it enhances the type safety of your code, there is a cost associated with it in terms of function overhead.


interface IOkResponse<T> {
  status: 200;
  data: T;
}

interface IErrorResponse {
  status: number;
  data: undefined
}

type Result<T> = IOkResponse<T> | IErrorResponse;

const isOK = <T,>(arg: Result<T>): arg is IOkResponse<T> => arg.status === 200

const foo = <T,>(arg: Result<T>) => {
  if (isOK(arg)) {
    const y = arg //  IOkResponse<T> 
  } else {
    const z = arg // IErrorResponse;
  }
}

Answer 3

Answer №2

class NewResponse<T> {
    statusCode: number = null;
    get responseData(): T {
        return this.statusCode === 200 && this.responseData || undefined;
    }
}

What do you think about this approach? The data will remain undefined if the status code is equal to 200.

Answer 4

class NewResponse<T> {
    statusCode: number = null;
    get responseData(): T {
        return this.statusCode === 200 && this.responseData || undefined;
    }
}

What do you think about this approach? The data will remain undefined if the status code is equal to 200.

Answer 5

Answer №3

Even though @captain-yossarin provided a more general solution that I accepted as the answer, I wanted to share the approach I ultimately decided on...

export enum StatusCode {
  OK = 200,
  NoContent = 204,
  NotModified = 304,
  BadRequest = 400,
  Unauthorized = 401,
  // Any other important status codes for the client can be added here
}

interface IOkResponse<T> {
  statusCode: StatusCode.OK;
  data: T;
}

interface IErrorResponse {
  statusCode: Exclude<StatusCode, StatusCode.OK>;
  data: undefined;
}

export type ApiResponse<T> = IOkResponse<T> | IErrorResponse;

The function responsible for instantiating my ApiResponse<T> object is working well because TypeScript automatically converts number to StatusCode.

async function parseResponse<T>(response: Response): Promise<ApiResponse<T>> {
  const text = await response.text();
  const statusCode = response.status;
  if (statusCode === StatusCode.OK) {
    const data = JSON.parse(text) as T;
    return { statusCode, data };
  }
  return { statusCode, data: undefined };
}

Now, using my ApiResponse<T> object does not require unnecessary checks for undefined when statusCode === 200.

const ar1: ApiResponse<Test> = { statusCode: 200, data: { value: 5 } };
if (ar1.statusCode === StatusCode.OK) {
  console.log(ar1.data.value);
}

Answer 6

Even though @captain-yossarin provided a more general solution that I accepted as the answer, I wanted to share the approach I ultimately decided on...

export enum StatusCode {
  OK = 200,
  NoContent = 204,
  NotModified = 304,
  BadRequest = 400,
  Unauthorized = 401,
  // Any other important status codes for the client can be added here
}

interface IOkResponse<T> {
  statusCode: StatusCode.OK;
  data: T;
}

interface IErrorResponse {
  statusCode: Exclude<StatusCode, StatusCode.OK>;
  data: undefined;
}

export type ApiResponse<T> = IOkResponse<T> | IErrorResponse;

The function responsible for instantiating my ApiResponse<T> object is working well because TypeScript automatically converts number to StatusCode.

async function parseResponse<T>(response: Response): Promise<ApiResponse<T>> {
  const text = await response.text();
  const statusCode = response.status;
  if (statusCode === StatusCode.OK) {
    const data = JSON.parse(text) as T;
    return { statusCode, data };
  }
  return { statusCode, data: undefined };
}

Now, using my ApiResponse<T> object does not require unnecessary checks for undefined when statusCode === 200.

const ar1: ApiResponse<Test> = { statusCode: 200, data: { value: 5 } };
if (ar1.statusCode === StatusCode.OK) {
  console.log(ar1.data.value);
}

Limitations on quantity utilizing typescript

Answer №1

Answer №2

Answer №3

Similar questions

Error: Module './App' not found in webpack module

Transform the object into an array of JSON with specified keys

Is it possible to define a unique function signature in a child class when implementing a method from a parent class?

When working with Typescript, an error is thrown if property "p" does not exist on one of the classes that are OR

How to extract a JavaScript object from an array using a specific field

What is the best way to centralize JSDoc typedef information for easy sharing between different projects?

Choosing a single element through viewChild using the "#" selector in Angular 2

What is the best way to ensure an observable has been updated before proceeding with additional code execution?

`How can I extract HTMLElements from slots in vue3?`

Utilizing WebWorkers with @mediapipe/tasks-vision (Pose Landmarker): A Step-by-Step Guide

Modify the dropdown menu title dynamically based on the selection made in Angular

Tips for extracting key values from an array of objects in Typescript

I rely on the angular-responsive-carousel library for my project, but unfortunately, I am unable to customize the arrow and dots

What is the process for importing a component at a later time?

What are some ways to control providers in targeted tests using ng-mocks?

Having trouble loading extensive amounts of data into a select element within an Angular application

Verify the occurrence of an element within an array inside of another array

A windows application developed using either Javascript or Typescript

The Generic Function's Return Type in Typescript

"Exploring Angular: A guide to scrolling to the bottom of a page with