Mapping enum types in Typescript with overlapping data can be achieved by following these steps

Question

Mapping enum types in Typescript with overlapping data can be achieved by following these steps

I am currently working on a project where I am creating a type that maps different enum types to expected data types. My goal is to accurately determine the correct type of the data through type inference.

enum Car {
    BMW,
    Toyota,
    Fiat
}

type CarWithData =
    | {
            type: Car.BMW;
            data: {
                doucheFactor: number;
            };
      }
    | {
            type: Car.Toyota;
            data: {
                dadFactor: number;
            };
      }
    | {
            type: Car.Fiat;
            data: {
                dadFactor: number;
            };
      };

function handleCar(car: CarWithData) {
    switch (car.type) {
        case Car.BMW:
            console.log(`BMW owner found with douche factor of: ${car.data.doucheFactor}`);
            console.log(`DadFactor: ${car.data.dadFactor}`); // TypeError as expected / intended;
            break;
        default:
            console.log(`Toyota / Fiat owner found with dad factor of: ${car.data.dadFactor}`);
    }
}

function getDadFactor(car: CarWithData): number {
    return car.data.dadFactor ?? -1; // Property "dadFactor" does not exist on type CarWithData
}

handleCar({ type: Car.BMW, data: { doucheFactor: 900 } });
getDadFactor({ type: Car.Fiat, data: { dadFactor: 10} });

In this scenario, my code successfully utilizes type inference in the switch statement within handleCar. However, an issue arises in the getDadFactor function where a TypeError is thrown due to "dadFactor" not being recognized under the type CarWithData. Can you suggest a more optimal solution than including all possible fields with type never in a union?

typescript typescript-typings typescript-generics

Answer 1

Answer №1

If we start by checking the car.type, it seems like the most straightforward solution.

function calculateDadRating(car: CarWithData): number {
  return car.type === Car.Toyota ? car.data.dadFactor : -1;
}

However, in cases where this approach doesn't quite fit due to multiple scenarios, you can implement a custom type guard to confirm that the specified car has the dadFactor:

const hasDadFactor = (
  arg: CarWithData,
): arg is CarWithData & { data: DadFactorData } => {
  return typeof (arg.data as DadFactorData).dadFactor === 'number';
};

function getDadRating2(car: CarWithData): number {
  return hasDadFactor(car) ? car.data.dadFactor : -1;
}

Alternatively, you can define a specific type for cars with the dadFactor attribute only.

type CarsWithDadRating<T extends CarWithData = CarWithData> = T extends T
  ? 'dadFactor' extends keyof T['data']
    ? T
    : never
  : never;
function calculateDadRating3(car: CarsWithDadRating): number {
  return car.data.dadFactor;
}

The unique aspect of the third option lies in the usage of T extends T, akin to iterating through a union type.

sandbox

For a more generic adaptation of the third method, an additional generic parameter specifying the type of data desired can be included:

type CarsWithSpecificData<D, T extends CarWithData = CarWithData> = T extends T
  ? T['data'] extends D
    ? T
    : never
  : never;


function calculateDadRating3(car: CarsWithSpecificData<{dadFactor: number}>): number {
  return car.data.dadFactor;
}

sandbox

Answer 2

If we start by checking the car.type, it seems like the most straightforward solution.

function calculateDadRating(car: CarWithData): number {
  return car.type === Car.Toyota ? car.data.dadFactor : -1;
}

However, in cases where this approach doesn't quite fit due to multiple scenarios, you can implement a custom type guard to confirm that the specified car has the dadFactor:

const hasDadFactor = (
  arg: CarWithData,
): arg is CarWithData & { data: DadFactorData } => {
  return typeof (arg.data as DadFactorData).dadFactor === 'number';
};

function getDadRating2(car: CarWithData): number {
  return hasDadFactor(car) ? car.data.dadFactor : -1;
}

Alternatively, you can define a specific type for cars with the dadFactor attribute only.

