对如何访问 TreeDataProvider 感到困惑答案

【问题标题】：confused about how to access TreeDataProvider对如何访问 TreeDataProvider 感到困惑
【发布时间】：2018-04-25 20:19:29
【问题描述】：

我想为 vscode 编写一个扩展，但我很难正确理解如何扩展 TreeDataProvider。在example provided

export class DepNodeProvider implements vscode.TreeDataProvider<Dependency> {

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

export interface TreeDataProvider<T>

据我了解，typescript 接口不能导出到标准 javascript。如果我在 vanilla JS 中编写扩展，我将如何实现 TreeDataProvider？

【问题讨论】：

省略泛型部分export class DepNodeProvider implements vscode.TreeDataProvider { ...
哎呀，你是对的。

标签： typescript visual-studio-code vscode-extensions

【解决方案1】：

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

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

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

所以要直接回答这个问题，在 vanilla JS 中只需要写

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

【讨论】：

如果 vscode.TreeDataProvider 在 vanilla js 中不存在，我将如何扩展它？我只想编写自己的 TreeDataProvider 并确保我的 api 与文档中显示的一致？
@MikeF 正是如此。 vscode.TreeDataProvider 不能存在于 vanilla JavaScript 中，因为它只是一种类型。为什么不用 TypeScript 写呢？
没有具体原因。感谢您帮助我。

【解决方案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，但我们毕竟不是野蛮人）。

【讨论】：