How to remove a specific type from a generic type in Typescript without using Exclude<>?

Question

How to remove a specific type from a generic type in Typescript without using Exclude<>?

I am looking for a solution to prevent my function from working with Moment objects when storing values in local storage. Currently, the function dynamically stringifies and stores values, but I want to exclude Moment objects from being processed. Here is an example of the syntax:

public static set<TValue>(
       key: LocalStorageKeyEnum,
       value: TValue,
       ...keySuffixes: string[]
   ) {
       localStorage.setItem(
           LocalStorage.buildKey(key, keySuffixes),
           JSON.stringify(value)
       )
   }

If the second argument passed to the function is a Moment object, it works fine, but I want to restrict this behavior by excluding Moment objects from <TValue>. Is there a way to achieve this using Typescript without resorting to run-time checks? One approach could be to create two types, one that includes all values and another that excludes Moment objects, like this:

type Variants = {
   value: TValue,
   date: moment.Moment
}

type ExcludeDate = Exclude {typeof Variants, "date"}

However, I am curious if there are alternative methods to achieve this goal. Any suggestions or advice would be greatly appreciated! As I am new to Typescript, I apologize if my question is unclear.

javascript typescript types

Answer 1

Answer №1

If you want to exclude a specific type, you can use conditional types like this:

type CustomType = { data: string } // just an example simulation of a custom type

function process<TValue>(
       key: string,
       value: TValue extends CustomType ? never : TValue, // check this condition
       ...additionalKeys: string[]
   ) {
       // custom implementation here
}

process('key', { data: 'example' }) // will trigger an error as it matches the CustomType
process('key', { value: 'example' }) // valid because it does not match the CustomType

The crucial line is

value: TValue extends CustomType ? never : TValue

. This means that if the passed type matches our CustomType, the value will be of type never, which indicates that no value can be passed. Never is an empty type with no instances.

In this example, CustomType is used for illustration purposes, but you can replace it with any other type you wish to exclude.

Answer 2

If you want to exclude a specific type, you can use conditional types like this:

type CustomType = { data: string } // just an example simulation of a custom type

function process<TValue>(
       key: string,
       value: TValue extends CustomType ? never : TValue, // check this condition
       ...additionalKeys: string[]
   ) {
       // custom implementation here
}

process('key', { data: 'example' }) // will trigger an error as it matches the CustomType
process('key', { value: 'example' }) // valid because it does not match the CustomType

The crucial line is

value: TValue extends CustomType ? never : TValue

. This means that if the passed type matches our CustomType, the value will be of type never, which indicates that no value can be passed. Never is an empty type with no instances.

In this example, CustomType is used for illustration purposes, but you can replace it with any other type you wish to exclude.

How to remove a specific type from a generic type in Typescript without using Exclude<>?

Answer №1

Similar questions

Convert angular-tree-component JSON into a suitable format and dynamically generate checkboxes or radio buttons

Troubleshooting Typescript app compilation problem in a Docker environment

How to use jQuery to delete the final table in an entire HTML document

Using the information selected from the dropdown menu, the table was refined through an AJAX request

iterating over a large multidimensional array in JavaScript

Tips for properly implementing an enum in TypeScript when using the React useState hook

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

What is the best way to trigger the code within my useEffect React hook to execute again upon refreshing the page?

Using the -t or --testNamePattern in Jest will execute all tests

Having difficulty with Angular's ng-options feature in a Select element

"Triggering an event after selecting and opening a file with an input of type file

Extract the last word from a string, filter out any special characters, and store it in an array

How can I prevent right-clicking with Ctrl+LeftMouseClick in Firefox on MacOS?

Testing for the presence of a child element within a parent component in React

Expanding the Mui Typescript breakpoints within a TypeScript environment

Extract the href value from an element and append it to the src attribute of an image

Encountered an npm compilation error - Unable to locate module: bootstrap-theme.css

Why does the second JavaScript form validation not function correctly when compared to the first?

Dealing with nullable properties in Typescript

The evaluation of mongodb-memory-server is experiencing issues with either failing or timing out