Proper method of retrieving a property as a designated type within a union type

Question

Proper method of retrieving a property as a designated type within a union type

I have a scenario where I need to return a specific property from a function in various parts of an application. This property can fall into one of two categories, each with string literal properties. One category is an extension of the other. How can I effectively handle returning the same variable cast as one type or the other using a type guard?

type NameA = 'A' | 'B' | 'C'
type NameB = NameA | 'D' | 'E'

function nameTypeGuard(
    name: NameA | NameB
  ): NameA | NameB {
    if (some condition) {
      return name as NameA;
    } else {
      return name as NameB;
    }
  }

angular typescript types casting

Answer 1

Answer №1

One approach to handle return types is by utilizing a Conditional Type. Through the use of Generics, an initial solution may resemble the following:

type NameA = 'A' | 'B' | 'C';
type NameB = 'A' | 'D' | 'E';

function nameTypeGuard<
  T extends NameA | NameB,
  R = T extends NameA ? NameA : NameB
>(
  name: T
): R {
  return name as unknown as R;
}

const a = nameTypeGuard("A");
const b = nameTypeGuard("B");
const c = nameTypeGuard("C");
const d = nameTypeGuard("D");
const e = nameTypeGuard("E");

For more information and to experiment further, you can access the TypeScript Playground here.

Answer 2

One approach to handle return types is by utilizing a Conditional Type. Through the use of Generics, an initial solution may resemble the following:

type NameA = 'A' | 'B' | 'C';
type NameB = 'A' | 'D' | 'E';

function nameTypeGuard<
  T extends NameA | NameB,
  R = T extends NameA ? NameA : NameB
>(
  name: T
): R {
  return name as unknown as R;
}

const a = nameTypeGuard("A");
const b = nameTypeGuard("B");
const c = nameTypeGuard("C");
const d = nameTypeGuard("D");
const e = nameTypeGuard("E");

For more information and to experiment further, you can access the TypeScript Playground here.

Proper method of retrieving a property as a designated type within a union type

Answer №1

Similar questions

What causes the variation in Http Post Response between the Console and Network response tab?

Combining the power of Angular 5 and Spring Thymeleaf for dynamic web

A guide on incorporating ngFor with the flipping card feature in Angular

Is it advisable to deactivate change detection during the initialization phase of an Angular app?

No invocation of 'invokeMiddleware' was suggested

Steps to develop a sub-route specifically for a single word

Update the CSS variables in Angular Material version 15 to reflect new changes

Adjust the class of a component

Having difficulties testing the Angular HTTP interceptor with Karma and Jasmine

Error in Reactive Form: Null Property Reading Issue

Troubleshooting routing: The Location.path() function consistently returns an empty string

What are the best ways to troubleshoot my Angular 2 project?

Having trouble installing Popper.js?

Struggling to locate the ID linked to a specific ObjectId and encountering issues with the import function?

Tap into the live monitoring feature of angular-cli build

You must include the formControlName within a parent formGroup directive

Ways to vertically adjust text using ngStyle depending on the condition

Ways to dynamically emphasize text within ngFor loop

Transform Observable RxJS into practical results

RxJS: Understanding the issue of 'this' being undefined when used within the subscribe method