apiデータのTipにインタフェースを適用

8820 ワード
React typescript テキストリンク

React & TypeScript


APIデータを使用する前にインタフェースを使用してタイプを適用するときのヒント.
apiからデータをロードする場合、複数のキー、値が存在し、インタフェースに一つ一つ書き込むのは面倒です.
例)
const [info, setInfo] = useState<InfoData>();
const [priceInfo, setPriceInfo] = useState<PriceData>();
useEffect(() => {
  (async () => {
    const infoData = await (
      await fetch(`https://api.coinpaprika.com/v1/coins/${coinId}`)
    ).json();
    const priceData = await (
      await fetch(`https://api.coinpaprika.com/v1/tickers/${coinId}`)
    ).json();
    console.log(infoData); //****
    console.log(priceData); //****
    setInfo(infoData);
    setPriceInfo(priceData);
  })();
}, []);

  • apiでロードされたデータinfoData、priceDataがあります.まずコンソールです.log()で撮ります

  • コンソールにオブジェクトがある場合は、次のようになります.

    2つのオブジェクトを右クリックし、「Store object as global variable」を選択します.
    図に示すように、temp 1、temp 2が生成されます.

  • Object.keys().join()を使用します.

    生成されたtempが上記のように表示される場合、キー値のみが表示されます.

  • 出力されたキー値をvscodeが作成したいインタフェースにコピーします.

    次にカンマをドラッグし、command + Dを使用してすべて選択し、Enterを押します.

  • この状態でcommand + ➡️を使い、右側に移動して: ;と書きます.

    またはすべてドラッグし、option + shift + Iをクリックして右に移動します.

  • Object.values().map((v)=>typeof v).join()

    key値を取得したときと同じようにvalues()だけです.join()が終了するとvalue値が表示されます.でも私が知りたいのはTypeなのでmapでtypeofを出力します.

  • 出力値をコピーし、command + Dで一列に並べ、すべて切り取ります.
    クリップcommand + X

  • 最初に作成したキー値を右側にドラッグし、option + shift + Iで貼り付けます.


  • 整理する
    コンソールでこれらの値がArrayであることを確認します.タイプにはいくつかのオブジェクトがあります.これらのデータを使用する必要がある場合は、同様の方法を変更したり、直接入力タイプを変更したりすることができます.△使わなければ消すことができます.
    インタフェースアプリケーションを単独で作成することもできます.
    例)
    interface ITag {
    name: string;
    symbol: string;
    rank: number;
}

interface InfoData {
    message: ITag[];
}
    オブジェクトはkey:typeを入力して整理することもできます.
    例)
    interface InfoData {
    message: ITag[];
    quotes: {
        USD: {
            ath_date: string;
            ath_price: number;
            market_cap: number;
        }
    }
}
    • バイナリツリー巡回(DFS)
    hadoopアップグレード