What causes TypeScript to narrow the type when a return statement is present, but not when it is absent?

Question

What causes TypeScript to narrow the type when a return statement is present, but not when it is absent?

I am facing an issue with this script:

type Input = string
function util(input: Input) {
    return input
}

function main(input: Input | null) {
    const isNull = input === null
    if (isNull) {
        return 'empty string'
    }    
    input = util(input) //error
}

The error message reads:

Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'

Interestingly, the error does not occur when:

The last line is return util(input)
The conditional statement is shortened to if (input === null)

Why is that happening?

TS Playground

The reason I avoided a direct check for null value in the condition clause is because I needed to test for both null and match against a regex pattern. Since regex.test(value) returns true when logged but false within an if statement, I decided to combine both checks in a single variable for convenience. This method:

const isNullOrEmpty = input === null || /^\\s+$/.test(input)
if (isNullOrEmpty)

is more convenient than:

const isEmpty = /^\\s+$/.test(input)
if (input === null || isEmpty)

typescript

Answer 1

Answer №1

Although it may appear counterintuitive - and in my personal opinion, it is - Typescript lacks the ability to use an intermediate variable to deduce the type of values used to assign a value to that variable.

To address this issue, you must either utilize if (input === null) or create and implement a type predicate such as isNull.

UPDATE:

Below is an example showcasing how to utilize a type predicate:

const isNull = (value: any): value is null => {
    return value === null;
};

const doSomething = (value: string | null) => {
    if (isNull(value)) {
        return 'foo';
    }

    return value.charAt(0); // This is valid; at this point, TypeScript compiler recognizes that value is not null and therefore is a string
};

I am uncertain whether it adds any value compared to simply using if (value === null).

Answer 2

Although it may appear counterintuitive - and in my personal opinion, it is - Typescript lacks the ability to use an intermediate variable to deduce the type of values used to assign a value to that variable.

To address this issue, you must either utilize if (input === null) or create and implement a type predicate such as isNull.

UPDATE:

Below is an example showcasing how to utilize a type predicate:

const isNull = (value: any): value is null => {
    return value === null;
};

const doSomething = (value: string | null) => {
    if (isNull(value)) {
        return 'foo';
    }

    return value.charAt(0); // This is valid; at this point, TypeScript compiler recognizes that value is not null and therefore is a string
};

I am uncertain whether it adds any value compared to simply using if (value === null).

What causes TypeScript to narrow the type when a return statement is present, but not when it is absent?

Answer №1

Similar questions

Can Material UI be defined as a peerDependency while maintaining its types as a DevDependency?

Is there a way to utilize Angular in identifying whether a given value corresponds with the value of a particular radio button within my application?

Issue with Parcel / React 18 App.js failing to refresh cache

Leverage the nativeElement property within two separate components

Should the null-forgiving operator be avoided when using `useRef`?

Removing empty options from a select dropdown in Angular 9

I'm encountering an issue in my node application where it is unable to access the push

Ensuring that files adhere to the required format, whether they be images

Using jest to simulate a private variable in your code

Navigating through embedded arrays in Angular

Developing applications using ReactJS with Typescript can sometimes lead to errors, such as the "onclick does not exist on type x

Tips on Resolving TypeError: Unable to Access Undefined PropertyAre you encountering a

Is it possible to utilize pinia getter as the initial parameter in Vue3's watch function?

What is the best way to retrieve an array that was created using the useEffect hook in React?

Error in Angular 2: Component unable to locate imported module

leveraging the import statement in conjunction with SystemJs

Retrieving information from a JSON file utilizing an Interface

In Angular 17, is there a way to trigger a component's method when a Signal is modified?

Basic Karma setup with Typescript - Error: x is undefined

Guide to releasing a NestJs library on npm using the nrwl/nx framework