質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

1回答

1153閲覧

【typescript】callback関数内のthisがVueComponentと識別されない

progleader

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2021/04/05 05:02

編集2021/04/05 05:06
困っていること

async-with-custom-template(buefy)のts実装を試みてますが、
コールバック関数内のthisをVueComponentと明示できず、以下のエラーが消せません

// TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.

不定なthisをはっきりさせるなどを参考にしたものの、
明示的に型推論をできるようにできませんでした。

もしわかる方がいらっしゃったらご教授いただけると幸いです

コード

vue

1// https://buefy.org/documentation/autocomplete/#async-with-custom-template のサンプルを簡略化したものになります。 2<template> 3 <b-autocomplete 4 :data="data" 5 placeholder="this is placeholder" 6 :loading="isFetching" 7 field="title" 8 @typing="getAsyncData" 9 @select="option => selected = option" 10 ></b-autocomplete> 11</template> 12 13<script lang="ts"> 14import Vue from 'vue'; 15import debounce from 'lodash/debounce'; 16 17export default Vue.extend({ 18 data() { 19 return { 20 data: [], 21 selected: null, 22 isFetching: false 23 }; 24 }, 25 methods: { 26 getAsyncData: debounce(function(name) { 27 //-----// 28 console.log(this); // VueComponent{...} であることを確認 29 this.isFetching;  // TS2683: 'this' implicitly has type 'any' because it does not have a type annotation. 30 //-----// 31 }, 500) 32 } 33}); 34 35</script> 36 37
バージョン
  • vue 2.6.12
  • nuxt 2.14.5

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

https://forum.vuejs.org/t/how-to-get-typescript-method-callback-working/36825
上記を参考にし以下のように書けました。他の方法も募集しております。

js

1debounce(async function(this: any, name: string) {...}

投稿2021/04/05 11:22

progleader

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問