Type guard does not narrow down the union type

Question

Type guard does not narrow down the union type

Explore the following code snippet:

type UnionType = 'foo' | 'bar' | 'baz'

const obj = {
    foo: 'huh',
    bar: 'hmm'
}

function func(input: UnionType) {
    if(input in obj) {
        input
    }
}

Interactive Demo

input is not being narrowed down to 'foo' | 'bar'. What could be causing this behavior?

Can you suggest a method to narrow the union without explicitly repeating the object keys?

typescript

Answer 1

Answer №1

In the realm of TypeScript, input in obj currently serves as a type guard for obj, but not for input. There is a pending feature request at microsoft/TypeScript#43284 requesting it to function as a type guard for input as well. However, implementation seems unlikely due to concerns mentioned in this comment, where it is deemed that such behavior could lead to issues with existing type guards.

It's important to note that this form of narrowing has always been viewed skeptically, as TypeScript types are not "sealed" (or "exact," as referred to in microsoft/TypeScript#12936). Just because input in obj returns true, it does not confirm that input is one of the known keys of typeof obj. To illustrate, consider the following alteration to your code:

const _obj = {
    foo: 'huh',
    bar: 'hmm',
    baz: 'oops'
}

const obj: { foo: string, bar: string } = _obj; // valid

Despite the change, the compilation proceeds without errors since the type {foo: string, bar: string} allows for additional properties. If TypeScript underwent the desired narrowing, input in obj would limit input to "foo" | "bar", yet, it might still be "baz". Thus, such a method of narrowing would pose risks.

This doesn't mean it should never be considered; after all, TypeScript is not entirely foolproof when it comes to type safety. Applying a similar argument, it wouldn't be entirely secure to narrow a value o of type {a: string} | {b: string} based on "a" in o, although it currently happens:

const a: { a: string } = { a: "" };
const _b = { b: "", a: 123 };
const b: { b: string } = _b;
const o = Math.random() < 0.5 ? a : b;
if ("a" in o) {
    o // narrowed to { a: string }, unsafely
    o.a.toUpperCase() 
}

While soundness is a crucial aspect, there are other factors to consider. Until any potential shift in perspective from the TS team occurs, the desired narrowing may not materialize. Alternately, finding workarounds becomes imperative.

One simple workaround involves crafting a user-defined type guard function that mimics the anticipated behavior of input in obj. In microsoft/TypeScript#43284, such a function is provided:

const in_ = <K extends string, O extends object>(key: K, object: O):
    key is K & keyof O => key in object;

By substituting in_(input, obj) for input in obj, you can observe the expected outcomes:

function func(input: UnionType) {
    if (in_(input, obj)) {
        input
        //^? (parameter) input: "foo" | "bar"
    } else {
        input
        //^? (parameter) input: "baz"
    }
}

The matter of soundness remains subject to your judgment based on the particular use case at hand.

Playground link to code

Answer 2

In the realm of TypeScript, input in obj currently serves as a type guard for obj, but not for input. There is a pending feature request at microsoft/TypeScript#43284 requesting it to function as a type guard for input as well. However, implementation seems unlikely due to concerns mentioned in this comment, where it is deemed that such behavior could lead to issues with existing type guards.

It's important to note that this form of narrowing has always been viewed skeptically, as TypeScript types are not "sealed" (or "exact," as referred to in microsoft/TypeScript#12936). Just because input in obj returns true, it does not confirm that input is one of the known keys of typeof obj. To illustrate, consider the following alteration to your code:

const _obj = {
    foo: 'huh',
    bar: 'hmm',
    baz: 'oops'
}

const obj: { foo: string, bar: string } = _obj; // valid

Despite the change, the compilation proceeds without errors since the type {foo: string, bar: string} allows for additional properties. If TypeScript underwent the desired narrowing, input in obj would limit input to "foo" | "bar", yet, it might still be "baz". Thus, such a method of narrowing would pose risks.

This doesn't mean it should never be considered; after all, TypeScript is not entirely foolproof when it comes to type safety. Applying a similar argument, it wouldn't be entirely secure to narrow a value o of type {a: string} | {b: string} based on "a" in o, although it currently happens:

const a: { a: string } = { a: "" };
const _b = { b: "", a: 123 };
const b: { b: string } = _b;
const o = Math.random() < 0.5 ? a : b;
if ("a" in o) {
    o // narrowed to { a: string }, unsafely
    o.a.toUpperCase() 
}

While soundness is a crucial aspect, there are other factors to consider. Until any potential shift in perspective from the TS team occurs, the desired narrowing may not materialize. Alternately, finding workarounds becomes imperative.

One simple workaround involves crafting a user-defined type guard function that mimics the anticipated behavior of input in obj. In microsoft/TypeScript#43284, such a function is provided:

const in_ = <K extends string, O extends object>(key: K, object: O):
    key is K & keyof O => key in object;

By substituting in_(input, obj) for input in obj, you can observe the expected outcomes:

function func(input: UnionType) {
    if (in_(input, obj)) {
        input
        //^? (parameter) input: "foo" | "bar"
    } else {
        input
        //^? (parameter) input: "baz"
    }
}

The matter of soundness remains subject to your judgment based on the particular use case at hand.

Playground link to code

Type guard does not narrow down the union type

Answer №1

Similar questions

Using React to simulate API calls outside of testing environments

How is it possible for TypeScript to enable the importing of dependencies that it ultimately cannot utilize during runtime?

Using NodeJS API gateway to transfer image files to S3 storage

Waiting for asynchronous subscriptions with RxJS Subjects in TypeScript is essential for handling data streams efficiently

Can a TypeScript-typed wrapper for localStorage be created to handle mapped return values effectively?

Understanding the specific types of subclasses derived from an abstract generic class in Typescript

How to effectively send an HTTP GET request to a REST API in Angular 2 and save the response in a JSON object

What is the best way to customize fonts for PDFMake in Angular projects?

Having trouble getting web components registered when testing Lit Element (lit-element) with @web/test-runner and @open-wc/testing-helpers?

What is the correct data type for the vuex store that is passed to the vuex plugin when it is being initialized?

Updating Angular 5 Views Dynamically Using a While Loop

The specified type '{ state: any; dispatch: React.Dispatch<{ type: string; value: any; }>; }' is not compatible with the expected type

Tips for fixing TypeScript compiler error TS2339: Issue with accessing 'errorValue' property in Angular 5 project

Tips for maintaining an open ng-multiselect-dropdown at all times

OCI: Predict expenses based on a selection of virtual machines

Playing around with Segment Analytics testing using Jest in TypeScript

Different ways to invoke a general method with a deconstructed array as its argument

Using 3 dots argument in Angular 5 to assign values to an array

syncfusion export pdf demonstrating the toggle button's current state

Encountered a Solana Error while handling Instruction 2: custom program error with code 0x1000078