Help us understand the problem. What is going on with this article?

Vue.extend で TypeScript がエラーを吐いたときに確認すべきこと

Vue の単一ファイルコンポーネントを TypeScript で書く方法はいくつかある。僕はなるべく JS に近い書き方をしたくて、Vue.extend を使っているのだが、時々下のような型エラーが発生する。

Property 'XXX' does not exist on type 'Vue'.

なお、ここで言う XXX とは、SFC 内にある computed の変数だったり methods にある関数だったりする。このようなときに確認するべき場所を自分の備忘録も兼ねてまとめておく。

computed や methods の関数にアノテーションをつけているか

Vue.extend() で型の推論を行っている場合、引数として書いたオブジェクトをもとに、そのオブジェクト内で使われる this の推論が行われる。そのため、型推論に頼っていると、しばしば失敗して this の型が正しく認識されなくなるのである。(雑な理解なので、詳しい方いたら教えてください:bow:)

対処法としては、computedmethodsに書いた関数には、しっかり下のようにアノテーションを書いてあげれば良い。これは Vue の TypeScript サポートに関するページにも記載があるが、ちょくちょくフォーラムでも同様の質問があり、案外見落としがち(自分もハマった)。

import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      msg: 'Hello'
    };
  },
  methods: {
    // アノテーションをしっかり書く
    greet(): string {
      return this.msg + ' world';
              //  ~~~ ← 書かないとここがエラーになることがある
    }
  },
  computed: {
    // ここもアノテーションをしっかり書く
    greeting(): string {
      return this.greet() + '!';
              //  ~~~~~ ← 書かないとここがエラーになることがある
    }
  }
});

TypeScript のサポート — Vue.js

オプションなどをスペルミスしていないか

昨日ハマったのはこっち。例えば、下のようにpropsのオプションを書き間違えたとする。

export default Vue.extend({
  props: {
    imageUrl: {
      type: String as PropType<string>,
      require: true    // ← 本当は require"d" !!!
    }
  },
});

この場合にも、冒頭に書いたエラーがthisに生えている変数や関数すべてに発生してしまう。同様に typetyep にスペルミスしたときとかにも起こるので気をつけたい。

参考: Vue/Typescript 3.5.1 Error: 'property' does not exist on type 'Vue' - Get Help - Vue Forum
https://forum.vuejs.org/t/vue-typescript-3-5-1-error-property-does-not-exist-on-type-vue/65591

まとめ

エラーメッセージが直接的ではない分、原因の特定に時間を食いがちなので気をつけましょう😇

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした