Question

我想为vscode编写扩展，但我正在努力正确理解如何扩展TreeDataProvider。在example provided

中

export interface TreeDataProvider<T>

是可能的。但是打字稿中的实现是

CLD.gm2.lf.group

从我的理解打字稿界面不能导出到标准的JavaScript。如果我在vanilla JS中编写扩展，我将如何实现TreeDataProvider？

Answer 1

您需要了解TypeScript具有结构类型系统。

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

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

所以直接回答这个问题，在vanilla JS中写一下

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

Answer 2

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),
  }
}

所以，我不了解你，但扩展这对我来说比伪造类和这个OOP的东西更容易。

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

有一些东西可以说是忽略了类型，只是做了很好的旧JS方式（尽管从不低于ES6，我们毕竟不是野人）。

对如何访问TreeDataProvider感到困惑

2 个答案: