Code fails on union when it works fine with both members

Bug Report

🔎 Search Terms

Union all members

🕗 Version & Regression Information

• This changed between versions 4.5.5 and 4.6.4 with the error appearing for the parameters with preapplied narrowing, and again between 4.7.4 and 4.8.4 in the example with type guards. Prior to version 4, the complex type derivation fails.
• I reviewed the FAQ for entries about union types
• Nightly version at time of test: v5.0.0-dev.20230123

⏯ Playground Link

Playground link with relevant code

💻 Code

import BN from "bn.js";
interface BoatDataAPI { //Externally defined API, can't be changed
    requiresLicense: (id: string) => boolean;
    maxGroundSpeed: (id: string) => BN;
    description: (id: string) => string;
    displacement: (id: string) => number;
}
//The example below requires somewhat complex type generation.
//The next few lines aim to provide just the complexity needed for the demo,
//without showing all its necessary origins.
//In the inspiring example, type derivation is way more complex,
//with other modifications along the derivation process.
type TupleToObject<T extends [string, any]> = { [key in T[0]]: Extract<T, [key, any]>[1] };
type Attributes = TupleToObject<{
    [F in keyof BoatDataAPI]: [attributeName: F, attributeType: ReturnType<BoatDataAPI[F]>]
}[keyof BoatDataAPI]>;
type AttributeType<A extends keyof BoatDataAPI> = Attributes[A]; //can also be directly used in the example
//A simpler derivation of the type, such as either of the following,
//works for this toy example but not the inspiring example.
type AttributesSimpler = {requiresLicense: boolean; maxGroundSpeed: BN; description: string; displacement: number;}
type AttributeTypeSimpler<A extends keyof BoatDataAPI> = ReturnType<BoatDataAPI[A]>;
//This demo is about the unexpected behavior when each element of a union type works but the union fails.
export const demoFn = function<
    FN extends keyof Attributes
> (
    attributeName: FN, //to clarify that this is known/specified
    attributeValue: AttributeType<FN>,
    //These simulate variables subjected to type guards within the function:
    withNumber : (AttributeType<FN> & number),
    withBN : (AttributeType<FN> & BN),
    withEither : (AttributeType<FN> & number) | (AttributeType<FN> & BN)
) {
    attributeValue.toString(); //works fine, even without type guards
    withNumber.toString(); //works fine
    withBN.toString(); //works fine
    withEither.toString(); //should equal one of the two above & work fine, but doesn't
    let myString : string;
    //Concise code which is not allowed in TypeScript:
    if((typeof attributeValue === 'number') || (BN.isBN(attributeValue))) {
        myString = attributeValue.toString(); //demo with using OR in type guard shows that concise code fails
    }
    //Where that JavaScript code exists for conversion, it must be rewritten as:
    if(typeof attributeValue === 'number') {
        myString = attributeValue.toString(); //works fine, same as withNumber
    } else if(BN.isBN(attributeValue)) {
        myString = attributeValue.toString(); //works fine, same as withBN
    }
}

🙁 Actual behavior

The TypeScript compiler reports an error when the efficiently-written type guard is used and requires that the code be broken out into two conditions. It is not easy to figure out that this is the solution, and the error does not help, nor is this solution on the short list of things to try because it goes against good programming practices. (This solution also does not scale up well when the union has more than two members and a type guard function is being used to narrow the type to one of the members.)

🙂 Expected behavior

Even when the types involved are derived through a complex process, TypeScript still supports efficiently written code, and none of the code above throws a TypeScript error.

Start with the linked Playground reproduction and the generic AttributeType example, comparing the diagnostics for withEither and the combined type guard with the separate conditions. Check the reported behavior across the mentioned TypeScript versions, then trace the compiler's union narrowing and type-guard handling. Done means the concise union case type-checks without regressing the existing separate-branch cases.