对如何访问TreeDataProvider感到困惑

您需要了解TypeScript有一个结构化类型系统。

您可以将其视为静态duck类型。

使用 implements 类定义中的关键字是完全可选的。它实际上在编译时或运行时都没有任何影响。它的唯一用途是提供额外的正确性检查文档,但在TypeScript中从来都不需要它,所以在JavaScript中肯定不需要它。

所以要直接回答这个问题,用vanilla JS写

export class DepNodeProvider {
  // definitions of all members the interface requires.
}

Javascript中的类只是函数的包装。

下面是一个最基本的TreeDataProvider,作为函数编写:

export default function MyAwesomeProvider(): vscode.TreeDataProvider<{}> {
  // do some stuff if you wish

  return {
    getTreeItem,
    getChildren,
    onDidChangeTreeData,
  }
}

根据接口,仅 getTreeItem 和 getChildren 在返回的对象中是必需的。

以下是这些函数的示例:

async function getChildren(element?: MyCustomType): Promise<MyCustomType[]> {
  const children = element
    ? await getSubListOfElement(element)
    : await getParentList()
  
  return children  
}

function getTreeItem(item: MyCustomType): vscode.TreeItem {

  return {
    id: `${item.id}`,
    collapsibleState: void 0,
    label: `${item.name}`,
    tooltip: `${item.description}`,
    iconPath: vscode.Uri.parse(item.avatarUrl),
  }
}

所以,我不知道你是怎么想的,但对我来说,扩展它似乎比摆弄伪类和这个面向对象的东西要容易得多。

例如,您可以创建一个高阶函数来环绕 MyAwesomeProvider ,或者您只需在这些函数中的任何位置执行其他操作并继续。 注意,您也可以向提供者返回的对象添加更多属性,但Typescript会抱怨它与接口不再匹配。

有一点值得一提的是,我们忽略类型,而只是按照旧的JS方式来做(尽管我们从来没有低于ES6,但我们毕竟不是野蛮人)。