0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Vuetifyのコンポーネントのメソッドを使うときの$refsの型定義[TypeScript]

Last updated at Posted at 2022-04-12

前提

ESlint使ってます
クラススタイルで書いてます
Vue2

refの型

Vuetifyのv-calendarのprev()とnext()の関数を使おうと$refsを使用したら

Unsafe call of an 'any' typed value.

というエラーが出てしまった。

↓ エラーが出たコード(読み込みとか諸々省略)

<template>
  <v-calendar ref="calendar"></v-calendar>
</template>

<script>
@Ref()
public calendar!: any; 

public prev(): void {
  this.calendar.prev();
}
</script>

any型を使うとESlintに怒られてしまう。
そこで以下のように修正することでエラーを回避しました。

<template>
  <v-calendar ref="calendar"></v-calendar>
</template>

<script>
@Ref()
public calendar!: Vue & { prev: () => void; }; 

public prev(): void {
  this.calendar.prev();
}
</script>

v-calendarのprev()の戻り値の型がvoidになってるのでそれを指定しました。

参考

以下のリポジトリのやり方を参考にしました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?