How do i make this a type on Ionic Vue?

Question

how do i make this description a type? Heres my code it gives me an error saying "Property 'description' does not exist on type '{ takePhoto(): Promise; }'" script

   <script lang="ts">
    import {
    IonPage,
   IonToolbar,
    IonContent,
   IonButton,
   IonTextarea,
  } from "@ionic/vue";

  import { storage, auth, db, arrayUnion } from "../firebase";
   import { Plugins, CameraResultType, CameraSource } from "@capacitor/core";
  import postData1 from "../firebase";
  import postData2 from "../firebase";
  import userPosts from "../firebase";
  const { Camera } = Plugins;



    export default {
    name: "Tab1",
   components: {
   IonToolbar,
     IonContent,
   IonPage,
     IonButton,
      IonTextarea,
       },
       data() {
       return {
        description: "",
       };
      },

      methods: {
      async takePhoto(): Promise<void> {
      const image = await Camera.getPhoto({
      resultType: CameraResultType.Base64,
      source: CameraSource.Camera,
      quality: 60,
      });

 
       if (image?.base64String) {
       const user = auth.currentUser;

       const id = uuidv4();

       const filePath = `post/${id}.${image.format}`;

       const storageRef = storage.ref();

       await storageRef
      .child(filePath)
      .putString(image.base64String, "base64");

      const url = await storageRef.child(filePath).getDownloadURL();
    
      const postData = {
      uid: user?.uid,
      id: id,
      image: url,
      description: this.description
      };

      const addPost = async (post: any) => {
      await db.collection("post").doc().set(post);
      await db
        .collection("users")
        .doc(user?.uid)
        .update({
          posts: arrayUnion(post),
        });
      await userPosts();
      await postData1();
      await postData2();
      return true;
    };

    addPost(postData);
  }
 },
 },
 };
 </script>

sorry for so much code. but is there a way i can fix this or do this a different way. i kept trying to move some code around but it didnt work

Answer 1

you need to used defineComponent

import { defineComponent } from "vue";

export default defineComponent({
   name: "Tab1",
   components: { },
   data: { },
   methods: { },
});

Answer 2

use setup() instead of data and methods

import { defineComponent } from "vue";
export default defineComponent({
   name: "App",
   components: {},
   setup() {
    // all your data and methods code here
  }
});