What is the purpose of using the `is` keyword in typescript?

Question

What is the purpose of using the `is` keyword in typescript?

Recently, I stumbled upon this code snippet:

export function foo(arg: string): arg is MyType {
    return ...
}

Despite searching through documentation and Google, I couldn't find information on the is keyword. It's a widely used word that appears almost everywhere.

Can someone please explain what the keyword does in this specific context?

typescript keyword

Answer 1

Answer №1

To gain further insights, consult the documentation on user-defined type guard functions.

function determineString(input: any): input is string{
    return typeof input === "string";
}

function demonstrateExample(value: any){
    if(determineString(value)){
        console.log("This is a string: " + value);
        console.log(value.length); // string function
    }
}
demonstrateExample("hello world");

In the scenario depicted above, utilizing the type predicate input is string (rather than just returning

boolean</code), subsequent to calling <code>determineString()

, if the outcome is true, TypeScript will narrow down the type to string within any section safeguarded by invoking the function. The compiler will infer that value pertains to string in the enclosed guarded block (solely within the surrounded guarded block)

{
    console.log("This is a string: " + value);
    console.log(value.length); // string function
}

A type predicate is strictly used during compilation phase. The resultant .js file (during runtime) will exhibit no variance since it doesn't contemplate the TYPE.

The distinctions between the following four instances will be illustrated.

For instance 1: the provided code example won't trigger either a compile or runtime error.

For instance 2: the subsequent code snippet will generate a compilation error (as well as a runtime error) because TypeScript has narrowed down the type to string and verified that toExponential isn't contained within string method.

function demonstrateExample(value: any){
    if(determineString(value)){
        console.log("This is a string: " + value);
        console.log(value.length);
        console.log(value.toExponential(2));
    }
}

For instance 3: the ensuing code excerpt won't trigger a compile error but will encounter a runtime error as TypeScript solely narrows down the type to string in the guarded block, not post-guard, therefore, value.toExponential won't yield a compile error (TypeScript doesn't recognize it as a string type). However, during runtime, string lacks the toExponential method, hence leading to a runtime error.

function demonstrateExample(value: any){
    if(determineString(value)){
        console.log("This is a string: " + value);
        console.log(value.length);
    }
    console.log(value.toExponential(2));
}

For instance 4: if we exclude input is string (type predicate), TypeScript won't narrow down the type in the guarded block, and the following code snippet won't raise a compile error but it will incur a runtime error.

function determineString(input: any): boolean{
    return typeof input === "string";
}
function demonstrateExample(value: any){
    if(determineString(value)){
        console.log("This is a string: " + value);
        console.log(value.length);
        console.log(value.toExponential(2));
    }
}

Hence, employing input is string (type predicate) aids developers foresee potential runtime errors during compile time. With JavaScript, developers are unaware of these errors during compilation. This constitutes the advantage of leveraging TypeScript.

Answer 2

To gain further insights, consult the documentation on user-defined type guard functions.

function determineString(input: any): input is string{
    return typeof input === "string";
}

function demonstrateExample(value: any){
    if(determineString(value)){
        console.log("This is a string: " + value);
        console.log(value.length); // string function
    }
}
demonstrateExample("hello world");

In the scenario depicted above, utilizing the type predicate input is string (rather than just returning

boolean</code), subsequent to calling <code>determineString()

, if the outcome is true, TypeScript will narrow down the type to string within any section safeguarded by invoking the function. The compiler will infer that value pertains to string in the enclosed guarded block (solely within the surrounded guarded block)

{
    console.log("This is a string: " + value);
    console.log(value.length); // string function
}

A type predicate is strictly used during compilation phase. The resultant .js file (during runtime) will exhibit no variance since it doesn't contemplate the TYPE.

The distinctions between the following four instances will be illustrated.

For instance 1: the provided code example won't trigger either a compile or runtime error.

For instance 2: the subsequent code snippet will generate a compilation error (as well as a runtime error) because TypeScript has narrowed down the type to string and verified that toExponential isn't contained within string method.

function demonstrateExample(value: any){
    if(determineString(value)){
        console.log("This is a string: " + value);
        console.log(value.length);
        console.log(value.toExponential(2));
    }
}

For instance 3: the ensuing code excerpt won't trigger a compile error but will encounter a runtime error as TypeScript solely narrows down the type to string in the guarded block, not post-guard, therefore, value.toExponential won't yield a compile error (TypeScript doesn't recognize it as a string type). However, during runtime, string lacks the toExponential method, hence leading to a runtime error.

function demonstrateExample(value: any){
    if(determineString(value)){
        console.log("This is a string: " + value);
        console.log(value.length);
    }
    console.log(value.toExponential(2));
}

For instance 4: if we exclude input is string (type predicate), TypeScript won't narrow down the type in the guarded block, and the following code snippet won't raise a compile error but it will incur a runtime error.

function determineString(input: any): boolean{
    return typeof input === "string";
}
function demonstrateExample(value: any){
    if(determineString(value)){
        console.log("This is a string: " + value);
        console.log(value.length);
        console.log(value.toExponential(2));
    }
}

Hence, employing input is string (type predicate) aids developers foresee potential runtime errors during compile time. With JavaScript, developers are unaware of these errors during compilation. This constitutes the advantage of leveraging TypeScript.

Answer 3

Answer №2

The primary purpose I am aware of is illustrated in your example: defining a "type predicate" (arg is MyType) within a user-defined Type Guard.

To learn more about User Defined Type Guards, check out this resource

For additional information, refer to this source

Answer 4

The primary purpose I am aware of is illustrated in your example: defining a "type predicate" (arg is MyType) within a user-defined Type Guard.

To learn more about User Defined Type Guards, check out this resource

For additional information, refer to this source

What is the purpose of using the `is` keyword in typescript?

Answer №1

Answer №2

Similar questions

Troubleshooting a database update issue within an Angular and NestJS application

Patience is key as you wait for the observable to finish

Encountering issues with retrieving application setting variables from Azure App Service in a ReactJS TypeScript application resulting in '

Merging an unspecified number of observables in Rxjs

Prevent Angular from automatically scrolling to the top when subscribing to a timer

Ways to stop dialog from disappearing in Reactjs

The specified type '{ rippleColor: any; }' cannot be assigned to type 'ColorValue | null | undefined'

There are zero assumptions to be made in Spec - Jasmine analyzing the callback function

Implementing Batch File Uploads using Typescript

How can I convert a property to an interface in Typescript?

Converting a nested JSON object into a specific structure using TypeScript

In order to use the serve command, it is necessary to run it within an Angular project. However, if a project definition cannot be located

What is the method for retrieving a child element from a TemplateRef variable?

Issue with React Redux: Store dispatch not causing component update

Create an array of arrays within a loop using TypeScript

Managing the browser's "back" button functionality in React

What is the method to retrieve the total number of days in a moment-jalaali using NodeJS?

Angular: rendering JSON data as a dynamic grid

Examine every character in the text to determine if it qualifies as a separator

AWS Amplify is failing to maintain the user session post a successful login