对如何访问TreeDataProvider感到困惑
对如何访问TreeDataProvider感到困惑
提问于 2018-04-26 04:19:30
我想为vscode写一个扩展，但我正在努力正确地理解如何扩展TreeDataProvider。在example provided中
export class DepNodeProvider implements vscode.TreeDataProvider<Dependency> {是可能的。但是typescript中的实现是
export interface TreeDataProvider<T>据我所知，typescript接口不能导出为标准的javascript。如果我正在用普通的JS编写扩展，我将如何实现TreeDataProvider？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-26 07:46:49
您需要了解TypeScript有一个结构类型系统。
你可以把它想象成静态的鸭子类型。
在类定义中使用implements关键字是完全可选的。它实际上在编译时或运行时都没有任何影响。它唯一的用途是提供额外的正确性检查文档，但在TypeScript中从来不需要，所以在JavaScript中肯定不需要。
因此，要直接回答这个问题，只需在vanilla JS中编写
export class DepNodeProvider {
// definitions of all members the interface requires.
}Stack Overflow用户
发布于 2018-06-11 06:31:04
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少，毕竟我们不是野人)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50030695
复制相关文章
相似问题
腾讯云开发者
