🤷‍♂️ 🤷‍♀️ TrueScriptを使用したVue 3エラー:type ' EventTargetにはプロパティXが存在しません

導入
おい、devの人々!👋 私が最初に私のものを変えることに決めたとき、私が遭遇したtypescript誤りに関する記事で単純な誤りシリーズを続ける時間ですVue.js v3.x 通常のJavaScriptからのプロジェクト.
いつものように、あまりにも厳しく判断しないでください、あなたがそのような記事について考えるものを書いてください、コメントで構文解析のためにあなた自身の話題を提案してください..ここで我々は行く!🚀

📝 目次

Explanation of the error

Input data when an error occurs

Resolving the error

Conclusions

エラーの説明
走るときvue-tsc --noEmit タイプスクリプトをチェックするには、エラーを取得します.

src/components/forms/Input.vue:4:40 - error TS2531: 
Object is possibly 'null'.

4     @input="$emit('update:modelValue', $event.target.value)"
                                         ~~~~~~~~~~~~~

src/components/forms/Input.vue:4:54 - error TS2339: 
Property 'value' does not exist on type 'EventTarget'.

4     @input="$emit('update:modelValue', $event.target.value)"
                                                       ~~~~~

Found 2 errors.

私は何がエラーで間違っていた知っている間Object is possibly 'null' , 私は、エラーの理由を見つけるために、ドキュメントに深く掘り下げなければなりませんでしたProperty 'value' does not exist on type 'EventTarget' .
↑ Table of contents

エラーが発生したときにデータを入力する
マイVueコンポーネントsrc/components/forms/Input.vue ) 以下のようになります.

<template>
  <input
    class="px-3 py-2 border-2 rounded-lg"
    @input="$emit('update:modelValue', $event.target.value)"
    :type="inputType"
    :tabindex="tabIndex"
    :placeholder="placeholder"
    :value="modelValue"
    :required="isRequired"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Input',
  props: {
    inputType: { type: String, required: true },
    tabIndex: { type: String, required: true },
    placeholder: { type: String, default: '' },
    modelValue: { type: String, default: '' },
    isRequired: { type: Boolean, default: false },
  },
})
</script>

既に気づいたように@input テンプレートの属性$event.target.value 通常のJavaScriptで行うように.

🤔 Note: Even if $event.target return null, which has no value property, this is not a big problem for regular JavaScript! It will give a run-time error on the client and this web application will crash.

しかし、それはタイプスクリプトがどのように働くかでありません.これは、プロジェクトの構築時にコード内のすべての可能な問題点をチェックし、それらをポイントします.
だからこそ私たちを愛し、それを使用する!
↑ Table of contents


エラーの解決
まず、新しいメソッドを書くhandleInputChange(event) インsetup 機能

// ...

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  // ...
  setup: () => {
    // Define event handler for input changes in TypeScript.
    const handleInputChange = (event: Event) => 
      (event.target as HTMLInputElement).value

    return { handleInputChange }
  },
})
</script>

タイプスクリプトでは、我々が明示的に我々が働かなければならないオブジェクトを指し示す必要があります.この場合、input フィールドを指定します.HTMLInputElement .

☝️ Note: The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements.

次に、このメソッドを@input このようなテンプレートでは

<template>
  <input
    class="px-3 py-2 border-2 rounded-lg"
    @input="$emit('update:modelValue', handleInputChange($event))"
    :type="inputType"
    :tabindex="tabIndex"
    :placeholder="placeholder"
    :value="modelValue"
    :required="isRequired"
  />
</template>

// ...

ランvue-tsc もう一度……そしてブーム!💥 すべてのエラーが消えました.
↑ Table of contents

結論
私はそれが同じオブジェクトやプロパティとの相互作用の新しいパラダイムに再訓練することは難しい知っている!しかし、この単純なエラーは、私にちょうどどれだけ強力で役に立つかを示しましたTypeScript 現実の世界にあります.
成功した仕事をして、単純なエラーをあなたのプロジェクトを実現する方法であなたを決して止めさせないようにしてください!😉
↑ Table of contents

写真とビデオ

ササボスシャードhttps://unsplash.com/photos/qhhp1LwvPSI

ルネツィアhttps://unsplash.com/photos/yGv-pvgRuiI

ピーエス
あなたがこのブログの上でこれのようなより多くの記事を望むならば、下記のコメントを掲示して、私を購読してください.ありがとう😘
そして、もちろん、あなたは私を支援することができますLiberaPay . 各寄付は、新しい記事を書いて、コミュニティのための非営利のオープンソースプロジェクトを開発するのに用いられます.