Deducing data types from arrays containing both narrow and wide elements

Question

Deducing data types from arrays containing both narrow and wide elements

const ElemText = { value: string };
const ElemData = { value: string, numId: number };
 
function combineElements(
  elementsText: Array<ElemText>,
  elementsData: Array<ElemData>
) {
  const combinedElements = [...elementsText, ...elementsData];
  // const items: ElemText[]
}

Why is combinedElements of type ElemText[] and not Array<ElemText | ElemData>? It appears that the specific details about the broader type (ElemData) are being disregarded.

typescript

Answer 1

Answer №1

Take a look at this scenario:

type ProductNew = { name: string };
type ProductExisting = { name: string, id: number };

type Inventory = ProductNew | ProductExisting
declare var inventory: Inventory

const item = inventory.name // only the name property can be accessed

Since both types have the common property name, you are allowed to access the name property.

Because we cannot determine if inventory contains an id or not. Allowing access to the id property in this case could lead to potential runtime errors.

Now let's revisit your initial example:

type ProductNew = { name: string };
type ProductExisting = { name: string, id: number };

function mergeProducts(
    newProducts: Array<ProductNew>,
    existingProducts: Array<ProductExisting>
) {
    const products =  [...newProducts, ...existingProducts];
}

In this case, products is a union of

Array<ProductNew> | Array<ProductExisting>

. The same rule applies here where only the name property is considered safe to access.

If you wish to be able to access the id property as well, you can use the following helper function:

type ProductNew = { name: string };
type ProductExisting = { name: string, id: number };

type UnionKeys<T> = T extends T ? keyof T : never;
type StrictUnionHelper<T, TAll> =
    T extends any
    ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>> : never;

type StrictUnion<T> = StrictUnionHelper<T, T>


function mergeProducts(
    newProducts: Array<ProductNew>,
    existingProducts: Array<ProductExisting>
) {
    const mergedProducts: Array<StrictUnion<ProductNew | ProductExisting>> = [...newProducts, ...existingProducts];
    mergedProducts[0].name // okay
    mergedProducts[0].id // number | undefined
}

Answer 2

Take a look at this scenario:

type ProductNew = { name: string };
type ProductExisting = { name: string, id: number };

type Inventory = ProductNew | ProductExisting
declare var inventory: Inventory

const item = inventory.name // only the name property can be accessed

Since both types have the common property name, you are allowed to access the name property.

Because we cannot determine if inventory contains an id or not. Allowing access to the id property in this case could lead to potential runtime errors.

Now let's revisit your initial example:

type ProductNew = { name: string };
type ProductExisting = { name: string, id: number };

function mergeProducts(
    newProducts: Array<ProductNew>,
    existingProducts: Array<ProductExisting>
) {
    const products =  [...newProducts, ...existingProducts];
}

In this case, products is a union of

Array<ProductNew> | Array<ProductExisting>

. The same rule applies here where only the name property is considered safe to access.

If you wish to be able to access the id property as well, you can use the following helper function:

type ProductNew = { name: string };
type ProductExisting = { name: string, id: number };

type UnionKeys<T> = T extends T ? keyof T : never;
type StrictUnionHelper<T, TAll> =
    T extends any
    ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>> : never;

type StrictUnion<T> = StrictUnionHelper<T, T>


function mergeProducts(
    newProducts: Array<ProductNew>,
    existingProducts: Array<ProductExisting>
) {
    const mergedProducts: Array<StrictUnion<ProductNew | ProductExisting>> = [...newProducts, ...existingProducts];
    mergedProducts[0].name // okay
    mergedProducts[0].id // number | undefined
}

Deducing data types from arrays containing both narrow and wide elements

Answer №1

Similar questions

While validating in my Angular application, I encountered an error stating that no index signature with a parameter of type 'string' was found on type 'AbstractControl[]'

Testbed: Issue encountered: Unable to resolve all parameters for PriDateInput component

TS & Angular: Unlocking the Power of Conditional Interfaces

The parameters of a generic class in Typescript are customizable and

Error: Unable to find provider for Store in Angular 9 AuthService Guard

Contrasting EventEmitter and Output Decorators in Angular-Cli

How to efficiently retrieve parent content from a child component

Standard layout for a project with equally important server and client components

What determines the narrowing of a type when it is defined as a literal versus when it is returned from a function?

Unable to set the opacity of rc-tooltip to 1

The feature of Nuxt 3's tsconfig path seems to be malfunctioning when accessed from the

Create a TypeScript interface for an object with hyphens as the property keys

Can you guide me on how to specify the return type in NestJS for the Session User in a request?

Solving the problem of cookieParser implementation in NestJS

What is the best way to arrange items by utilizing the Array index in JavaScript?

Can you explain to me the significance of `string[7]` in TypeScript?

How can we effectively implement alert notifications for validating image sizes and formats prior to uploading?

The Freemode feature in SwiperJS is not functioning properly when used with React TypeScript

"Null value is no longer associated with the object property once it has

What is the correct way to convert a base type value to its extended type in TypeScript?