type CarsWithDadRating<T extends CarWithData = CarWithData> = T extends T
  ? 'dadFactor' extends keyof T['data']
    ? T
    : never
  : never;
function calculateDadRating3(car: CarsWithDadRating): number {
  return car.data.dadFactor;
}

The unique aspect of the third option lies in the usage of T extends T, akin to iterating through a union type.

sandbox

For a more generic adaptation of the third method, an additional generic parameter specifying the type of data desired can be included:

type CarsWithSpecificData<D, T extends CarWithData = CarWithData> = T extends T
  ? T['data'] extends D
    ? T
    : never
  : never;


function calculateDadRating3(car: CarsWithSpecificData<{dadFactor: number}>): number {
  return car.data.dadFactor;
}

sandbox

Answer 3

Answer №2

Here's a potential resolution:

type ExtractData<T> = T extends { info: infer U } ? U : never;

type AllInfoTypes = ExtractData<CarWithInfo>;

type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
    ? I
    : never;

type CarWithPartialInfo = {
    category: Car;
    info: Partial<UnionToIntersection<AllInfoTypes>>;
};

function handleCategory(car: CarWithInfo) {
    switch (car.category) {
        case Car.BMW:
            console.log(`BMW owner discovered with accessory factor of: ${car.info.accessoryFactor}`);
            break;
        default:
            console.log(`Toyota / Fiat owner spotted with speed factor of: ${car.info.speedFactor}`);
    }
}

function getSpeedFactor(car: CarWithData): number {
    return (car as CarWithPartialInfo).info.speedFactor ?? -1;
}

This approach introduces a fresh type where the information type is the partial union of all potential data types. Although not aesthetically pleasing, difficult to decipher, and necessitating casting, it does deliver the desired functionality.

Answer 4

Here's a potential resolution:

type ExtractData<T> = T extends { info: infer U } ? U : never;

type AllInfoTypes = ExtractData<CarWithInfo>;

type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
    ? I
    : never;

type CarWithPartialInfo = {
    category: Car;
    info: Partial<UnionToIntersection<AllInfoTypes>>;
};

function handleCategory(car: CarWithInfo) {
    switch (car.category) {
        case Car.BMW:
            console.log(`BMW owner discovered with accessory factor of: ${car.info.accessoryFactor}`);
            break;
        default:
            console.log(`Toyota / Fiat owner spotted with speed factor of: ${car.info.speedFactor}`);
    }
}

function getSpeedFactor(car: CarWithData): number {
    return (car as CarWithPartialInfo).info.speedFactor ?? -1;
}

This approach introduces a fresh type where the information type is the partial union of all potential data types. Although not aesthetically pleasing, difficult to decipher, and necessitating casting, it does deliver the desired functionality.

Mapping enum types in Typescript with overlapping data can be achieved by following these steps

Answer №1

Answer №2

Similar questions

Leverage ngFor to loop through a "highly intricate" data structure

ngOnInit unable to properly listen to event stream

Is there a way to extract both a and b from the array?

The reducer with typing indicated that it is only able to process the type of "never."

Developing various VueJS TypeScript projects utilizing a shared library

typescript unconventional syntax for object types

Combining property values based on a common property in an array of objects using JavaScript

Lerna and Create React App (CRA) problem: When using the command "lerna run --parallel start", the devServer does not initiate

Is it possible to update a reference to an Observable within an Angular Template?

Changing JSON names to display on a webpage

Deciphering the inner workings of React's DOM updates and mastering its application

The property y is not found on type x during property deconstruction

What is the correct way to convert a non-observable into an observable?

How to retrieve TypeScript object within a Bootstrap modal in Angular

Display embedded ng-template in Angular 6

What could be the reason why the getParentWhileKind method in ts-morph is not returning the anticipated parent of the

Error: MatDialogRef provider is missing in NullInjector

Adding a new property to the Express request object type: what you need to know

Linking ngModel to a Dynamic List of Checkboxes in Angular 2 Using Typescript

Angular 8 shows an error message stating "Unknown Error" when making a REST API request