Using TypeScript to define multiple extended conditions in a single line

Question

Using TypeScript to define multiple extended conditions in a single line

Currently in the process of converting my javascript project to typescript, and I must say, the learning stage has been quite enlightening. Converting the project has taught me a lot so far. While I did encounter a challenge in my code which I managed to resolve, the issue now is that I have multiple conditions for it, and extending 4 or 5 times for the same result seems impractical.

Below is the code snippet:

type GetModel<M> = IsUnion<M> extends true
  ? UserModel
  : M extends typeof types.FRONT
  ? UserModel
  : AdminModel;

Playground: Playground Link

I am aiming to simplify the above code into something more linear, like the example below, but for some reason, it's not functioning as expected:

type GetModel<M> = IsUnion<M> extends true | M extends typeof types.FRONT
  ? UserModel
  : AdminModel;

My goal is to achieve the same result as demonstrated in the playground link above.

type user = GetModel<1 | 2>; // user
type user1 = GetModel<2>; // user
type admin = GetModel<1>; // admin

typescript types

Answer 1

Answer №1

Let's kick things off with the simple logical operator OR, which takes two conditions and evaluates to true if either of them is true, otherwise it returns false.

In order to implement this, we need some utility types from the type-samurai package:

Extends - Checks if the first argument extends the second argument

type Extends<T, Base> = T extends Base ? true : false;

If - Returns the second argument if the first argument is true, otherwise returns the third argument

type If<
  Condition,
  IfTrue = true,
  IfFalse = false
> = Condition extends true ? IfTrue : IfFalse;

IfExtends - Returns the fourth argument if the first argument extends the second argument, else returns the fifth argument

type IfExtends<T, Base, IfTrue = true, IfFalse = false> = If<
  Extends<T, Base>,
  IfTrue,
  IfFalse
>;

IsEmptyArray - Checks if an array is empty or not

type IsEmptyArray<T extends readonly unknown[]> = T extends readonly [
  unknown,
  ...unknown[]
]
  ? false
  : true;

For the logical OR operation, we can leverage the use of If type to determine the outcome based on the conditions provided:

type Or<Condition1, Condition2> = IfExtends<
    Condition1,
    true,
    true,
    IfExtends<Condition2, true>

Testing the implementation:

// true
type Case1 = Or<true, true>
// true
type Case2 = Or<true, false>
// true
type Case3 = Or<false, true>
// false
type Case4 = Or<false, false>

Additionally, for handling more than two conditions, a new type OrArr is introduced to handle arrays of conditions with recursive operations.

Return true if the array is empty

Implementation of OrArr:

(implementation code here)

... (remaining content follows similarly as in the original text)

Answer 2

Let's kick things off with the simple logical operator OR, which takes two conditions and evaluates to true if either of them is true, otherwise it returns false.

In order to implement this, we need some utility types from the type-samurai package:

Extends - Checks if the first argument extends the second argument

type Extends<T, Base> = T extends Base ? true : false;

If - Returns the second argument if the first argument is true, otherwise returns the third argument

type If<
  Condition,
  IfTrue = true,
  IfFalse = false
> = Condition extends true ? IfTrue : IfFalse;

IfExtends - Returns the fourth argument if the first argument extends the second argument, else returns the fifth argument

type IfExtends<T, Base, IfTrue = true, IfFalse = false> = If<
  Extends<T, Base>,
  IfTrue,
  IfFalse
>;

IsEmptyArray - Checks if an array is empty or not

type IsEmptyArray<T extends readonly unknown[]> = T extends readonly [
  unknown,
  ...unknown[]
]
  ? false
  : true;

For the logical OR operation, we can leverage the use of If type to determine the outcome based on the conditions provided:

type Or<Condition1, Condition2> = IfExtends<
    Condition1,
    true,
    true,
    IfExtends<Condition2, true>

Testing the implementation:

// true
type Case1 = Or<true, true>
// true
type Case2 = Or<true, false>
// true
type Case3 = Or<false, true>
// false
type Case4 = Or<false, false>

Additionally, for handling more than two conditions, a new type OrArr is introduced to handle arrays of conditions with recursive operations.

Return true if the array is empty

Implementation of OrArr:

(implementation code here)

... (remaining content follows similarly as in the original text)

Using TypeScript to define multiple extended conditions in a single line

Answer №1

Similar questions

In TypeScript, vertical bars and null are commonly used for type unions

Issue encountered with the inability to successfully subscribe to the LoggedIn Observable

How can I access the results returned by Firebase functions?

Creating TypeScript definition file bundle using webpack

The term "define" is not recognized when constructing a Next.js application

a guide on accessing key value elements within an array using Ionic 3

The main module's postinstall process is initiated before the sub-module's postinstall process

What is the reason for TypeScript disabling unsecure/non-strict compiler rules by default?

Is it possible to integrate TypeScript 5.0 decorators into React components?

Discover the latest DOM elements using Webdriverio 5

Convert an object to an array, but only if it is not already an array

Organizing Firebase functions: Managing multiple functions and dependencies

Using Omit<T,K> with enums does not yield the expected result in Typescript

Error encountered while testing karma: subscription function is not recognized

What causes TypeScript to automatically infer a default property when dynamically importing a JavaScript file that lacks a default export?

Excluding the decimal point from version 1.0 in an API response with Angular 5

Resolving NgModule Import Errors During Migration of Angular Project from Version 11 to 16

Incorrect type declarations in Typescript navigation.push in React Native cause unexpected behavior

How can I establish default values for 2 to 3 options in a Dropdownlist?

What is the best way to store the output of a function in a local variable?