blocks|key|4320123|text|您需要了解TypeScript有一个结构类型系统。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4320124|你可以把它想象成静态的鸭子类型。|4320125|在类定义中使用implements关键字是完全可选的。它实际上在编译时或运行时都没有任何影响。它唯一的用途是提供额外的正确性检查文档，但在TypeScript中从来不需要，所以在JavaScript中肯定不需要。|offset|length|style|CODE|4320126|因此，要直接回答这个问题，只需在vanilla+JS中编写|4320127|export+class+DepNodeProvider+{
++//+definitions+of+all+members+the+interface+requires.
}|code-block|syntax|javascript|4320128|entityMap^0|0|0|7|A|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@$F|V|G|W|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|Y|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>You need to understand that TypeScript has a structural type system.</p>

<p>You can think of it as static duck typing.</p>

<p>The use of the <code>implements</code> keyword on a class definition is completely optional. It doesn't actually have any impact at either compile time or runtime. Its only use is to provide an extra bit of correctness checking documentation, but it isn't ever required in TypeScript so it certainly isn't required in JavaScript. </p>

<p>So to answer the question directly, in vanilla JS just write</p>

<pre><code>export class DepNodeProvider {
  // definitions of all members the interface requires.
}
</code></pre>


blocks|key|4320217|text|Javascript中的类只是函数的包装器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4320218|下面是一个最基本的TreeDataProvider，以函数的形式编写：|4320219|​|4320220|export+default+function+MyAwesomeProvider():+vscode.TreeDataProvider<{}>+{
++//+do+some+stuff+if+you+wish

++return+{
++++getTreeItem,
++++getChildren,
++++onDidChangeTreeData,
++}
}|code-block|syntax|javascript|4320221|4320222|根据接口，您返回的对象中只需要getTreeItem和getChildren。|offset|length|style|CODE|4320223|下面是这些函数的一个示例：|4320224|4320225|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),
++}
}|4320226|4320227|所以，我不知道你是怎么想的，但对我来说，扩展它似乎比在伪类和OOP之类的东西上折腾要容易得多。|4320228|例如，您可以创建一个高阶函数来包装MyAwesomeProvider，或者您只需在这些函数中的任何位置执行其他操作并继续执行它。请注意，您也可以向提供程序返回的对象添加更多属性，但Typescript会抱怨它不再与接口匹配。|4320229|忽略类型，只是按照JS的好方法来做是有道理的(尽管永远不会比ES6少，毕竟我们不是野人)。|4320230|entityMap^0|0|0|0|0|0|F|B|R|B|0|0|0|0|0|0|H|H|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1A|8|@$N|1B|O|1C|P|Q]|$N|1D|O|1E|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1F|8|@]|9|@]|A|$]]|$1|T|3|E|5|6|7|1G|8|@]|9|@]|A|$]]|$1|U|3|V|5|H|7|1H|8|@]|9|@]|A|$I|J]]|$1|W|3|E|5|6|7|1I|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1K|8|@$N|1L|O|1M|P|Q]]|9|@]|A|$]]|$1|11|3|12|5|6|7|1N|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|14|$]]

<p>Classes in Javascript are just wrappers around functions.</p>

<p>Here is a most basic TreeDataProvider, written as a function:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>export default function MyAwesomeProvider(): vscode.TreeDataProvider&lt;{}&gt; {
  // do some stuff if you wish

  return {
    getTreeItem,
    getChildren,
    onDidChangeTreeData,
  }
}</code></pre>
</div>
</div>
</p>

<p>According to the interface, only <code>getTreeItem</code> and <code>getChildren</code> are required in the object you return.</p>

<p>Here is an example of those functions:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>async function getChildren(element?: MyCustomType): Promise&lt;MyCustomType[]&gt; {
  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),
  }
}</code></pre>
</div>
</div>
</p>

<p>So, I don't know about you, but extending that seems a lot easier to me than faffing around with pseudo classes and this OOP stuff.</p>

<p>For example, you can create a higher-order function to wrap around <code>MyAwesomeProvider</code>, or you just do something else anywhere in those functions and get on with it.
Note, you could also just add more properties to the object your provider returns, but Typescript will complain that it doesn't match the interface anymore.</p>

<p>There's something to be said for ignoring types and just doing it the good old JS way (though never less than ES6, we're not savages after all).</p>


<p>I would like to write a extension for vscode but I am struggling to properly understand how to extend the TreeDataProvider. In the <a href="https://github.com/Microsoft/vscode-extension-samples/blob/fc9663af5c92dfb9abcaa93384d2b35893d9f4c6/tree-view-sample/src/nodeDependencies.ts" rel="nofollow noreferrer">example provided</a></p>

<pre><code>export class DepNodeProvider implements vscode.TreeDataProvider&lt;Dependency&gt; {
</code></pre>

<p>is possible. But the implementation in typescript is</p>

<pre><code>export interface TreeDataProvider&lt;T&gt;
</code></pre>

<p>from my understanding typescript interfaces aren't exportable to standard javascript. How would I implement the TreeDataProvider if I am writing a extension in vanilla JS?</p>


confused about how to access TreeDataProvider

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想为vscode写一个扩展，但我正在努力正确地理解如何扩展TreeDataProvider。在中export class DepNodeProvider implements vscode.TreeDataProvider<Dependency> {是可能的。但是typescript中的实现是export inter...

问对如何访问TreeDataProvider感到困惑
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对如何访问TreeDataProvider感到困惑EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对如何访问TreeDataProvider感到困惑
EN