microsoft / TypeScript-TmLanguage

TextMate grammar files for TypeScript for VS Code, Sublime Text, and Atom.
MIT License
413 stars 126 forks source link

Syntax highlighting misidentifies method shorthand function blocks as object literals in TypeScript when the return type of the function is an object #964

Closed BalaM314 closed 1 year ago

BalaM314 commented 1 year ago

Does this issue occur when all extensions are disabled?: Yes

In Typescript, tokenization misidentifies the code blocks of function properties declared using the object literal method shorthand that have an object return type as object literals.

Function properties can be declared on objects using the method shorthand syntax:

let obj = {
    foo(){
        //code
    }
};

In TypeScript, these functions can also have a return type:

let obj = {
    foo():number {
        return 5;
    }
};

If this return type is an object type, and there is no space between the object type and the function body, tokenization thinks the function body is an object literal. This issue does not appear if the function is created without the shorthand or without an object return type.

image image

Steps to Reproduce:

  1. Copy the following code:
    ({
    foo():{}{
        let bar;//This line is gray, because tokenization thinks it is inside an object literal scope.
        //The issue goes away if a space is present between the return type and the method block.
    },
    foo: ():{}=>{
        let bar;//This works fine.
    }
    });
    let bar;
    function baz():{}{
    let bar;//This also works fine.
    }

    into VS Code.

VSCodeTriageBot commented 1 year ago

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.75.1. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

BalaM314 commented 1 year ago

Issue remains in latest version.