Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Bug: "unsafe member access" errors when using exposed methods from Vue's templaterefs #10359

Closed as not planned
Labels
bugSomething isn't workingexternalThis issue is with another package, not typescript-eslint itselflocked due to agePlease open a new issue if you'd like to say more. See https://typescript-eslint.io/contributing.vueissues relating to vue support
@paveloom

Description

@paveloom

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.
  • I havesearched for related issues and found none that matched my issue.
  • I haveread the FAQ and my problem is not listed.

Issue Description

This issue was moved fromvuejs/core#12433. It is specific toVue, butmight be coming fromtypescript-eslint.

See the reproduction steps below. Here are the relevant source code files:

App.vue
<script setup lang="ts">import {useTemplateRef }from"vue";importModalfrom"@/components/Modal.vue";const modal=useTemplateRef<InstanceType<typeofModal>>("modal");function close() {modal.value?.close();}</script><template>  <button@click="modal?.open!">    Open modal  </button>  <button@click="close">    Close modal  </button>  <Teleportto="body">    <Modalref="modal" />  </Teleport></template>
Modal.vue
<script setup lang="ts">import {ref }from"vue";const isOpen=ref(false);function open() {isOpen.value=true;}function close() {isOpen.value=false;}defineExpose({open,close});</script><template>  <divv-if="isOpen">    Modal  </div></template>

The intent is to use the exported functions from an instance of theModal component whenever needed. For that, I use Vue'suseTemplateRef function and thedefineExpose compiler macro.

While running the lint script, I get the following errors:

src/components/App.vue  9:3   error  Unsafe call of a(n) `any` typed value          @typescript-eslint/no-unsafe-call  9:16  error  Unsafe member access .close on an `any` value  @typescript-eslint/no-unsafe-member-access

Note that there are two functions exported from theModal component, namely,open andclose. However, I use these functions differently in theApp component. Theopen method is used directly in thetemplate section, whereas for theclose function I've created a wrapper of the same name in thescript setup section. Note that the error of using anany value is reported only on the wrapper (specifically, on the callmodal.value?.close()).

This issue is also eerily similar tovuejs/core#6882.

Reproduction Repository Link

https://github.com/paveloom-o/vue-playground/tree/use-template-ref

Repro Steps

  1. git clone --branch use-template-ref https://github.com/paveloom-o/vue-playground.git
  2. cd vue-playground
  3. direnv allow (OPTIONAL: if you havedirenv andnix-direnv installed)
  4. npm install
  5. npm run lint

Versions

vue-playground@
├── @eslint/js@9.15.0
├── @tsconfig/strictest@2.0.5
├── eslint-plugin-vue@9.31.0
├── eslint@9.15.0
├── typescript-eslint@8.15.0
├── typescript@5.6.3
├── vue-eslint-parser@9.4.3
├── vue-tsc@2.1.10
└── vue@3.5.13

Node:23.1.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingexternalThis issue is with another package, not typescript-eslint itselflocked due to agePlease open a new issue if you'd like to say more. See https://typescript-eslint.io/contributing.vueissues relating to vue support

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions


      [8]ページ先頭

      ©2009-2025 Movatter.jp