A specific custom data type cannot be reassigned to another custom data type in TypeScript

Question

A specific custom data type cannot be reassigned to another custom data type in TypeScript

Allow me to simplify the question with an example.

type TypeA = 1 | 2;
type TypeB = 3 | 4;
type TypeC = TypeA | TypeB;

const arrayA: TypeA[] = [1, 2];
const arrayB: TypeC[] = [1, 2, 3, 4];

arrayB.forEach((element) => {
  arrayA.includes(element);
            ^^^
});

The argument of type TypeC cannot be assigned to a parameter of type TypeA. Type 3 cannot be assigned to type TypeA.

I understand why it didn't work, but I am struggling to find any solutions to check if arrayA contains an element of element.

typescript

Answer 1

Answer №1

include function requires an element of the same type as the array element. For example, if the array is of type TA, then any element passed to include must also be of type TA. This means that a union type like TC (which combines types TA and TB) may not always match the required type.

In certain scenarios, such as arrays of numbers, allowing strings to be passed into include might not make sense. However, in cases involving unions of literal types, it could be useful to pass an argument that matches one of the literal types within the array. This is because include essentially checks for the presence of the given element. Unfortunately, TypeScript lacks a straightforward way to handle situations where a base type can be allowed if the array element is a literal type.

One effective solution is to use a type assertion:

type TA = 1 | 2;
type TB = 3 | 4;
type TC = TA | TB;

const a: TA[] = [1, 2];
const b: TC[] = [1, 2, 3, 4];

b.forEach((e) => {
  a.includes(e as TA);
});

Playground Link

Answer 2

include function requires an element of the same type as the array element. For example, if the array is of type TA, then any element passed to include must also be of type TA. This means that a union type like TC (which combines types TA and TB) may not always match the required type.

In certain scenarios, such as arrays of numbers, allowing strings to be passed into include might not make sense. However, in cases involving unions of literal types, it could be useful to pass an argument that matches one of the literal types within the array. This is because include essentially checks for the presence of the given element. Unfortunately, TypeScript lacks a straightforward way to handle situations where a base type can be allowed if the array element is a literal type.

One effective solution is to use a type assertion:

type TA = 1 | 2;
type TB = 3 | 4;
type TC = TA | TB;

const a: TA[] = [1, 2];
const b: TC[] = [1, 2, 3, 4];

b.forEach((e) => {
  a.includes(e as TA);
});

Playground Link

A specific custom data type cannot be reassigned to another custom data type in TypeScript

Answer №1

Similar questions

"An error occurred: Uncaught SyntaxError - The import statement can only be used within a module. Including a TypeScript file into a

Is there a way to enforce a mandatory lambda argument?

Listening for Internet Connection in Ionic and Angular

How can I modify the color of the angular stepper progress bar when the next step is active

Explore the use of enumerations within a class

Implementing Asynchronous context tracking within a Remix application utilizing Express as the server

Updating user credentials following a successful setupIntent in Stripe API (with Node.js and React) - A Step-by-Step Guide

Creating a versatile protractor framework to streamline multiple project implementations

What is the best way to extract multiple records from an Array?

Tips for creating a seamless merge from background color to a pristine white hue

Executing a delay in Angular 2+ using setTimeout()

What is the best way to implement strong typing for a socketIO server in TypeScript?

Updating the JWT token in Angular 6 and making a new request with the updated token

Please click twice in order to log in to Angular 16

Utilizing v-for in Vue with TypeScript to generate multiple checkboxes

Is there a way to access every item that includes a particular attribute and attribute term within the woocommerce-rest-api?

What is the best way to interact with a button that has a similar class attribute in Protractor?

Angular ERROR: Trying to access rating property of an undefined value

Invoke a function in Playwright exclusively when the test title includes a specific @tag

Error message not recognized, Ben Awad's instructional video "Complete Stack React GraphQL TypeScript Guide"