Exploring Type Guards and fat arrow functions in Typescript

Question

Exploring Type Guards and fat arrow functions in Typescript

Is this supposed to compile correctly? I'm encountering an error that says

"Property 'hello' does not exist on type 'object'."

at the highlighted line.

Interestingly, I can access g.hello outside the fat arrow function without any issues.

class Test {
    constructor() {
    }
    hello() : string {
        return "Hello";
    }
}

let g : object;

if (g instanceof Test) {
    () => {
        g.hello();    ////// ERROR HERE /////
    };
}

typescript typeguards

Answer 1

Answer №1

The restriction that a type-guard places on a variable (or any other entity) does not extend beyond function boundaries. This is a limitation in the design.

One workaround is to assign g to a new variable, allowing its type to be inferred based on the restriction. Accessing the new variable within the arrow function will then work as intended:

class Test {
    constructor() {
    }
    hello() : string {
        return "Hello";
    }
}

let g : object;

if (g instanceof Test) {
    const gTest = g;
    () => {
        gTest.hello();
    };
}

Alternatively, if g remains unchanged, declaring it with const can help the compiler retain the narrowing:

let g : object;

if (g instanceof Test) {
    const gTest = g;
    () => {
        gTest.hello();
    };
}

Try it out yourself

Answer 2

The restriction that a type-guard places on a variable (or any other entity) does not extend beyond function boundaries. This is a limitation in the design.

One workaround is to assign g to a new variable, allowing its type to be inferred based on the restriction. Accessing the new variable within the arrow function will then work as intended:

class Test {
    constructor() {
    }
    hello() : string {
        return "Hello";
    }
}

let g : object;

if (g instanceof Test) {
    const gTest = g;
    () => {
        gTest.hello();
    };
}

Alternatively, if g remains unchanged, declaring it with const can help the compiler retain the narrowing:

let g : object;

if (g instanceof Test) {
    const gTest = g;
    () => {
        gTest.hello();
    };
}

Try it out yourself

Answer 3

Answer №2

Understanding Let and Arrow Functions

class Test {
    constructor() {
    }
    hello() : string {
        return "Hello";
    }
}

declare let g : object;

if (g instanceof Test) {
    () => {
        g.hello(); // error
    };
}

g is a Test at function definition, but its type may change when the function is executed.

Using Const with Arrow Functions

class Test {
    constructor() {
    }
    hello() : string {
        return "Hello";
    }
}

declare const g : object;

if (g instanceof Test) {
    () => {
        g.hello(); // ok
    };
}

g is constant, and its type remains consistent as a Test after function definition.

Const with Regular Function

class Test {
    constructor() {
    }
    hello() : string {
        return "Hello";
    }
}

declare const g : object;

if (g instanceof Test) {
    function f() {
        g.hello(); // error
    };
}

In the underlying implementation, the regular function f is defined with ES5 var instead of ES6 let. This can lead to variable hoisting and issues when g is not a Test.

Answer 4

Understanding Let and Arrow Functions

class Test {
    constructor() {
    }
    hello() : string {
        return "Hello";
    }
}

declare let g : object;

if (g instanceof Test) {
    () => {
        g.hello(); // error
    };
}

g is a Test at function definition, but its type may change when the function is executed.

Using Const with Arrow Functions

class Test {
    constructor() {
    }
    hello() : string {
        return "Hello";
    }
}

declare const g : object;

if (g instanceof Test) {
    () => {
        g.hello(); // ok
    };
}

g is constant, and its type remains consistent as a Test after function definition.

Const with Regular Function

class Test {
    constructor() {
    }
    hello() : string {
        return "Hello";
    }
}

declare const g : object;

if (g instanceof Test) {
    function f() {
        g.hello(); // error
    };
}

In the underlying implementation, the regular function f is defined with ES5 var instead of ES6 let. This can lead to variable hoisting and issues when g is not a Test.

Exploring Type Guards and fat arrow functions in Typescript

Answer №1

Answer №2

Understanding Let and Arrow Functions

Using Const with Arrow Functions

Const with Regular Function

Similar questions

The input type '{}' does not match the expected type 'Readonly<IIdeasContainerProps>'. The property '...' is not found in the type '{}'

Using React Material UI in VSCode with TypeScript significantly hampers autocompletion speed

Ways to resolve the issue of incompatible parameters 'action' types in JavaScript

Challenges with image cropping in Angular causing performance problems

What is the best way to implement function chaining in TypeScript?

The TS2769 error occurs when trying to change the react calendar due to no matching overload in the

utilize makeStyles to modify button text color

Incorporating TypeScript into a project originally developed in JavaScript

Using the hook to implement the useContext function in React

Submit information by utilizing' content-type': 'application/x-www-form-urlencoded' and 'key': 'key'

Issue occurred while trying to set the value from an API call response in the componentDidMount lifecycle method

Difficulty displaying API information on a web browser with react.js

A more concise approach to accessing a generic class method in Typescript

Error in nodejs typescript multer S3 upload - Cannot read map properties of undefined

Error: Property 'content' is not defined and cannot be read

When a card is clicked in the parent component, data is sent to the child component in Angular. The card contains an image, name, ID,

The credentials in AWS S3Client are failing to load correctly

I find that the value is consistently undefined whenever I attempt to set it within a promise in Angular

React Typescript: Unable to set component as element

CoursesComponent does not contain a Directive annotation