Ensure the type of a variable matches another variable

Question

Ensure the type of a variable matches another variable

Can another variable function as a type guard?

Consider the following code snippet:

let foo: string | null = Math.random() > .5 ? null : 'bar'
const otherProp = true
const test = foo !== null && otherProp
function foobar(x: string){}

If I were to call foobar(foo), I would expect a warning because foo can be null or a string, and only a string is allowed.

However, if I call it like this:

if (test){
    foobar(foo)
}

It should not give me a warning because test is only true if foo is not null, meaning only a string remains as the type.

Is something like this achievable?

Try it on TypeScript Playground

typescript typescript-typings

Answer 1

Answer №1

As of now, TypeScript does not support this feature due to the added complexity it would bring to their Control-Flow Analyzer. Instead of simply using foo !== null in the if expression, there are two alternative approaches:

1- Utilizing Assertions:

if (test){
    // Since test is equivalent to (foo !== null)
    foobar(foo as string)
}

However, this method is prone to bugs as modifying the test variable later could result in errors since foo may not necessarily be a string anymore.

2- User-Defined Type Guards

In my opinion, the more effective approach is to use a user-defined type guard, as suggested by @VLAZ.

const isNotNull = <T>(x:T): x is Exclude(T, null) => x !== null
    
if (isNotNull(foo)){
    foobar(foo)
}

Answer 2

As of now, TypeScript does not support this feature due to the added complexity it would bring to their Control-Flow Analyzer. Instead of simply using foo !== null in the if expression, there are two alternative approaches:

1- Utilizing Assertions:

if (test){
    // Since test is equivalent to (foo !== null)
    foobar(foo as string)
}

However, this method is prone to bugs as modifying the test variable later could result in errors since foo may not necessarily be a string anymore.

2- User-Defined Type Guards

In my opinion, the more effective approach is to use a user-defined type guard, as suggested by @VLAZ.

const isNotNull = <T>(x:T): x is Exclude(T, null) => x !== null
    
if (isNotNull(foo)){
    foobar(foo)
}

Answer 3

Answer №2

As of now, achieving this functionality is not feasible. You can refer to this thread for more information.

Here is a way to work around the issue. By giving wrappedFoo a type that includes a string and true, or null and false, TypeScript can determine which option it is after checking the boolean value:

const foo: string | null = Math.random() > .5 ? null : 'bar'
const wrappedFoo = foo === null ? { foo, isString: false as const } : { foo, isString: true as const }

if (wrappedFoo.isString){
    console.log(wrappedFoo.foo.length)
} else {
    console.log(wrappedFoo.foo.length) // Error Object is possibly 'null'
}

Answer 4

As of now, achieving this functionality is not feasible. You can refer to this thread for more information.

Here is a way to work around the issue. By giving wrappedFoo a type that includes a string and true, or null and false, TypeScript can determine which option it is after checking the boolean value:

const foo: string | null = Math.random() > .5 ? null : 'bar'
const wrappedFoo = foo === null ? { foo, isString: false as const } : { foo, isString: true as const }

if (wrappedFoo.isString){
    console.log(wrappedFoo.foo.length)
} else {
    console.log(wrappedFoo.foo.length) // Error Object is possibly 'null'
}

Answer 5

Answer №3

The upcoming release of Typescript (version 4.4) will introduce control flow analysis for conditional expressions. A simple adjustment that needs to be made is to change let foo to const foo, as

Narrowing through indirect references will only take place when the conditional expression or discriminating property access is declared in a const variable declaration with no type annotation, and the reference being narrowed is a const variable, a readonly property, or a parameter that has no assignments within the function body.

Try it out on Playground v4.4

Answer 6

The upcoming release of Typescript (version 4.4) will introduce control flow analysis for conditional expressions. A simple adjustment that needs to be made is to change let foo to const foo, as

Narrowing through indirect references will only take place when the conditional expression or discriminating property access is declared in a const variable declaration with no type annotation, and the reference being narrowed is a const variable, a readonly property, or a parameter that has no assignments within the function body.

Try it out on Playground v4.4

Ensure the type of a variable matches another variable

Answer №1

Answer №2

Answer №3

Similar questions

Error: 'process' is not defined in this TypeScript environment

Convert string to integer value

Having difficulty initializing a constant object in TypeScript

Encountered an error with Aurelia webpack 4 when trying to load a necessary CSS file during runtime

Encountering type-checking errors in the root query due to the specific types assigned to my root nodes in a GraphQL and TypeScript application built using Express

Discovering the specific value within an array of various objects through Angular

Clear all events from an HTML element and its descendants with TypeScript

Unlock the Power of EmailJS with Vue.js 2 and TypeScript

Effortlessly bring in Typescript namespace from specific namespace/type NPM package within a mono-repository

A guide on simulating childprocess.exec in TypeScript

Modify the color of the matSnackbar

Error: Issue determining the type of variable. Unable to eliminate type 'any'

Having trouble importing a file in TypeScript?

In Typescript, the module source is imported rather than the compilation output

Provide a boolean value of true or false to indicate whether all delete operations were successfully completed

Tally up identical words without considering differences in capitalization or extra spaces

"Exploring the world of TypeScript Classes in combination with Webpack

Every time an action is carried out in the app, React generates countless TypeError messages

Unable to render React component after updating its state

Prevent resizing or zooming on AmCharts4 radar chart