プログラミングノート（TypeScript③ 高度な型）

はじめに

Udemyの【世界で7万人が受講】Understanding TypeScript 日本語版を参考にTypeScriptを学習したので、プログラミングノート（カンペ用ノート）をします。

交差型

複数の型を結合する

type Admin = {
  name: string;
  privileges: string[];
};

type Employee = {
  name: string;
  startDate: Date;
};
// 交差型
type ElevatedEmployee = Admin & Employee;

型ガード

型によって挙動を変える

function add(a: Combinable, b: Combinable) {
  if (typeof a === "string" || typeof b === "string") {
    return a.toString() + b.toString();
  }
  return a + b;
}

オブジェクトのプロパティによって挙動を変える

type UnknownEmployee = Employee | Admin;
function printEmployeeInformation(emp: UnknownEmployee) {
  console.log(emp.name);
  if ("privileges" in emp) {
    console.log("Privileges: " + emp.privileges);
  }
  if ("startDate" in emp) {
    console.log("Start Date: " + emp.startDate);
  }
}

オブジェクトによって挙動を変える

function useVehicle(vehicle: Vehicle) {
  vehicle.drive();
  if (vehicle instanceof Truck) {
    vehicle.loadCargo(1000);
  }
}

判別可能なUnion型

共通なプロパティを持っている場合に、そのプロパティによってどのオブジェクトかを判別可能
interfaceやクラスを使うことでミスを防ぐことができる。

interface Bird {
  type: "bird"; // birdという文字列のみを許可するリテラル型
  flyingSpeed: number;
}

interface Horse {
  type: "horse";
  runningSpeed: number;
}

type Animal = Bird | Horse;

function moveAnimal(animal: Animal) {
  let speed;
  // typeというプロパティによってオブジェクトを判別する。 
  switch (animal.type) {
    case "bird":
      speed = animal.flyingSpeed;
      break;
    case "horse":
      speed = animal.runningSpeed;
  }
}

型キャスト

TypeScriptが型を推論できない場合に使う。
!はnullでないことを伝える
as HTMLInputElement でinputの要素であることを伝える。

const userInputElement = document.getElementById(
"user-input"
)! as HTMLInputElement;

index型

プロパティと値の型を指定する。

interface ErrorContainer {
  [prop: string]: string; // index型。このinterfaceプロパティはstring 値もstringでないといけない。
}

const errorBag: ErrorContainer = {
  email: "正しいメールアドレスではありません", // プロパティも値もstringと解釈できる
  username: "ユーザ名に記号を含めることはできません。",
};

関数オーバーロード

どのような引数をサポートし、何を返すのかを定義する。

unction add(a: number, b: number): number; // 引数が両方numberなら戻り値もnumber
function add(a: string, b: string): string; // 引数が両方stringなら戻り値もstring
function add(a: string, b: number): string;
function add(a: number, b: string): string;
function add(a: Combinable, b: Combinable) {
  // 型によって動作を変える（型ガード）
  if (typeof a === "string" || typeof b === "string") {
    return a.toString() + b.toString();
  }
  return a + b;
}

const result = add("Hello", "TypeScript");
result.split("");

オプショナルチェーン

プロパティが存在しているか確証が持てない場合に使う。
存在している場合にのみアクセスする。

const fetchedUserData = {
  id: "u1",
  name: "user1",
  job: {
    title: "Developer",
    description: "TypeScript",
  },
};
console.log(fetchedUserData?.job?.title);

null合体演算子

nullかundefinedの場合は後続の文字列を使用する。

const userInput = null;
const storedData = userInput ??  "DEFAULT";

console.log(storedData);