プロパティ〇〇は型△△に存在しません

Question

初歩的な質問で恐縮ですが
typscriptの以下コードのusersの箇所で「プロパティ 'users' は型 '[]' に存在しません。ts(2339)」が出るのですが、実際にはusersで値が正しく取得できています。

useEffect(() => {
// 仮
axios.get('http://localhost:5000/sample/')
.then((res: AxiosResponse<[]>) => {
console.log(res.data.users); 　←usersで上記メッセージが出ます
})
.catch(error => {
console.log(error)
});
}, []);

取得しているjsonオブジェクトが以下のような形式なので上記となっております

{
"users": [
{
id:"名前"
name:"名前"
}
],
"message": "aaa",
"result": true
}

vscodeでコーディングをしていて、上記エラーを出さないtypescriptでの正しいやり方を教えていただけないでしょうか。

Answer 1

TypeScript の型はコンパイル時にしか存在せず、実行時には JavaScript なので型検査は行われないため、API の結果に users が存在すればそれは取得できますが、コンパイルエラーを防ぐには適切な型を指定する必要があります。

.then((res: AxiosResponse<[]>) => {
console.log(res.data.users); 　←usersで上記メッセージが出ます

この場合、res: AxiosResponse<[]> というのは res.data の型が [] つまり空の配列 (というかタプル) という意味になりますが、それでは困るので、API の結果に対応する型を定義して、それを指定すると良いでしょう。

type APIResult = {
  users: User[],
  message: string,
  result: boolean
};

type User = {
  id: string,
  name: string
};

  .then((res: AxiosResponse<APIResult>) => { // res.data は APIResult 型
    console.log(res.data.users); // これで res.data.users は User の配列になるはず

Comments

[3u1]

ありがとうございます！こちらでエラー出なくなりました。
typescript手探りでやってしまっているので、基本から学びます！