Having issues with narrowing down a TypeScript class

Question

Having issues with narrowing down a TypeScript class

Check out this simplified code snippet:


class Thing<InState extends boolean = boolean> {
    public inState(): this is Thing<true> {
        return true;
    }
}

const y = new Thing();

if (y.inState()) {

    
    y
}

When I hover over y in VSCode, I see something strange:

https://i.sstatic.net/kZOi0RDb.png

Despite calling inState(), y remains a Thing<boolean> instead of a Thing<true>. Why could that be?

I came across this concept in discord.js here, and I'm curious about why they are able to achieve this while I cannot reproduce it.

typescript

Answer 1

Answer №1

There seems to be a requirement to utilize the InGuild generic in some manner for type guarding to function correctly.

If we take a look at the code snippet above:

class Stuff<InGuild extends boolean = boolean> {
    // @ts-ignore
    private readonly _cacheType: InGuild;

    public inGuild(): this is Stuff<true> {
        return true;
    }
}

const x = new Stuff();

if (x.inGuild()) {

    
    x // <-- Now x is correctly a Stuff<true>
}

The discord.js library also implemented a similar approach, as shown in example 1, example 2, example 3.

Although our use cases may seem niche or unusual, the current setup seems to work well enough for now.

Edit: It turns out that this was a duplicate of this question. For more detailed explanations, future readers can refer to that post since I struggled with finding the right terminology initially.

Answer 2

There seems to be a requirement to utilize the InGuild generic in some manner for type guarding to function correctly.

If we take a look at the code snippet above:

class Stuff<InGuild extends boolean = boolean> {
    // @ts-ignore
    private readonly _cacheType: InGuild;

    public inGuild(): this is Stuff<true> {
        return true;
    }
}

const x = new Stuff();

if (x.inGuild()) {

    
    x // <-- Now x is correctly a Stuff<true>
}

The discord.js library also implemented a similar approach, as shown in example 1, example 2, example 3.

Although our use cases may seem niche or unusual, the current setup seems to work well enough for now.

Edit: It turns out that this was a duplicate of this question. For more detailed explanations, future readers can refer to that post since I struggled with finding the right terminology initially.

Having issues with narrowing down a TypeScript class

Answer №1

Similar questions

TypeScript introduces a flexible generic type, Optional<T, Props>, allowing customized props for a specific

"TypeScript Static Classes: A Powerful Tool for Struct

Tips for implementing <mat-progress-bar> in .ts file when making API service requests with Angular

Exploring the concept of String Enums through Reverse-Mapping

I cannot access the 'isLoading' state in React Query because it is undefined

Having difficulty sending the [ctrl][p] keys to a page that is not using Angular framework

ReactJS - Opt for useRef over useState for props substitution

What is the process for integrating an extension function into an Express response using TypeScript?

Unlocking the Power of Typescript and ReactJS: Maximizing Efficiency with Previous State

Sign up for notifications using NGRX

Tips for asynchronously subscribing to an observable from an array in Angular

When trying to use global.mongoose in Typescript, a type error is being thrown

Running pre-commit eslint autofix but encountering errors that do not exist

Creating a variable as a list of string arrays in TypeScript

As 'include_docs' cannot be utilized in fetchRevs due to its absence in both the BulkFetchDocsWrapper interface and the DocumentFetchParams interface

Incorporating fresh components and newly defined attributes in Angular

TSLint Errors Update: The configuration provided cannot locate implementations for the following rules

The search is on for the elusive object that Angular 2/4

What is the best way to combine a Signal containing an array of Signals in Angular using the merge(/mergeAll) operator?

Can the tooltip placement be adjusted in ng-bootstrap when it reaches a specific y-axis point?