首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >对如何访问TreeDataProvider感到困惑

对如何访问TreeDataProvider感到困惑
EN

Stack Overflow用户
提问于 2018-04-26 04:19:30
回答 2查看 760关注 0票数 1

我想为vscode写一个扩展,但我正在努力正确地理解如何扩展TreeDataProvider。在example provided

代码语言:javascript
复制
export class DepNodeProvider implements vscode.TreeDataProvider<Dependency> {

是可能的。但是typescript中的实现是

代码语言:javascript
复制
export interface TreeDataProvider<T>

据我所知,typescript接口不能导出为标准的javascript。如果我正在用普通的JS编写扩展,我将如何实现TreeDataProvider?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-04-26 07:46:49

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

你可以把它想象成静态的鸭子类型。

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

因此,要直接回答这个问题,只需在vanilla JS中编写

代码语言:javascript
复制
export class DepNodeProvider {
  // definitions of all members the interface requires.
}
票数 1
EN

Stack Overflow用户

发布于 2018-06-11 06:31:04

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

下面是一个最基本的TreeDataProvider,以函数的形式编写:

代码语言:javascript
复制
export default function MyAwesomeProvider(): vscode.TreeDataProvider<{}> {
  // do some stuff if you wish

  return {
    getTreeItem,
    getChildren,
    onDidChangeTreeData,
  }
}

根据接口,您返回的对象中只需要getTreeItemgetChildren

下面是这些函数的一个示例:

代码语言:javascript
复制
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少,毕竟我们不是野人)。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50030695

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档