

あるページで、User情報から表示の分岐をさせています。  
そのため、LaravelのUser Table で追加した role を参照します。

これをvue内に書いているのですが、ワーニングを消すことができない状態です。  
IDEは VSCODE を使用しています。

[code]

    const user = usePage().props.auth.user;
    const numberOfApiKeys = user.role === "admin" ? 5 : 1;
    
[/code]

上記のようにすると role の部分において、下記メッセージが表示されます  
`プロパティ 'role' は型 'User' に存在しません。ts(2339)`

そこで、型を定義するためにinterfaceを追加しました。

[code]

    interface User {
      role: string;
    }
    
    const user = usePage().props.auth.user as User;
    
[/code]

すると `usePage().props.auth.user as User` の部分において  
`型 'import("/home/my_project/vendor/laravel/breeze/stubs/inertia-vue-
ts/resources/js/types/index").User' から型 'User'
への変換は、互いに十分に重複できないため間違っている可能性があります。意図的にそうする場合は、まず式を 'unknown' に変換してください。`

というメッセージになります。  
確かに vendor 下の types/index で下記の通りUserが型定義されています。

[code]

    export interface User {
        id: number;
        name: string;
        email: string;
        email_verified_at: string;
    }
    
    export type PageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
        auth: {
            user: User;
        };
    };
    
[/code]

vendorフォルダ下のファイルは操作しないほうが良いと考えています。  
その場合、後から追加したデータ項目をvue内で使用したいとき、  
TSの警告を消すためにはどのように対応すればよいでしょうか？

よろしくお願いします。


CC BY-SA 4.0
2023-05-05T14:02:36.430
94755
2023-05-05T14:22:59.773
2023-05-05T14:22:59.773
7980
7980
question
laravel typescript vue.js
Laravel10+vue3+inertia+ts において Userの型拡張をする方法は？