（学習メモ）『サバイバルTypeScript』を学ぶPart2 〜書いて学ぶ編〜

『サバイバルTypeScript』の「作って学ぶTypeScript」をやってみたので、印象に残った点など、学習メモです。

型定義を使う場面の例

ドキュメントとしても便利だなと思ったりした

vitest

とりあえず基本的な書き方だけだが、RSpecやminitestを知っていれば、読めるな、という感想
他の言語のテストの書き方も気になった

import { expect, test } from "vitest";
import { isZero } from "./is-zero";
 
test("0を渡したらtrueになること", () => {
  const result = isZero(0);
  expect(result).toBe(true);
});
 
test("1を渡したらfalseになること", () => {
  const result = isZero(1);
  expect(result).toBe(false);
});

// 画像情報の型定義
type Image = {
  url: string;
};
 
// APIから画像を取得する関数
export async function fetchImage(): Promise<Image> {
  //                              ^^^^^^^^^^^^^^^^型注釈を追加
  const res = await fetch("https://api.thecatapi.com/v1/images/search");
  const images = await res.json();
  console.log("fetchImage: 画像情報を取得しました", images);
  return images[0]; // 画像情報の配列から最初の要素を返す
}

宣言的UI

この辺り、言葉と定義の理解が曖昧だったので、改めて勉強できてよかった

typescriptbook.jp

命令的UI

const list = document.createElement("ul");
const apple = document.createElement("li");
apple.innerText = "リンゴ";
list.append(apple);
const orange = document.createElement("li");
orange.innerText = "オレンジ";
list.append(orange);
const grape = document.createElement("li");
grape.innerText = "ぶどう";
list.append(grape);

宣言的UI

function Fruits() {
  return (
    <ul>
      <li>リンゴ</li>
      <li>オレンジ</li>
      <li>ぶどう</li>
    </ul>
  );
}

ページコンポーネント

設定より規約的な話かな？

typescriptbook.jp

Next.jsでは、appディレクトリ配下の構造がページのルーティングに対応します。たとえば、app/page.tsxは/にアクセスしたときに表示されるページとなります。

スナップショットテスト

typescriptbook.jp

あるべき状態を保存しておいて、その状態が変わってしまったらテストを落とせるもの
テストを書いていると、コンポーネントの一部分に注目して書くが、合わせて全体もテストできるのは便利、と思った
普段RSpecばかり書いていてこれ欲しいなーと思ったことがあるので、印象に残った