Utilizing the "or" operator in Typescript alongside Omit<> - A Comprehensive Guide

Question

Utilizing the "or" operator in Typescript alongside Omit<> - A Comprehensive Guide

In the following code snippet:

type WithOr = {a:string} & ({b?:true, c?:never} | {b?:false, c:number})
type Ommited = Omit<WithOr, 'a'>
const m1: Ommited = {b: true};
const m2: WithOr = {...m1, a: 'a'}

An error will be encountered:


Type 'boolean | undefined' is not assignable to type 'false | undefined'.
...

The issue appears to be related to Omit not handling the "or" logic correctly.

Is there an alternative approach to reusing a complex type using Omit (with "or" conditions) without completely redefining it?

For more information, check out this playground link.

typescript typescript-typings

Answer 1

Answer №1

This is related to the functionality of the Omit type in TypeScript. The definition can be found in the lib.es5.d.ts file:

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

The Exclude<keyof T, K> part generates a union containing all keys except those specified in K. In your example, this would result in 'b' | 'c'.

The Pick type then utilizes a mapped type to iterate through these keys and form a new object type:

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

As a result, the datatype becomes "flattened". For instance, with key b, T['b'] resolves to true | false | undefined, but TypeScript simplifies it to boolean | undefined.

Ultimately, you get:

type Ommited = {
    b?: boolean | undefined;
    c?: number | undefined;
}

To improve clarity and reusability, it's advisable to extract the "or" segment into a named type and incorporate that:

type OrPart = {b?:true, c?:never} | {b?:false, c:number}
type WithOr = {a:string} & OrPart
const m1: OrPart = {b: true};
const m2: WithOr = {...m1, a: 'a'}

Playground

Answer 2

This is related to the functionality of the Omit type in TypeScript. The definition can be found in the lib.es5.d.ts file:

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

The Exclude<keyof T, K> part generates a union containing all keys except those specified in K. In your example, this would result in 'b' | 'c'.

The Pick type then utilizes a mapped type to iterate through these keys and form a new object type:

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

As a result, the datatype becomes "flattened". For instance, with key b, T['b'] resolves to true | false | undefined, but TypeScript simplifies it to boolean | undefined.

Ultimately, you get:

type Ommited = {
    b?: boolean | undefined;
    c?: number | undefined;
}

To improve clarity and reusability, it's advisable to extract the "or" segment into a named type and incorporate that:

type OrPart = {b?:true, c?:never} | {b?:false, c:number}
type WithOr = {a:string} & OrPart
const m1: OrPart = {b: true};
const m2: WithOr = {...m1, a: 'a'}

Playground

Utilizing the "or" operator in Typescript alongside Omit<> - A Comprehensive Guide

Answer №1

Similar questions

Filtering an array with radio buttons in Angular

Creating a Typescript version of the mongodb project aggregation functionality

Changing Observable to Promise in Angular 2

Leverage context to facilitate communication between components operating at various levels of the system

Failed to build React app due to TypeScript error in popper.js

I'm curious about the significance of this in Angular. Can you clarify what type of data this is referring

Generating data types based on the output of functions

Troubles with compiling Typescript arise when employing ESM

What methods are available to extract HTML elements from .ts files?

Modify the size of the fabricjs text box to perfectly match the chosen text

Using react-hook-form to easily update form data

Exploring the concept of nested arrays in Angular 2 using Typescript

When exporting a custom ES6 module and importing it into a different local project, you may encounter unexpected outputs such as being undefined or

Developing an npm module encapsulating API contracts for seamless integration with front-end applications using Typescript

Creating a canvas that adjusts proportionally to different screen sizes

Combine two closely related functions into a single function

Transfer all specified resources from one stack to another in AWS CDK

Activating functions based on radio button selection in React with TypeScript

I am eager to perform DOM manipulation similar to jQuery but within the context of Angular 6

Typescript is throwing an error stating that utilizing 'undefined' as an index type is invalid