Typescript: understanding union and Intersection types

by

Given the following:

interface A {
    a: number;
    c: number;
}

interface B{
    b: boolean;
    c: number;
}

Expression of Union type A | B is assignable to either A or B. It must have properties from A or B (or both)

const oA: A | B = {
    a: 6,
    c: 6
}

const oB: A | B = {
    b: true,
    c: 6
}

const oC: A | B = {
    a: 6,
    b: true
    c: 6
}

But what operations does a type like A | B have?
Only these that belong to both A and B

oA.c = 1; // valid

Intersection type A & B, if it is assignable to both A and B (and therefore must have properties of both A and B).

const obj: A & B = {
    a: 6,
    b: true,
    c: 1
}

Update

You ask “why does A & B in your example can take b prop? it’s not assignable to type A”

This is clearly not true.
Any type that has all properties of A can be assigned to A. Extra properties make no harm:

const aAndExtraProp = {
  a: 6,
  d: 6
};

const ca0: A = aAndExtraProp;

You are probably confused by Excess Property Checks for object literals:

Object literals get special treatment and undergo excess property checking when assigning them to other variables, or passing them as arguments. If an object literal has any properties that the “target type” doesn’t have, you’ll get an error:

const ca1: A = {
  a: 6,
  d: 6 //ERROR
};

More Related Contents:

  1. Difference between extending and intersecting interfaces in TypeScript?
  2. Type intersections using any
  3. How do I dynamically assign properties to an object in TypeScript?
  4. What is “not assignable to parameter of type never” error in TypeScript?
  5. Is it possible to restrict TypeScript object to contain only properties defined by its class?
  6. Import class in definition file (*d.ts)
  7. Extending component decorator with base class decorator
  8. TypeScript union of string and string literals
  9. Are strongly-typed functions as parameters possible in TypeScript?
  10. What does the `is` keyword do in typescript?
  11. How to avoid imports with very long relative paths in Angular 2?
  12. TypeScript – use correct version of setTimeout (node vs window)
  13. Is there a way to “extract” the type of TypeScript interface property?
  14. Enforce that an array is exhaustive over a union type
  15. Using latest JavaScript features in TypeScript, such as ES2018
  16. How to define an opaque type in TypeScript?
  17. Why can’t TypeScript infer type from filtered arrays?
  18. Mapping tuple-typed value to different tuple-typed value without casts
  19. TypeScript function return type based on input parameter
  20. NPM package cannot be used as a JSX Component – Type errors
  21. ‘tsc command not found’ in compiling typescript
  22. Declare a type that allows all parts of all levels of another type
  23. Initializers are not allowed in ambient contexts error when installing Blueprint
  24. extend and only specify known properties?
  25. Private “functions” in TypeScript
  26. RxJs get value from observable
  27. Implicitly create a tuple in Typescript
  28. Typescript and filter Boolean
  29. Angular2 – root relative imports
  30. A way to mark arbitrary strings in Typescript Template Literals

Leave a Comment