VUE 3 TS 2339：类型 { 上不存在属性 xxx答案

【问题标题】：VUE 3 TS 2339 : The property xxx doesn't exist ont type {VUE 3 TS 2339：类型 { 上不存在属性 xxx
【发布时间】：2021-12-19 22:17:49
【问题描述】：

我使用：Vue3 与 TS、axios、sequelize。

我正在创建一个只有 1 个文本区域的表单，用于在墙上发布帖子，并且我在组件表单中编写了该脚本：

<template>
  <div id="PostText" class="col-12">
    <form id="postTextForm">
      <div id="PostwriteContent">
        <label for="PostContent">
          <h2>Lâchez nous vos pensées...</h2>
        </label>
        <textarea
          name="PostContent"
          id="PostContent"
          cols="65"
          rows="6"
          v-model="theNewPost.content"
          autocapitalize="sentence"
          form="postTextForm"
          maxlength="650"
          placeholder="Saisissez ici votre prose..."
          required
          autofocus
        ></textarea>
        <button class="col-9" type="button" :disabled="!isFormValid" @click="sendMyPost">Poster</button>
      </div>
    </form>
  </div>
</template>

<script lang="ts">
import axios from 'axios';

export default {
  data() {
    return {
    errorMessage: String,
      theNewPost: {
        content: String,
        userId: Number 
      }
    };
  },
  methods: {
    sendMyPost(e:any){
      e.preventDefault();
      
      console.log("testPost >>" + this.theNewPost.content);
      console.log("theNewPost >>" + this.theNewPost);

      axios.post("http://localhost:3001/api/feed", this.theNewPost)
        .then((res) =>{ 
          console.log('Post en ligne ;)' + res)
        })
        .catch((err) => {
          this.errorMessage = err.message;
          console.error("There was an error!", err);
        })

    }
  },
  computed:{
    isFormValid(){
      if (
        this.theNewPost.content !== ""
      ) {
        return true;
      } else {
        return false;
      }
    }
  },

};

</script>

但是我在使用“this”时遇到了一些错误。它没有找到名称 theNewPost , errorMessage, 所以我不明白这一点，因为我在数据中定义了这些术语并在 V-model 中使用它们。

此外，在我绑定 2 个函数的表单中，它们不运行 .你知道我犯了哪些错误吗？请。

谢谢 ;)

【问题讨论】：

标签： typescript vue.js vuejs3

【解决方案1】：

到enable TypeScript support，用defineComponent()包裹组件：

import { defineComponent } from 'vue'

export default defineComponent({
  data() { ... },
  methods: { ... },
  computed: { ... },
})

还请注意，您的 data() 返回应该是文字（未初始化为 String 或 Number）：

data() {
  return {
    errorMessage: '',
    theNewPost: {
      content: '',
      userId: 0
    }
  };
}

【讨论】：