The data type 'A | B' cannot be assigned to type 'A & B'

Question

The data type 'A | B' cannot be assigned to type 'A & B'

What could be causing the compilation error in this code?

type A = { n: number }
type B = { s: string }
type Thing = {
  a: A
  b: B
}
function update(obj: Thing, path: keyof Thing) {
  obj[path] = obj[path]
}

It seems like both sides of the assignment should have type A | B, but unfortunately the TypeScript compiler returns an error:

error TS2322: Type 'A | B' is not assignable to type 'A & B'.
  Type 'A' is not assignable to type 'A & B'.
    Property 's' is missing in type 'A' but required in type 'B'.

10     obj[path] = obj[path]
       ~~~~~~~~~

Any suggestions on how to resolve this and make it compile successfully?

typescript static-typing union-types

Answer 1

Answer №1

Check out this new code snippet:

function modify<T extends Item>(item: T, property: keyof T) {
  item[property] = item[property]
}

Answer 2

Check out this new code snippet:

function modify<T extends Item>(item: T, property: keyof T) {
  item[property] = item[property]
}

Answer 3

Answer №2

When you access the obj[path] syntax, it may result in either an A or a B. The compiler lacks the information to determine which type it will be, and therefore will not allow the assignment unless all conditions are met:

type key = keyof Thing;
const keys: key[] = ['a', 'b'];

const path = keys[Math.round(Math.random())];
const thing: Thing = {
    a: {
        n: 3
    },

    b: {
        s: 'hi'
    }
};

const result = thing[path]; // A | B, undetermined by the compiler!

Therefore, when using path to access a Thing, the compiler cannot infer whether it is an A or a B. Although we understand that they are equivalent, the compiler is unable to confirm this due to lack of evidence. This same concept applies for the funarg.

If something is statically determinable, the compiler allows the assignment as shown below:

function update(obj: Thing) {
  obj.a = obj.a;
  obj['a'] = obj['a'];
}

Playground

This explanation covers the 'why'. If you are interested in how to help the compiler understand the correct type, refer to this comprehensive answer

Answer 4

When you access the obj[path] syntax, it may result in either an A or a B. The compiler lacks the information to determine which type it will be, and therefore will not allow the assignment unless all conditions are met:

type key = keyof Thing;
const keys: key[] = ['a', 'b'];

const path = keys[Math.round(Math.random())];
const thing: Thing = {
    a: {
        n: 3
    },

    b: {
        s: 'hi'
    }
};

const result = thing[path]; // A | B, undetermined by the compiler!

Therefore, when using path to access a Thing, the compiler cannot infer whether it is an A or a B. Although we understand that they are equivalent, the compiler is unable to confirm this due to lack of evidence. This same concept applies for the funarg.

If something is statically determinable, the compiler allows the assignment as shown below:

function update(obj: Thing) {
  obj.a = obj.a;
  obj['a'] = obj['a'];
}

Playground

This explanation covers the 'why'. If you are interested in how to help the compiler understand the correct type, refer to this comprehensive answer

Answer 5

Answer №3

This issue arises from modifications made in Typescript 3.5 with the aim of enhancing the integrity of indexed access types.

Previously, when an indexed access T[K] was used on the source side of a type relationship, it would result in a union type of the selected properties by T[K]. However, on the target side, it now resolves to an intersection type of the properties chosen by T[K]. This update aims to address issues with unsoundness that arose when the target side also resolved to a union type.

type A = { n: number }
type B = { s: string }
type Thing = { 
  a: A
  b: B
}

declare const thing: Thing

const key = 'a' as keyof Thing

let t = thing[key] // t has type A | B
t = { s: '' }      // we can `safely` assign it a value of type `B`
 
thing[key] = t     // however, this is where problems arise

Explore playground link

Check out this answer for a practical example.

Answer 6

This issue arises from modifications made in Typescript 3.5 with the aim of enhancing the integrity of indexed access types.

Previously, when an indexed access T[K] was used on the source side of a type relationship, it would result in a union type of the selected properties by T[K]. However, on the target side, it now resolves to an intersection type of the properties chosen by T[K]. This update aims to address issues with unsoundness that arose when the target side also resolved to a union type.

type A = { n: number }
type B = { s: string }
type Thing = { 
  a: A
  b: B
}

declare const thing: Thing

const key = 'a' as keyof Thing

let t = thing[key] // t has type A | B
t = { s: '' }      // we can `safely` assign it a value of type `B`
 
thing[key] = t     // however, this is where problems arise

Explore playground link

Check out this answer for a practical example.

Answer 7

Answer №4

To allow for flexibility in key types, you can create an index signature that accepts any key and assigns a value that is an intersection of A & B.

type A = { n: number }
type B = { s: string }
type AB = A & B;
type Entity = {
  [key: string]: AB;
}
function modify(entity: Entity, identifier: keyof Entity) {
  entity[identifier].n = 0;
  entity[identifier].s = "hello";
}

Answer 8

To allow for flexibility in key types, you can create an index signature that accepts any key and assigns a value that is an intersection of A & B.

type A = { n: number }
type B = { s: string }
type AB = A & B;
type Entity = {
  [key: string]: AB;
}
function modify(entity: Entity, identifier: keyof Entity) {
  entity[identifier].n = 0;
  entity[identifier].s = "hello";
}

The data type 'A | B' cannot be assigned to type 'A & B'

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Jest test is experiencing a failure as a result of an imported service from a .ts file

Determining the data type of a generic variable within an Angular component

Error: Unable to locate module: Could not find 'react-server-dom-webpack/client.edge'

When working with TypeScript in Node, the module ""http"" does not have a default export available

attempting to refine an array of objects using another array within it

Using styled-components and typescript to override props

Issue with Angular 6 where data is not binding to the UI on initialization

Exploring Angular 8 Route Paths

Clicking a button in React requires two clicks to update a boolean state by triggering the onClick event

The preflight request in Angular2 is being rejected due to failing the access control check: The requested resource does not have the 'Access-Control-Allow-Origin' header

Can you provide information on the type signature of the `onChange` event for the MUI DatePicker?

Best approach to inform pages about a variable update in Ionic

Tips for ensuring the HTML checkbox element is fully loaded before programmatically selecting it

Breaking up and Substituting text within Angular 8's HTML structure

The 'target' property is not found on the type 'KeyboardEventHandler<HTMLInputElement>'

Can someone guide me on creating a slideshow using Ionic?

Ways to transfer an Object from a service to a component

AngularJS Constants in TypeScript using CommonJS modules

Specifying the return type of a function as a combination of the types of the input arguments

Is the regex returning the correct result?