お世話になります。
初心者ですがTypescript / Nuxt.js / Firebaseを使ったWebアプリを作っています。
内容としては単純で、FirebaseのAuthenticationを使ってログイン認証をする、というものです。
環境情報
- Nuxt.js(2.12.2)
- Typescript(3.8.3)
- エディタ:VSCode
- OS: mac
書いたコードとエラー内容
models/User.ts
javascript
1export interface User { 2 email: string | null 3 name: string | null 4} 5 6export class UserClass implements User { 7 email: string | null 8 name: string | null 9 10 constructor(email: string | null, name: string | null) { 11 this.email = email 12 this.name = name 13 } 14}
plugins/auth.ts
javascript
1import firebase from "~/plugins/firebase" 2import { accountStore } from '~/store/' 3import { UserClass } from "~/models/User" 4 5export default ({ app, redirect, store }: {app: any, redirect: any, store: any}) => { 6 app.router.afterEach((to: any, from: any) => { 7 firebase.auth().onAuthStateChanged(user => { 8 if(!user && to.name != "signin") { 9 redirect("/signin") 10 } 11 accountStore.setUser(new UserClass(user?.email, user?.displayName)) 12 }) 13 }) 14}
この時、plugins/auth.ts上のuser?.email
には下記のエラーが表示されます
※VSC上で赤の波線がつく
(property) firebase.UserInfo.email: string | null | undefined
Argument of type 'string | null | undefined' is not assignable to parameter of type 'string | null'.
Type 'undefined' is not assignable to type 'string | null'.ts(2345)
とのことなので、firebase.UserInfo.emailの定義にジャンプしてみると下記の通りでした。
node_modules/firebase/index.d.ts
javascript
1 interface UserInfo { 2 displayName: string | null; 3 email: string | null; 4 phoneNumber: string | null; 5 photoURL: string | null; 6 providerId: string; 7 /** 8 * The user's unique ID. 9 */ 10 uid: string; 11 }
聞きたいこと
1.plugins/auth.tsのuser?.emailのエラーを消すには下記のようにundefined
を足せば書けば消えましたが、長いので他の方法はないでしょうか
javascript
1export interface User { 2 email: string | null | undefined 3 name: string | null | undefined 4} 5 6export class UserClass implements User { 7 email: string | null | undefined 8 name: string | null | undefined 9 10 constructor(email: string | null | undefined, name: string | null | undefined) { 11 this.email = email 12 this.name = name 13 } 14}
2.そもそもfirebase.UserInfo.emailはstringかnullのはずなのに、「'undefined' is not assignable」と言われるのはなぜでしょうか。
3.(ついでの質問。。)plugins/auth.tsにて、型を指定しないとエラーになるため下記のように書いてますが、型がわからないためany
としてしまっています。こういう自分で定義していないある意味「お決まり」として書くような場合、どういう型を指定するのが良いのでしょうか。ソースやドキュメントを追かないでしょうか(この場合だったらNuxt.jsのPluginについて)
export default ({ app, redirect, store }: {app: any, redirect: any, store: any}) => {
初心者の質問ですが、よろしくお願いいたします。
あなたの回答
tips
プレビュー