samedi 30 janvier 2021

Vue 2 Typescript error: 'No overload matches this call' and 'Property does not exist'

I need to use Typescript for the first time and it's in a Vue 2 project. I'm trying to write a simple Login component (actually it's in views) and I get a few type errors that I can't find a solution for.

(Actually the type errors don't prevent it from running on localhost (everything seems to work fine) but I can't host it the website because I can't run 'npm run build' as it won't finish with the errors.)

Would really appreciate any help!

Login.vue

<template>
<div>
  <div class="wrapper">
    
    <div class="form">
      <h1 class="title">Login</h1>
      <div class="tile is-vertical is-8">
        <b-field label="Email">
          <b-input type="email" icon="email" v-model="email"/>
        </b-field>
        <b-field label="Password">
          <b-input icon="lock" type="Password" password-reveal v-model="password" validation-message="Succeeded!"/>
        </b-field>
        <b-message type="is-danger" v-if="error">
            
        </b-message>
        <b-button class="is-primary login-button" @click="login">Login</b-button>
      </div>
      <GoogleLogin />
          <div class="register-wrapper">
        <p>Don't have an account yet? <router-link :to="{path: '/register'}"> Register here</router-link></p>
      </div>
    </div>
    

  </div>
  <Footer/>
</div>
</template>

<script lang="ts">

import Vue from "vue";
import GoogleLogin from "@/components/GoogleLogin.vue";
import Footer from "@/components/Footer.vue";
import firebase from "firebase/app";
import "firebase/auth";

import { mapGetters } from "vuex"; 

export default Vue.extend({
    components: {
      GoogleLogin,
      Footer
    },
    computed: {
      ...mapGetters(["user"]),
      nextRoute() {
        return this.$route.query.redirect || "/profile";
      }
    },
    data() {
        return {
            email: '',
            password: '',
            error: ''        
        }
    },
    watch: {
      user(auth) {
        if (auth) {
          this.$router.replace(this.nextRoute);
        }
      }
    },
    methods: {
        login() {
          firebase.auth().signInWithEmailAndPassword(this.email, this.password)
            .catch(err => this.error = err)
        },
        loginGoogle() {
          const provider = new firebase.auth.GoogleAuthProvider();
          firebase.auth().signInWithPopup(provider)

        },
        
    },
})
</script>

Errors

ERROR /src/views/Login.vue(62,32):
62:32 No overload matches this call.
  Overload 1 of 2, '(location: RawLocation): Promise<Route>', gave the following error.
    Argument of type 'unknown' is not assignable to parameter of type 'RawLocation'.
      Type 'unknown' is not assignable to type 'Location'.
  Overload 2 of 2, '(location: RawLocation, onComplete?: Function | undefined, onAbort?: ErrorHandler | undefined): void', gave the following error.
    Argument of type 'unknown' is not assignable to parameter of type 'RawLocation'.
      Type 'unknown' is not assignable to type 'Location'.
    60 |       user(auth) {
    61 |         if (auth) {
  > 62 |           this.$router.replace(this.nextRoute);
       |                                ^
    63 |         }
    64 |       }
    65 |     },
ERROR in /src/views/Login.vue(68,59):
68:59 Property 'email' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { nextRoute: unknown; user: any; }, Readonly<Record<never, any>>>'.
    66 |     methods: {
    67 |         login() {
  > 68 |           firebase.auth().signInWithEmailAndPassword(this.email, this.password)
       |                                                           ^
    69 |             .catch(err => this.error = err)
    70 |         },
    71 |         loginGoogle() {
ERROR in /src/views/Login.vue(68,71):
68:71 Property 'password' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { nextRoute: unknown; user: any; }, Readonly<Record<never, any>>>'.
    66 |     methods: {
    67 |         login() {
  > 68 |           firebase.auth().signInWithEmailAndPassword(this.email, this.password)
       |                                                                       ^
    69 |             .catch(err => this.error = err)
    70 |         },
    71 |         loginGoogle() {
ERROR in /src/views/Login.vue(69,32):
69:32 Property 'error' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { nextRoute: unknown; user: any; }, Readonly<Record<never, any>>>'.
    67 |         login() {
    68 |           firebase.auth().signInWithEmailAndPassword(this.email, this.password)
  > 69 |             .catch(err => this.error = err)
       |                                ^
    70 |         },
    71 |         loginGoogle() {
    72 |           const provider = new firebase.auth.GoogleAuthProvider();



Aucun commentaire:

Enregistrer un commentaire