microsoft / TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
https://www.typescriptlang.org
Apache License 2.0
100.59k stars 12.43k forks source link

TS alias exported interface showing wrong icon in suggestion #45111

Open shirshendubhowmick opened 3 years ago

shirshendubhowmick commented 3 years ago

Issue Type: Bug

From an index.d.ts file re export some interface.

Example

Root index.d.ts file

declare module 'MyModule' {
  export { default as MyComponent, ComponentProps } from 'MyModule/MyComponent';
}

index.d.ts file inside MyComponent root

declare module 'MyModule/MyComponent' {
  export interface MyComponentProps {
   count:number;
    name: string;
  }

  const MyComponent: React.VFC<ManagersInfoProps>;
  export default MyComponent;
}

During the import suggestion the icon for MyComponentProps is wrong.

Here is an example: image

ManagerInfoProps is an interface which is exported in a way as shown above. VS code correctly describing it as an interface however the icon shown is not of type interface.

The icon should have been similar to ManagerBannerProps which is also an interface.

This is causes a little inconvenience, when I am looking into the suggestions to understand what are different imports available as generally we infer the available import type by looking into the icon.

VS Code version: Code 1.56.2 (054a9295330880ed74ceaedda236253b4f39a335, 2021-05-12T17:44:30.902Z) OS version: Darwin x64 20.4.0

System Info |Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz (12 x 2600)| |GPU Status|2d_canvas: enabled
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
rasterization: enabled
skia_renderer: disabled_off_ok
video_decode: enabled
webgl: enabled
webgl2: enabled| |Load (avg)|2, 2, 2| |Memory (System)|16.00GB (0.16GB free)| |Process Argv|--crash-reporter-id 9b6eef4f-5527-435a-80b8-9868c1ca6079| |Screen Reader|no| |VM|0%|
Extensions (30) Extension|Author (truncated)|Version ---|---|--- better-comments|aar|2.1.0 vscode-toggle-quotes|Bri|0.3.4 better-toml|bun|0.3.2 bracket-pair-colorizer|Coe|1.0.61 vscode-eslint|dba|2.1.20 gitlens|eam|11.4.1 EditorConfig|Edi|0.16.4 prettier-vscode|esb|6.4.0 shell-format|fox|7.1.0 go|gol|0.25.0 beautify|Hoo|1.5.0 dotenv|mik|1.0.1 theme-monokai-pro-vscode|mon|1.1.19 python|ms-|2021.5.840043038 vscode-pylance|ms-|2021.5.2 jupyter|ms-|2021.6.832593372 remote-containers|ms-|0.177.2 remote-ssh|ms-|0.65.4 remote-ssh-edit|ms-|0.65.4 remote-wsl|ms-|0.56.2 vscode-remote-extensionpack|ms-|0.21.0 cpptools|ms-|1.3.1 debugger-for-chrome|msj|4.12.12 material-icon-theme|PKi|4.6.0 datetime|rid|2.0.3 guides|spy|0.9.3 vscode-stylelint|sty|0.86.0 highlight-matching-tag|vin|0.10.0 vscodeintellicode|Vis|1.2.13 vscode-arduino|vsc|0.4.3 (3 theme extensions excluded)
A/B Experiments ``` vsliv368:30146709 vsreu685:30147344 python383cf:30185419 pythonvspyt700cf:30270857 pythonvspyt602:30300191 vspor879:30202332 vspor708:30202333 vspor363:30204092 vstes627:30244334 pythonvspyt639:30300192 pythontb:30283811 vspre833cf:30267465 pythonptprofiler:30281270 vshan820:30294714 pythondataviewer:30285071 vscus158:30286553 vscgsv2ct:30301613 vscorehov:30301222 bridgeflight:30299254 vscod805cf:30301675 ```
shirshendubhowmick commented 3 years ago

Can anyone confirm if this is actually a bug ? @egamma @mjbvz

mjbvz commented 3 years ago

Seems correct to me with TypeScript 4.4 in VS Code insiders:

Screen Shot 2021-07-14 at 4 29 08 PM

If you still see this, please share a small git repo that demonstrates this issue and shows your full project structure

shirshendubhowmick commented 3 years ago

Dummy repo: https://github.com/shirshendubhowmick/vscode-icon-issue

So to be more precise the issue occurs when we try to import types which are alias export and from modules which are inside node_modules.

image

I have created a repo to reproduce it as close as possible.

In actual scenario MyModule sits inside the node_modules but here it sits locally since, exactly doing that will require some extra effort but this setup is enough to reproduce the issue.

As shown above in the image.

Since in this repo the MyModule sits locally to the consumer we are getting the second ComponentAProps in suggestion which shows the correct icon.

If MyModule was only available inside node_modules we would have got only the first ComponentAProps in the suggestion which shows the incorrect icon

Also notice the difference with ComponentBProps this interface is defined in the root of MyModule and the icon is correct here.

As mentioned in the original description the issue seems to happen with types which are exported as an alias. VSCode can properly identify the type to be an interface which is exported as an alias, however the icon is wrong.

image

I have intentionally kept the app.ts file blank please try importing modules in that file.

Please let me know if further information is needed @mjbvz

Thanks.

mjbvz commented 3 years ago

Possibly related to #45033

andrewbranch commented 3 years ago

Closing #45033 as a duplicate of this; any PR that addresses this bug should look at that issue for an additional test case and ensure it’s covered.

kelvin2200 commented 2 years ago

Has this issue been addressed? because i can't find any info other than here and #45033 that was marked as duplicate of this. I thought I was doing something wrong with my project's path aliasing, but no matter what i do, intellisense shows the icon of a variable in the suggestions, when importing any re-exported/aliased type.