Typescript inference for unions not picking up the correct type

Question

Apologies for the vagueness, but I can't use the original files for security. I have four types:

types.js

export type BaseType =  {
  requestType: string;
  otherType: string;
};

export type TypeA = BaseType & {
  typeAThing: string;
  typeAOtherThing: string;
};

export type TypeB = BaseType & {
  typeBThing: string;
  typeBOtherThing: string;
};

export type AnyType = TypeA | TypeB;

File.js

import {AnyType} from './types.js'

export const File = () => {
  const thing:AnyType
  return (<div>{thing.typeBThing}</div>)
}

Throws an error:

Property 'typeBThing' does not exist on type 'AnyType'.
Property 'typeBThing' does not exist on type 'TypeA'.

Why is typescript not infering the correct type based on the structure of the two types it can choose from? I assumed that it would realise, TypeA does not have the property, and then check TypeB and infer it as that. Am I missing something to help make it distinguish them?

Answer 1

How about the following definition for AnyType to achieve what may be desirable...

//Either 

export type AnyType = BaseType & Partial<TypeA | TypeB>; // BaseType & here enforces fields from BaseType

// Or
export type AnyType = Partial<TypeA | TypeB>;

That should allow us to create a value(s) by selectively including fields from TypeA or TypeB.

With above type definition of AnyType, all of the following becomes a possibility...

const x: AnyType = {
    requestType: "string",
    otherType: "string"
}

const y: AnyType = {
    requestType: "string",
    otherType: "string",
    typeAThing: "A"
}

const z: AnyType = {
    requestType: "string",
    otherType: "string",
    typeBThing: "string"
}

const p: AnyType = {
    requestType: "string",
    otherType: "string",
    typeAThing: "A",
    typeBThing: "string",
    typeBOtherThing: "string"
}

---

Limitation Due to Current Definition

With given definitions, and having...

export type AnyType = TypeA | TypeB

Creating a value of AnyType is as good as writing...

const x: AnyType = {
    requestType: "string",
    otherType: "string",
    typeAThing: "A",
    typeBThing: "string",
    typeBOtherThing: "string"
}

Selectively taking out any field from x above will make tsc complain, as a union entails all fields to be mandatory from either types(TypeA and TypeB) as all fields from either types are also not optional as per the provided type definitions.

If we want to leave any field(s) out, we will have to at least ensure that the value must satisfy completely that the resultant type of the value is either TypeA or TypeB.