Typescritの型について

Question

interface ListData {
  comment: string
  title: string
}

const Page = () => {
  const [List, setList] = useState<ListData[]>([]);
 
  useEffect(() => {
    axios("http://hoge").then(res => {
      setList(res.data);
    });
  }, []);

上記のコードでデータベースからデータをとってくるのですが、帰ってくるデータが

{
id: number,
comment: string,
title: string,
user_id: number
}

で帰ってきます。ここでわからないのでListは型Listdataの配列なのですが,
setList(res.data)を行っても特にエラーが起こりません。
なせ、型エラーが起こらないのでしょうか?

Comments

[miyabi_pudding]

エラーが起こらないのは、どのタイミングですか？
TypeScriptの構文記載時ですか？
それとも、TypeScriptを、JavaScriptにコンパイルしたあとですか？
後者であれば、JavaScriptになってしまったあとの話なので、
（非同期通信と思われるため）型の違いに対してのエラーは起きません。

前者は、useState<ListData[]>の時点で、resの型保証をしてしまっているとみられてしまうので、
なんにせよエラーは起きないかと・・・。

Answer 1

TypeScriptによる型検査が行われるのはコンパイル時のみです。
それとは別に、実行時に値を検証したいのであれば、typeof演算子などを使う必要があります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof

この例だと、APIの実際のレスポンスの型をコンパイラが把握できるはずもないので、any型として扱われます。
ただ、axiosの型定義ファイルを見ると、ジェネリクスを使って開発者側から「レスポンスはこの型だよ」と明示することができそうです。

interface Response {
  id: number
  comment: string
  title: string
  user_id: number
}

// 省略...

// レスポンスはResponse型だと明示することでres.dataはResponse型として扱われる
axios.get<Response>("http://hoge").then(res => {
  setList(res.data);
});

こうすれば、コンパイル時に型エラーを発生させられると思います。

Answer 2

特に指定しない場合、axiosの受信結果は、Promise<any>となっています。つまり、responseに対する方チェックは行われません（axiosの型定義ファイル）。