Language-tools: 在自动完成菜单中显示导出的功能

创建于 2020-07-15 · 8评论 · 资料来源: sveltejs/language-tools

您的功能请求是否与问题有关？
当绑定到组件实例时，我希望有任何可用于自动完成的导出函数。

描述您想要的解决方案
鉴于以下组件：

<!-- App.svelte -->
<script>
  import ClickTracker from "./ClickTracker.svelte";

  let componentRef;
</script>

<main>
  <ClickTracker bind:this={componentRef} />
  <button on:click={componentRef.track}>Click me</button>
</main>

<!-- ClickTracker.svelte -->
<script>
  export function track() {
    clicks++;
  }

  let clicks = 0;
</script>

<p>Clicks: {clicks}</p>

在componentRef ，我希望看到track函数显示在自动完成菜单中。

附加上下文
将 TypeScript 与 svelte-preprocess 一起使用时，引用 track 函数会在componentRef.track引用下显示警告“Property 'track' does not exist on type 'ClickTracker__SvelteComponent_'.ts(2339)”。我认为这可能是相关的。

<!-- App.svelte -->
<script lang="ts">
  import ClickTracker from "./ClickTracker.svelte";

  let componentRef: ClickTracker;
</script>

<main>
  <ClickTracker bind:this={componentRef} />
  <button on:click={componentRef.track}>Click me</button>
</main>

Fixed enhancement

资料来源

geoffrich

最有用的评论

新版VSCode Plugin刚刚发布，可能你的IDE还没有更新。最新版本是 101.4.0 。

dummdidumm 于 2020-07-27

👍2 ❤1 🎉1

所有8条评论

我遇到了类似的问题并找到了以下解决方法，尽管代码太多了，不合我的口味

<!-- ClickTracker.svelte -->
<script context='module' lang='ts'>
  export type ClickTrackerType =  SvelteComponent & { track(): void }
</script>
[...]

然后，从App.svelte ：

<!-- App.svelte -->
<script lang='ts'>
  import ClickTracker from "./ClickTracker.svelte";
  import type { ClickTrackerType }  from "./ClickTracker.svelte";

  let componentRef: ClickTrackerType;
</script>

另一方面，从 vscode 检查我发现了一个

opensas 于 2020-07-17

嗯，是的，这是一个很好的解决方法。尽管它肯定比理想中的代码更多。我也不喜欢track()函数的任何更改也需要手动更新导出的类型。

geoffrich 于 2020-07-17

@geoffrich当然，这只是解决此问题之前的一种解决方法，支持打字稿意味着 svelte 可以为我自己的 Svelte 组件正确生成类型。

对我来说，理想的语法是这样的：

let componentRef: ClickTracker

就是这样......

opensas 于 2020-07-20

👍1

这已经解决了吗？使用打字稿尝试 ClickTracker 示例仍然给我以下错误：

Property 'track' does not exist on type 'ClickTracker__SvelteComponent_'.ts(2339)

我最近正在使用 setupeNode.js 脚本从 sveltejs/template 创建。

这些是我的 devDependencies

  "devDependencies": {
    "@rollup/plugin-commonjs": "^12.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0",
    "svelte-check": "^0.1.0",
    "svelte-preprocess": "^4.0.0",
    "@rollup/plugin-typescript": "^4.0.0",
    "typescript": "^3.9.3",
    "tslib": "^2.0.0",
    "@tsconfig/svelte": "^1.0.0"
  },

opensas 于 2020-07-27

新版VSCode Plugin刚刚发布，可能你的IDE还没有更新。最新版本是 101.4.0 。

dummdidumm 于 2020-07-27

👍2 ❤1 🎉1

优秀的！！！

opensas 于 2020-07-27

🎉1

@opensas @dummdidumm我仍然看到这个问题。

Svelte 插件：104.9.1

重现步骤：

设置一个新的 typescript svelte 应用程序：

npx degit sveltejs/template svelte-app
cd svelte-app
node ./scripts/setupTypeScript.js

使用以下内容创建一个新文件src/ClickTracker.svelte ：

<script>
    export function track() {
        clicks++;
    }

    let clicks = 0;
</script>

<p>Clicks: {clicks}</p>

将src/App.svelte修改

<script lang="ts">
    import ClickTracker from "./ClickTracker.svelte";

    let componentRef: ClickTracker;
</script>

<main>
    <ClickTracker bind:this={componentRef} />
    <button on:click={componentRef.track}>Click me</button>
</main>

注意src/App.svelte的错误： Property 'track' does not exist on type 'ClickTracker__SvelteComponent_'

vultix 于 2021-04-22

我无法重现这个，对我有用。

dummdidumm 于 2021-04-22

此页面是否有帮助？

0 / 5 - 0 等级

Language-tools: 在自动完成菜单中显示导出的功能

最有用的评论

所有8条评论

相关问题