Using `require` in method breaks JavaScript IntelliSense

[mjbvz]

From @abc1236762 on December 15, 2016 19:4

• VSCode Version: 1.8.0
• OS Version: Windows 10.0.14393

Steps to Reproduce:

1. Create a project folder and create func.js, main.js, and jsconfig.json in it.

jsconfig.json:

{
    "compilerOptions": {
        "target": "ES6"
    },
    "file": [
        "func.js"
    ]
}

func.js:

function Test() {
    // ...
}
// ...
Test.a = function() {
    // ...
    var k = require('n');
    // ...
    return 0;
};
// ...
Test.prototype.b = function() {
    // ...
    var k = require('n');
    // ...
    return 1;
};

main.js:

Test.a();
var test = new Test();
test.b();

2. Open main.js, and move mouse on Test or a() at line 1, the ToolTip shows any, move mouse on any words, the ToolTip shows the sentence that have any. Also autocomplete do not show a when I type Test. and b when I type test..

3. Edit func.js, make lines which has require as comment, like :

function Test() {
    // ...
}
// ...
Test.a = function() {
    // ...
    //var k = require('n');
    // ...
    return 0;
};
// ...
Test.prototype.b = function() {
    // ...
    //var k = require('n');
    // ...
    return 1;
};

4. Open main.js, and move mouse on Test at line 1 and line 2, the ToolTip shows function Test(): void, but move mouse on a() at line 1, the ToolTip still shows any, move mouse on any words at line 2 and line 3, the ToolTip shows the sentence that haven't any. For example, test shows

var test: {
    b: () => number;
}

5. Output Test.a() can get 0, test.b() can get 1. At Step 4, Visual Studio Code found the definition of test.b() as Test.prototype.b (move mouse on b() at line 3 and the ToolTip shows (property) Test.b: () => number), but not found the definition of Test.a() because move mouse on a() at line 1 and the ToolTip shows any. Also autocomplete show b when I type test., but not show a when I type Test..

Conclusion:
If the definition of the method or prototype of function in JavaScript have method require() in it, Intellisense in Visual Studio Code cannot find the definition of "that function, the prototype of that function, and the method of that function" at another JS file.
If the definition of the method or prototype of function in JavaScript do not have method require() in it, Intellisense in Visual Studio Code can find the definition of "that function, and the prototype of that function" at another JS file, but still cannot find the definition of method of that function at another JS file.

Copied from original issue: microsoft/vscode#17339

[mjbvz]

Quick question: is "main.js" listed in the "files" section of the jsconfig.json?

[mjbvz]

From @abc1236762 on December 15, 2016 21:56

All problem still exist when "main.js" listed in the "files" section of the jsconfig.json.Also all problem still exist when "files" section has nothing.

[mjbvz]

From @waderyan on December 16, 2016 18:55

I have reproduced this and it looks like a duplicate of #7046

@mjbvz can you look at the issue I posted and confirm if you think it is a duplicate?

[mjbvz]

From @abc1236762 on December 17, 2016 4:57

So method require() can impact on Intellisense work or not is a bug? Cordova project in Visual Studio have same problem about method require().

[mjbvz]

@waderyan No, I think this is a different issue. You see the same using classes:

class Test {
    foo() {
        var k = require('fs');
        return 1;
    }
}

var x = new Test();
// Type of `x` is any. If you remove the `require`, the type becomes `Test`.

From debugging, this looks like a TS issue. I'll move this issue over to them for tracking.

[mjbvz]

I debugged through this issue on the VSCode side, and believe that this is a bug in TypeScript. Here's a condensed repo based on @abc1236762's original steps.

Create a project with jsconfig.json, main.js, and func.js files:

jsconfig.json:

{
    "compilerOptions": {
        "target": "ES6"
    },
    "file": [
        "func.js",
        "main.js"
    ]
}

func.js:

class Test {
    foo() {
        var k = require('fs');
        return 1;
    }
}

main.js:

var test = new Test();
// test has `any` type when ` var k = require('fs');` is present, but 
// the correct `Test` type when that line is removed.

[vladima]

I'd say this is by design: require in func.js indicates that this file is an external module so it is effectively sandboxed and Test is not visible in global scope. In order it consume it inside main.js you'll need to import it:

// func.js
class Test {
    foo() {
        var k = require('fs');
        return 1;
    }
}
exports.Test = Test

// main.js
var func = require("./func")
var test = new func.Test();

[mjbvz]

Ok, makes sense. Just to be clear, the presence of a require call or import statement stops TS from picking up global symbols in a file?