Autocomplete/Intellisense Does Not Show All Options For Object Value

[mjbvz]

From @JonnyBoy333 on July 12, 2017 15:31

• VSCode Version: 1.14.0
• OS Version: macOS 10.12.5

Autocomplete/intellisense is not showing all the options for an object that goes into a function parameter even though it is defined in a typescript interface.

Example:

interface Fruit {
    /** Returns a fruit color. */
    getFruitColor(options: { fruit: 'apple' | 'orange' }): string;
    getFruitColor(options: { fruit: 'banana' }): boolean;
}

function testFunction (fruit: Fruit) {
    let color = fruit.getFruitColor({ fruit: '' }); // <-- Autocomplete only shows apple and orange as options and not banana
}

It appears that only the first method's options object is getting indexed by VS autocomplete but not the second one.

Reproduces without extensions: Yes

Copied from original issue: microsoft/vscode#30526

[mjbvz]

Here's the tsserver completions response:

[Trace  - 10:28:51 AM] Response received: completions (53). Request took 1 ms. Success: true 
Result: [
    {
        "name": "apple",
        "kind": "var",
        "kindModifiers": "",
        "sortText": "0"
    },
    {
        "name": "orange",
        "kind": "var",
        "kindModifiers": "",
        "sortText": "0"
    }
]

[JonnyBoy333]

@mjbvz Got it. Thanks for confirming this is Typescript related.

[ghost]

Unfortunately, this would be hard to fix in general.

When we get completions for a string literal directly inside a call expression, we have specialized code to iterate over every possible overload and get all string literals.

But when we get completions inside a string literal at an arbitrary location, we just call getContextualType and look for string literal types in there.

getContextualType will climb up to the signature and ask for its parameter types. Overload resolution will fail since { fruit: "" } is assignable to neither { fruit: "apple" | "orange" } nor { fruit: "banana" }, so we arbitrarily pick the first signature to get the contextual type.

To fix this in general would seem to require writing a getContextualTypes function that handled all overloads, returning all contextual types.

[JonnyBoy333]

@andy-ms Thanks for taking a look at this. If this isn't something that's going to be looked at in the near future is there an approach you could recommend as a work around?

Right now I am having to choose between putting all the fruit types in the one getFruitColor method so that I can have autocomplete, but that is at the cost of having type safety on the return values. Or keeping it the way it is and having type safety, but only autocomplete on the arbitrary first signature. Obviously in my real use case there are quite a few more than three fruits and two return types, they are actually different fields on a form that can return different data types.

[ghost]

@JonnyBoy333 I would recommend preferring correct types and no autocomplete over autocomplete and incorrect types, but that's just my opinion :P
You could also define a separate interface for each case and get autocomplete by explicitly annotating the type of the options:

interface RoundFruit {
    fruit: "apple" | "orange"
}
interface CurvedFruit {
    fruit: "banana"
}

function getFruitColor(fruit: RoundFruit): string;
function getFruitColor(fruit: CurvedFruit): boolean;

const options: RoundFruit = { fruit: "/*completions!*/" };
getFruitColor(options);

[wehrstedt]

I think this belongs to the same problem @andy-ms described above:

declare interface xyz {
     myVar: "value1" | "value2" | "value3"
}

And for this, you don't get any suggestions:

let y = getMyInterfaceObject(): xyz;
y.myVar  = "/*no completions*/";

Do you have any suggestions how to fix this or do I have to live with that for now?

[ghost]

@wehrstedt You should be getting syntax errors there. You probably meant let y: xyz = getMyInterfaceObject();.

[wehrstedt]

Yep, sorry. I worte this piece of code in the comment field. But the issue is still the same. Any suggestions?

[ghost]

It's working for me if y is really of type xyz. Could you share a complete example?

[wehrstedt]

unfortunately not.But I will try to complete the example:

This is my dts file:

declare namespace myNamespace {
	export interface myInterface {
		myVar: "value1" | "value2";
	}
}

declare var myInterface: myNamespace.myInterface;

I found out something interesting:
When I type

myInterface.myVar = "";

and hit CTRL + Space between the quotation marks in a typescript file, the code completion works. When I try the same in a js file, the code completion doesn't work.

This is probably the reason why the example above works for you. I'm developing javascript, not typescript. And for code completion I write some typescript definition files.

Is this behaviour correct?

[ghost]

@wehrstedt You probably don't have both files included in the same project. If I use this tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "noEmit": true,
        "allowJs": true,
        "checkJs": true
    }
}

then I can get types from a .d.ts file applied to a .js file. But it looks like if we just see a .d.ts and .js file side-by-side with no tsconfig.json, we don't give you autocomplete. I've filed an issue at #18817.