What is preventing the combination of brand enums in Typescript 3?

Utilizing brand enums for nominal typing in TypeScript 3 has been a challenge for me. The code snippet below demonstrates the issue:

export enum WidgetIdBrand {}
export type WidgetId = WidgetIdBrand & string;

const id:WidgetId = '123' as WidgetId;

Although this code works perfectly in TypeScript 2.8 and 3.0.3, I encountered a problem when unioning WidgetId with other types in TS 3.0.3. The compiler seems to be treating (EnumType & string) as 'never' only when it's in a union:

const id2: WidgetId | null = id;
// Type 'WidgetId' is not assignable to type 'null'.

Interestingly, some union combinations work fine while others don't:

const id1: WidgetId = id;                   // works
const id2: WidgetId | null = id;            // error
const id3: WidgetId | undefined = id;       // error
const id4: WidgetId | number = id;          // works!?
const id5: WidgetId | boolean = id;         // error
const id6: WidgetId | { kind: 'bar' } = id; // error
const id7: WidgetId | {} = id;              // works!?

Is there a workaround to make brand enums function correctly in unions in TypeScript 3?

Answer №1

Through some trial and error, a solution was discovered. The issue appears to stem from the empty brand enum being mistakenly treated as an extension of number, causing number & string to collapse into never when combined with other types.

To resolve this, an unused string value must be added to the brand enum so that it properly extends string (ultimately rendering the brand enum unnecessary).

The code below demonstrates the successful implementation:

export enum WidgetId { _unused = '¯\_(ツ)_/¯'}

const id: WidgetId = '123' as WidgetId;

const id1: WidgetId = id;                   
const id2: WidgetId | null = id;            
const id3: WidgetId | undefined = id;       
const id4: WidgetId | number = id;          
const id5: WidgetId | boolean = id;         
const id6: WidgetId | { kind: 'bar' } = id; 
const id7: WidgetId | {} = id;              

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

The error `TypeError: Unable to access properties of an undefined value (reading 'authService')` occurred

I'm attempting to check if a user is already stored in local storage before fetching it from the database: async getQuestion(id: string): Promise<Question> { let res: Question await this.db.collection("questions").doc(i ...

The element is inherently an 'any' type as the expression of type 'number' does not have the capability to index type 'Object'

Hey there, I'm currently in the process of learning Angular and following along with the Note Mates tutorial on YouTube. However, I've hit a stumbling block as I attempt to implement sorting by relevancy. The issue lies with the code snippet belo ...

The mystery of the undefined return value in my Ionic v4 get function

I attempted to retrieve my location by saving the latitude and longitude, but my declared variable isn't returning anything. Take a look at my code snippet: public device_location: any = {}; constructor(private geolocation: Geolocation) { this.s ...

`Why are some options missing from the "New Item" feature in Visual Studio?`

Recently, I started a Cordova project using Visual Studio 2015. To my surprise, when I attempt to add a new item by right-clicking, I am presented with only a limited number of options. For example, I wanted to add a "TypeScript json config file" (known as ...

Struggle with typescript integration with emotion and styled components

Issue Description: I encountered an issue while working with typescript and emotion/styled libraries. When attempting to specify the type of the parent component that wraps a styled component, I faced difficulties. The scenario involves a parent componen ...

Updating the value of a key in an object is not functioning as expected

There is a single object defined as requestObject: any = { "type": 'type1', "start": 0, "size": 10, "keywords": ['abcd','efgh'], filters: [], } Next, attempting to change the value for keyword, I updat ...

How can I retrieve the express Application within a REST API?

After reviewing Massive's documentation and learning that saving the connection object to Express's application settings can help reduce database connection execution time, I encountered a problem. How can one access the Express app variable when ...

What is the correct way to utilize default props in a Typescript-powered React component?

Recently diving into React, I find myself working on a basic child-component. My goal is to establish default props so that if no specific prop is provided when the component is invoked, it automatically resorts to the preset defaults. Here's what I&a ...

Understanding React and TypeScript Higher Order Components: How to Resolve the Type '{}' is not assignable to Type P Error

While following along with the Learning React with TypeScript book, I encountered a problem where I hit a wall while coding. Despite surrendering and copying code directly from the book, the compiler is still unhappy As a temporary solution, I have resort ...

Encountering issues with accessing a variable before its initialization in the getServerSideProps function in

Currently, I am working on setting up Firebase and configuring the APIs and functions to retrieve necessary data in my firebase.tsx file. Afterwards, I import them into my pages/index.tsx file but I am encountering an issue where I cannot access exports af ...

Uncover the content of a base64 encoded string and convert it into

A JSON response has been linked on the user's request to retrieve an excel document. The structure of the response is as follows: { "format": // file extn ----only xls "docTitle": //file name "document" :// base 64 encoded data } The attem ...

The repository injected into NestJs using TypeORM suddenly becomes null

In my code, I am fetching Requisition data from an external system using the following approach: init() { const requisitionData = this.loginMb().pipe( map(response => response.data.token), switchMap(loginData => this.getRequisitions(loginD ...

Invoke a function in Angular when the value of a textarea is altered using JavaScript

Currently, I am working with angular and need to trigger my function codeInputChanged() each time the content of a textarea is modified either manually or programmatically using JavaScript. This is how my HTML for the textarea appears: <textarea class ...

Transforming TypeScript declaration files into Kotlin syntax

Has there been any progress on converting d.ts files to Kotlin? I came across a post mentioning that Kotlin developers were working on a converter, but I am unsure about the current status. I also found this project, which seems to be using an outdated c ...

The exported variable 'SAlert' is utilizing the name 'AlertInterface' from an external module

Utilizing the antd alert component (ts) with styled components import styled from 'styled-components'; import Alert from 'antd/es/alert'; export const SAlert = styled(Alert)` && { margin-bottom: 24px; border-radiu ...

What is the best way to create unit tests for a React component using TypeScript?

I recently completed a small React project using TypeScript and decided to have it print numbers of li tags in the browser. During this process, I wanted to write unit tests that would test if the component created the HTML element . However, as someone ...

Create a NfcV Write Lock Block instruction

Seeking to make data on a NXP ICODE SLIX SL2S2002 tag type 5 (ISO 15693) read-only by utilizing the WRITE SINGLE BLOCKS command through the NfcV object in an app based on Ionic: private readonly cmdISO15693 = { READ_SINGLE_BLOCK: 0x20, WRITE_SI ...

Injecting Dependencies with Angular 2 and the Ability to Include Optional Parameters

One issue I'm facing is that I have multiple components in my Angular 2 application that require the same dependency. This specific dependency needs a string for the constructor. How can I instruct angular2 to use a specific instance of this type for ...

Using react-confetti to create numerous confetti effects simultaneously on a single webpage

I'm looking to showcase multiple confetti effects using the react-confetti library on a single page. However, every attempt to do so in my component seems to only display the confetti effect on the last element, rather than all of them. The canvas fo ...

Emphasize x-axis heading in a Highcharts graph

In my Highcharts bar graph, I am looking for a way to dynamically highlight the x-axis label of a specific bar based on an external event trigger. This event is not a standard click interaction within the Highcharts graph. Currently, I have been able to r ...