如何在 Ionic Vue 上将其设为一种类型？

Posted 2023-02-22

【中文标题】如何在 Ionic Vue 上将其设为一种类型？

【英文标题】：How do i make this a type on Ionic Vue?

【发布时间】：2021-08-07 03:35:48

【问题描述】：

我如何使这个描述成为一种类型？这是我的代码，它给了我一个错误，说“类型' takePhoto（）：Promise; '上不存在属性'描述'” 脚本

   <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>

抱歉，有这么多代码。但是有没有办法我可以解决这个问题或以不同的方式做到这一点。我一直在尝试移动一些代码，但没有成功

【参考方案1】：

你需要使用defineComponent

import  defineComponent  from "vue";

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

【讨论】：

这不起作用，或者我尝试时做错了，帖子页面不再打开了

【参考方案2】：

使用 setup() 代替数据和方法

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