TypeScript練習場

プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで (Software Design plus)

TSの役割

  1. 型チェック
  2. トランスパイル（コンパイル）

型チェックはプログラムを実行しなくても行える静的なチェックである

インデックスシグネチャ


  type PriceData = {
    [key: string]: number;
  };
  
  const obj1:PriceData = {
    apple: 123,
    banana: 567,
  };
  
  obj1.hoge = 778;

変数の型を取得できるtypeof


// 型を明示されてないオブジェクトから型推論によりtypeofで型を取得する例。濫用すべきでない。
const obj = {
  a: 123,
  b: 345,
};
const obj2: typeof obj = {
  a: 234,
  b: 345435,
};
console.log(obj2);

型引数 - ジェネリック型


type hasName = {
  name: string;
};

type A = {
  name: string;
};

type B = {
  name: string;
  type: number;
};

type Family<Parent extends hasName, Child extends Parent> = {
  mother: Parent;
  parent: Parent;
  child: Child;
};

const obj: Family<A, B> = {
  mother: { name: "kanon" },
  parent: { name: "foej" },
  child: { name: "ewfo", type: 2 },
};

6章 高度な型

関数呼び出しのオプショナルチェイニング


type GetTimeFunc = () => Date;

function useTime(getTimeFunc: GetTimeFunc | undefined) {
  const timeOrUndefined = getTimeFunc?.();
}

lookup型、keyof型


type Human = {
  name: string;
  age: number;
};

function get<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const uhyo: Human = {
  name: "matsuda",
  age: 2,
};

const uhyoName = get(uhyo, "name");
const uhyoAge = get(uhyo, "age");

8章 非同期処理

async await の順番をしっかり理解


async function get3(): Promise<number> {
  console.log("get3が呼び出された");
  await sleep(1000);
  console.log("awaitの次に進んだ");
  return 3;
}

console.log("get3を呼びだし");
const p = get3();
p.then((num) => console.log(num));
console.log(".thenの後");

// get3を呼びだし;
// get3が呼び出された.thenの後;
// awaitの次に進んだ;
// 3;