VS Code中TypeScript方法类型推断图标显示异常求助

为什么会出现这个问题 #

VS Code的图标显示是基于TypeScript语言服务对符号类型的判断：

• 像Boo类里的do()这种原型方法，会被识别为类的方法成员，显示紫色方块图标。
• 而Foo类里在构造函数中赋值的this.do，或者用do = () => {}定义的箭头函数成员，本质是存储函数值的实例属性，TypeScript会将其标记为属性（变量），所以显示蓝色平行六面体图标。

这不是VS Code的bug，而是符合TypeScript对类成员的类型定义规则：原型方法属于类的方法签名，而赋值式的函数成员属于实例属性。

解决办法 #

1. 修正接口定义（针对实现接口的场景） #

如果你希望接口定义的是类的方法而非属性，把接口里的函数类型属性改成方法签名：

// 原接口（定义的是函数类型的属性）
interface Foo {
  do: () => void;
}

// 修改后（定义的是方法签名）
interface Foo {
  do(): void;
}

这样当类用常规方法实现该接口时，就能被正确识别为方法，显示对应的图标。

2. 自定义图标规则（针对必须用箭头函数的场景） #

如果因为需要绑定this等原因必须使用箭头函数类字段，默认VS Code无法改变识别逻辑，但可以通过插件自定义图标：

• 安装vscode-icons插件，它支持自定义符号图标规则。
• 打开插件的设置，添加自定义规则，将类中类型为Function的属性映射为方法图标。

注意 #

如果你坚持用赋值方式定义类成员，从TypeScript的角度它始终是属性，无法让语言服务把它识别为方法，只能通过插件修改图标显示来达到视觉上的一致。

内容的提问来源于stack exchange，提问作者Giacomo Gagliano