TypeScriptを導入したのですが型チェックを行うことができません。
import axios from 'axios' import headers from './Headers'; interface Item { id: number; name: string; description: string; img: {url: string}; } export const Items = ():Promise<Item[]> => axios.get('/items') .then( res => res.data)
予測では、関数の返り値をItemの配列になっているかを検証してくれるかと思ったのですが、されません
import {useEffect, useState} from 'react' //script import {Items} from 'user/axios/ItemsController' interface Item { id: number; name: string; description: string; img: {url: string}; } const Page:React.FC = () => { const [items,setItems] = useState<Item[]>([]) useEffect(()=>{ Items().then( res => setItems(res)) },[]) console.log(items) return <p>shop</p> } export default Page
Stateの変更時にItemの配列になっているかを検証すると予測したのですがされません。
怪しい動きをしている箇所がありまして、
型チェックが正しく行われているか確認するため、
一つ目のコードの interface Itemのidをstringにしてみたところ、二つ目のコードで型が違うと警告されました。
二つ目のコードのinterface Itemのidをstringにしてみたところエラーはなくなりました。
(本来であればnumberであるはずです。)
試しに
const test: Item = {id:1} const tests: Item[] = [{id:1}]
とやってみたのですが、正しく動いていました。
あなたの回答
tips
プレビュー