Develop a TypeScript type system equivalent to a C-style union

I am currently working on creating a versatile type that accurately represents the structure of a C union value in TypeScript. To illustrate, consider this initial type definition:

type UserIdentifier = {
  id: string;
  dateCreated: string;
  names: {
    first: string;
    last: string;
  }  
};

After some modifications, the type should transform into the following format:

type UserIdentifier = {
  id: string;
  dateCreated?: undefined;
  names?: undefined;
} | {
  id?: undefined;
  dateCreated: string;
  names?: undefined;
} | {
  id?: undefined;
  dateCreated?: undefined;
  names: {
    first: string;
    last: string;
  };
};

The explicit inclusion of undefined for other properties as well as making them optional is necessary because TypeScript does not issue errors if there are additional properties in one part of the union that were not present in the original declaration. This behavior can be seen in the following example:

const f: { first: string; } | { last: string; } = { first: "hey", last: "you" };

Answer №1

To achieve this, you can utilize mapped types and generics. The process involves iterating through the keys of T, creating an object with the current key and its corresponding value, and then combining it with another object that contains all other keys except the current one set to undefined as optional. Below is the solution:

type CUnion<T extends Record<PropertyKey, unknown>>
  = { [K in keyof T]: { [_ in K]: T[K] } & { [_ in Exclude<keyof T, K>]?: undefined } }[keyof T];

type UserIdentifier = CUnion<{
  id: string;
  dateCreated: string;
  names: {
    first: string;
    last: string;
  }  
}>;

function testIds(...args: UserIdentifier[]) {}

testIds(
  { id: "hey" },  // passes correctly
  { dateCreated: "hey" },  // passes correctly
  { names: { first: "hey", last: "you" } },  // passes correctly
);

const fail1: UserIdentifier = { names: { first: "", last: "" }, id: "" } // fails as expected
const fail2: UserIdentifier = { id: "hey", dateCreated: "hey" }  // fails as expected

TypeScript Playground Link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for removing the notification that the .ts file is included in the TypeScript compilation but not actively used

After updating angular to the latest version 9.0.0-next.4, I am encountering a warning message even though I am not using routing in my project. How can I get rid of this warning? A warning is being displayed in src/war/angular/src/app/app-routing.modul ...

Is it possible to utilize a TypeScript type in conjunction with io-ts?

Currently, I am in the process of validating API responses with io-ts. In my TypeScript setup, I have already defined the following data structure: export type Group = { id: number; name: string; } Now, my objective is to incorporate this type into ...

Vue.js with TypeScript: The property 'xxx' is not found on the type 'never'

I have a computed method that I am trying to execute: get dronesFiltered(){ const filtered = this.drones.filter((drone) => { return drone.id.toString().indexOf(this.filterId) > -1 && drone.name.toLowerCase().toString().in ...

What is the reason behind typescript not needing `undefined` with the ?: operator on arrays?

type Artifact = { a:string } const items : Artifact[] = []; // this will result in a syntax error let z?: Artifact; // assigning undefined to a variable of type Artifact is an error const b : Artifact = undefined; // despite expectations, this assi ...

"Observables in RxJs: Climbing the Stairs of

Previously, I utilized Promise with async/await syntax in my Typescript code like this: const fooData = await AsyncFooData(); const barData = await AsyncBarData(); ... perform actions using fooData and barData However, when using RxJs Observable<T> ...

Steps for wrapping a class with a higher order component

Is it feasible to encapsulate a class component within a higher order component (HOC) that is also a class? import React, { Component } from "react"; import { View } from "react-native"; import { Toast } from "react-native-easy-toast"; const withToast = ...

Concatenate all sub-items within a JSON object

I have 2 Objects like this : [ { _id: ObjectId("62990f96345ef9001d9f2dfe"), deletedAt: null, expiredAt: ISODate("2022-06-05T19:29:26.746Z"), dataBarang: [ { vendor: ObjectId("6215dd91139c99003fe4c7cd ...

What is the best way to generate a dynamically interpolated string in JavaScript?

I'm currently developing a reusable UI component and am exploring options to allow the user of this component to provide their own template for a specific section within it. Utilizing TypeScript, I have been experimenting with string interpolation as ...

Utilizing a conditional ngIf statement in HTML or incorporating a variable within typescript for logical operations

When working with our application, we often need to display or hide a button based on specific logic. Where do you think it is best to define this logic and why? In HTML: *ngIf='logic goes here' //Or *ngIf='someBoolean' and in Type ...

When I receive a 404 response from the API, I aim to start my observable

How can I trigger my observable initialization when receiving a 404 response from the API? The code snippet below is not working as expected. const urlParams = { email: this.email }; this.voicesProfileObservable$ = this.service.request<any>( AVAI ...

The 'style' property is not found within the 'EventTarget' type

Currently, I am utilizing Vue and TypeScript in an attempt to adjust the style of an element. let changeStyle = (event: MouseEvent) => { if (event.target) { event.target.style.opacity = 1; Although the code is functional, TypeScript consist ...

Typescript's dynamic React component and its conditional types

I am currently working on a dynamic React component and I am facing an issue with properly passing the correct propType based on the selected component. The error arises when using <SelectComponent {...props.props} /> because the props do not match t ...

Managing the browser's "back" button functionality in React

I am currently using "react-dom-router v6.3.0" (strictly!) and I am struggling to figure out how to manage the browser's "back" button functionality. Specifically, I want to be able to detect when the user clicks the back button so that I can display ...

Unable to append item to document object model

Within my component, I have a snippet of code: isLoaded($event) { console.log($event); this.visible = $event; console.log(this.visible); this.onClick(); } onClick() { this.listImage = this.imageService.getImage(); let span = docu ...

Is the Angular Library tslib peer dependency necessary for library publication?

I have developed a library that does not directly import anything from tslib. Check out the library here Do we really need to maintain this peer dependency? If not, how can we remove it when generating the library build? I have also posted this question ...

Utilizing a string as an index in TypeScript

Struggling with the following code snippet: interface IStudentType { [key: `${Students}`]: IStudent | IStudentMaths| IStudentPhysics } The error message received is TS1268: An index signature parameter type must be 'string', &apos ...

Building Interactive Graphs with Chart.JS in Angular Using Observables

Having some difficulty setting up a Chart with Angular and Chart.JS. I'm struggling to pass my Observable data into the Chart, no matter what I try. error TS2339: Property 'cool_data' does not exist on type 'Observable<Object>&a ...

Is it possible to dynamically insert additional fields when a button is clicked?

My FormGroup is shown below: this.productGroup = this.fb.group({ name: ['', Validators.compose([Validators.required, Validators.maxLength(80)])], desc: ['', Validators.maxLength(3000)], category: ['', Validators.require ...

Angular 14 Observables are not triggering resize events

There seems to be an issue here, as the code is not being triggered at all. The console log is not printing and this.width is not changing. constructor(private host: ElementRef, private zone: NgZone) {} public ngOnInit(): void { this.observer = new Re ...

Typescript is experiencing an error due to the use of attr("disabled", false) causing a disruption

Within my ts file, I'm using the code snippet below: $('input[type=hidden]').attr("disabled", false); The code functions as intended, however, an error persists: Argument of type 'false' is not assignable to parameter of typ ...