How can I restrict the return type of a generic method in TypeScript based on the argument type?

Question

How can I restrict the return type of a generic method in TypeScript based on the argument type?

How can we constrain the return type of getStreamFor$(item: Item) based on the parameter type Item?

The desired outcome is:

When calling getStream$(Item.Car), the type of stream$ should be Observable<CarModel>
When calling getStream$(Item.Animal), the type of stream$ should be Observable<AnimalModel>

Currently, the type of stream$ is

Observable<CarModel | AnimalModel | TemperatureModel>

.

(refer to the 'HERE' comment in this StackBlitz)

enum Item {
  CAR = 'car',
  ANIMAL = 'animal',
  TEMPERATURE = 'temperature'
}

interface CarModel {
  make: string;
}

interface AnimalModel {
  breed: string;
}

interface TemperatureModel {
  tmp: number;
  scale: string;
}

class Channel {
  stream: {
    [prop in Item]: Observable<CarModel | AnimalModel | TemperatureModel>
  };

  constructor() {
    this.stream = {
      [Item.CAR]: of({ make: 'Ford' }) as Observable<CarModel>,
      [Item.ANIMAL]: of({ breed: 'Cat' }) as Observable<AnimalModel>,
      [Item.TEMPERATURE]: of({ tmp: 35, scale: 'Celsius' }) as Observable<TemperatureModel>
    };
  }

  getStreamFor$(item: Item): Observable<CarModel | AnimalModel | TemperatureModel> {
    return this.stream[item];
  }
}

const c = new Channel();
const stream$ = c.getStreamFor$(Item.CAR) // <--- HERE
  .pipe(
    map((value) => {
      value.make // <--- '.make' is marked as error by IDE
    }),
  )

typescript

Answer 1

Answer №1

When you annotate stream as

{ [K in Item]: Observable<CarModel | AnimalModel | TemperatureModel> }

, you essentially remove the specific mapping between each key from Item and each model for the compiler to remember. Similarly, by annotating the return type of getStreamFor$() as

Observable<CarModel | AnimalModel | TemperatureModel>

, that function can only return the wide union type causing problems. If you want the return type of getStreamFor$(item) to vary based on the type of item, consider making it a generic method or an overload.

To achieve the desired typing, it's recommended to let the types be inferred instead of using annotations. For stream, use a class field initializer instead of a declaration:

class Channel {
  stream = {
    [Item.CAR]: of({ make: 'Ford' }) as Observable<CarModel>,
    [Item.ANIMAL]: of({ breed: 'Cat' }) as Observable<AnimalModel>,
    [Item.TEMPERATURE]: of({ tmp: 35, scale: 'Celsius' }) as Observable<
      TemperatureModel
    >
  };

  constructor() {}

Then, simply make getStreamFor$() generic with type parameter I constrained to Item:

  getStreamFor$<I extends Item>(item: I) {
    return this.stream[item];
  }
}

This setup will work seamlessly:

const c = new Channel();
const stream$ = c.getStreamFor$(Item.CAR).pipe(
  map(value => {
    value.make; // now okay
  })
);

If content, stop here.

With IntelliSense enabled, you can view the inferred types of stream and getStreamFor$:

/* (property) Channel.stream: {
    car: Observable<CarModel>;
    animal: Observable<AnimalModel>;
    temperature: Observable<TemperatureModel>;
}

(method) Channel.getStreamFor$<I extends Item>(item: I): {
    car: Observable<CarModel>;
    animal: Observable<AnimalModel>;
    temperature: Observable<TemperatureModel>;
}[I] */

Note how the return type is defined in relation to the type of stream. To add annotations, assign names to stream's type and utilize it for annotation purposes:

interface ItemModelMap {
  [Item.CAR]: Observable<CarModel>;
  [Item.ANIMAL]: Observable<AnimalModel>;
  [Item.TEMPERATURE]: Observable<TemperatureModel>;
}

class Channel {
  stream: ItemModelMap;
  constructor() {
    this.stream = {
      [Item.CAR]: of({ make: 'Ford' }),
      [Item.ANIMAL]: of({ breed: 'Cat' }),
      [Item.TEMPERATURE]: of({ tmp: 35, scale: 'Celsius' })
    };
  }

  getStreamFor$<I extends Item>(item: I): ItemModelMap[I] {
    return this.stream[item];
  }
}

Since stream is annotated as ItemModelMap, there's no need for as Observable<CarModel> in its initializer. You may move the initialization back within the constructor() method. The return type of getStreamFor$() can be expressed as ItemModelMap[I].

