Typescript: Conflicts between property names in types and interfaces

Question

Typescript: Conflicts between property names in types and interfaces

Consider a scenario where there are 2 types with the same property name but different data types:

type A = {
  myProperty:string
}

type B = {
  myProperty:number
}

If both types are extended using an interface, an error is expected:

interface C extends A, B {}

Interface 'C' cannot simultaneously extend types 'A' and 'B'.
  Named property 'myProperty' of types 'A' and 'B' are not identical.

However, when a type is used to extend both types, no exception occurs. In this case, what will be the resulting data type of myProperty? Is there a method to verify the resulting data type?

type C = A & B; // no error

If C is declared as a type, it is not possible to assign a value (string or number) to myProperty. How can this situation be best managed?

function F(myParameter:C) {
  console.log(myParameter);
}

F({myProperty: 90});

(property) myProperty: never
Type 'number' is not assignable to type 'never'.ts(2322)
index.ts(3, 3): The expected type comes from property 'myProperty' which is declared here on type 'C'

The same error occurs if the function is called as F({myProperty: 'test data'});.

Interactive example: https://codesandbox.io/s/typescript-playground-export-forked-dglbq5?file=/index.ts

typescript types interface

Answer 1

Answer №1

If you're looking to merge two conflicting types while still being able to create the resulting type, there are several approaches you can take. Keep in mind that these solutions won't resolve conflicts for properties nested more than one level deep.

Consider having two interfaces, A and B, that we want to intersect:

interface A {
    a: string
    b: string
}

interface B {
    a: number
    c: string
}

One option is to exclude the conflicting property from the final type:

type IntersectByOmitting<A, B> = {
    [K in keyof (A & B) as K extends keyof A & keyof B 
      ? [A[K] & B[K]] extends [never] 
        ? never 
        : K 
      : K
    ]: K extends keyof A ? A[K] : B[K & keyof B]
}

type T0 = IntersectByOmitting<A, B>
//   ^? type T0 = { b: string; c: string; }

In this case, since 'a' results in 'never' in the intersection, it will be left out of the final type.

Alternatively, you may prefer to have a union of the conflicting properties:

type IntersectByUnion<A, B> = {
    [K in keyof (A & B)]: K extends (keyof A & keyof B) ? 
      [A[K] & B[K]] extends [never] 
        ? A[K] | B[K] 
        : A[K] & B[K]
      : K extends keyof A ? A[K] : B[K & keyof B]
}

type T1 = IntersectByUnion<A, B>
// type T1 = {
//    a: string | number;
//    b: string;
//    c: string;
// }

Now, the type of 'a' becomes 'string | number'.

Playground

Answer 2

If you're looking to merge two conflicting types while still being able to create the resulting type, there are several approaches you can take. Keep in mind that these solutions won't resolve conflicts for properties nested more than one level deep.

Consider having two interfaces, A and B, that we want to intersect:

interface A {
    a: string
    b: string
}

interface B {
    a: number
    c: string
}

One option is to exclude the conflicting property from the final type:

type IntersectByOmitting<A, B> = {
    [K in keyof (A & B) as K extends keyof A & keyof B 
      ? [A[K] & B[K]] extends [never] 
        ? never 
        : K 
      : K
    ]: K extends keyof A ? A[K] : B[K & keyof B]
}

type T0 = IntersectByOmitting<A, B>
//   ^? type T0 = { b: string; c: string; }

In this case, since 'a' results in 'never' in the intersection, it will be left out of the final type.

Alternatively, you may prefer to have a union of the conflicting properties:

type IntersectByUnion<A, B> = {
    [K in keyof (A & B)]: K extends (keyof A & keyof B) ? 
      [A[K] & B[K]] extends [never] 
        ? A[K] | B[K] 
        : A[K] & B[K]
      : K extends keyof A ? A[K] : B[K & keyof B]
}

type T1 = IntersectByUnion<A, B>
// type T1 = {
//    a: string | number;
//    b: string;
//    c: string;
// }

Now, the type of 'a' becomes 'string | number'.

Playground

Typescript: Conflicts between property names in types and interfaces

Answer №1

Similar questions

Using ngFor in Angular with an array consisting of nested arrays

Performing an insertion in TypeORM with a foreign key connection

Receiving an error when trying to import the 'marked' module into an Angular project

Convert a collection of observables containing events to an observable array of events

Implementing Batch File Uploads using Typescript

Transforming an object's type into an array of different types

Universal - Permissible data types for function and constructor arguments

Differences between `typings install` and `@types` installation

Leveraging Global Variables for Validation in Angular (Angular 10)

The function using the React Hook "useState" is not a React function in TypeScript

The Typescript errors is reporting an issue with implementing the interface because the type 'Subject<boolean>' is not compatible with 'Subject<boolean>'

Identify the type of a characteristic based on the discriminant for the associated member of a discriminated union

Restricting array elements through union types in TypeScript

Troubleshooting issues with sorting and pagination in Angular Material table functionality

Example of TypeScript Ambient Namespace Usage

In TypeScript, the type of the second function parameter depends on the type of the first

Receiving an error when triggering an onclick event for a checkbox in TypeScript

Registering a function for chart.js plugins that manipulates external data

What is the best way to ensure the flat list only renders once?

What is the best way to insert CSS code into a custom Vue directive file?