All functionalities remain intact while having robust type annotations.

Access code via Stackblitz link

Answer 2

When you annotate stream as

{ [K in Item]: Observable<CarModel | AnimalModel | TemperatureModel> }

, you essentially remove the specific mapping between each key from Item and each model for the compiler to remember. Similarly, by annotating the return type of getStreamFor$() as

Observable<CarModel | AnimalModel | TemperatureModel>

, that function can only return the wide union type causing problems. If you want the return type of getStreamFor$(item) to vary based on the type of item, consider making it a generic method or an overload.

To achieve the desired typing, it's recommended to let the types be inferred instead of using annotations. For stream, use a class field initializer instead of a declaration:

class Channel {
  stream = {
    [Item.CAR]: of({ make: 'Ford' }) as Observable<CarModel>,
    [Item.ANIMAL]: of({ breed: 'Cat' }) as Observable<AnimalModel>,
    [Item.TEMPERATURE]: of({ tmp: 35, scale: 'Celsius' }) as Observable<
      TemperatureModel
    >
  };

  constructor() {}

Then, simply make getStreamFor$() generic with type parameter I constrained to Item:

  getStreamFor$<I extends Item>(item: I) {
    return this.stream[item];
  }
}

This setup will work seamlessly:

const c = new Channel();
const stream$ = c.getStreamFor$(Item.CAR).pipe(
  map(value => {
    value.make; // now okay
  })
);

If content, stop here.

With IntelliSense enabled, you can view the inferred types of stream and getStreamFor$:

/* (property) Channel.stream: {
    car: Observable<CarModel>;
    animal: Observable<AnimalModel>;
    temperature: Observable<TemperatureModel>;
}

(method) Channel.getStreamFor$<I extends Item>(item: I): {
    car: Observable<CarModel>;
    animal: Observable<AnimalModel>;
    temperature: Observable<TemperatureModel>;
}[I] */

Note how the return type is defined in relation to the type of stream. To add annotations, assign names to stream's type and utilize it for annotation purposes:

interface ItemModelMap {
  [Item.CAR]: Observable<CarModel>;
  [Item.ANIMAL]: Observable<AnimalModel>;
  [Item.TEMPERATURE]: Observable<TemperatureModel>;
}

class Channel {
  stream: ItemModelMap;
  constructor() {
    this.stream = {
      [Item.CAR]: of({ make: 'Ford' }),
      [Item.ANIMAL]: of({ breed: 'Cat' }),
      [Item.TEMPERATURE]: of({ tmp: 35, scale: 'Celsius' })
    };
  }

  getStreamFor$<I extends Item>(item: I): ItemModelMap[I] {
    return this.stream[item];
  }
}

Since stream is annotated as ItemModelMap, there's no need for as Observable<CarModel> in its initializer. You may move the initialization back within the constructor() method. The return type of getStreamFor$() can be expressed as ItemModelMap[I].

All functionalities remain intact while having robust type annotations.

Access code via Stackblitz link

How can I restrict the return type of a generic method in TypeScript based on the argument type?

Answer №1

Similar questions

Find out if a dynamically imported component has finished loading in Nextjs

The 'target' property is not found on the type 'KeyboardEventHandler<HTMLInputElement>'

Include additional information beyond just the user's name, profile picture, and identification number in the NextAuth session

Tips for selecting specific types from a list using generic types in TypeScript

Please anticipate the reply from the AngularJS 2 API

A TypeScript default function that is nested within an interface

The ngAfterViewInit lifecycle hook does not get triggered when placed within ng-content

Combine and transform multiple hierarchical JSONs into a new format

What is the best way to perform type checking for a basic generic function without resorting to using a cumbersome cast

Deploying Angular to a shared drive can be done in a

Vue3 project encountering issues with Typescript integration

How can I effectively test the success of a form submission in next.js using jest for unit testing?

Unit tests are failing to typecast the Angular HTTP GET response in an observable

TSLint Errors Update: The configuration provided cannot locate implementations for the following rules

Navigating to view component in Angular2 Routing: Issue with router-link click event not working

Issue with custom validator in Angular 6: setTimeout function not functioning as expected

Using Svelte with Vite: Unable to import the Writable<T> interface for writable store in TypeScript

Looking to retrieve the value of an input element within an ng-select in Angular 6?

Optimal approach to configuring Spring Boot and Angular for seamless communication with Facebook Marketing API

Angular 5 offers the capability to use mat-slide-toggle to easily display and manipulate