🌈 本当のタイプのスクリプトの始まり!Union Type

テキストの種類

✔朕Teral Types例1

type Name = 'name';
let aprilName: Name;
aprilName = 'name';

✔️Literal Type例2

function printText(s: string, alignment: "left" | "right" | "center") {
  // ...
}
printText("Hello world", "left");
printText("G'day mate", "centre"); // 이럴 경우 에러남. 
// 두번째 인자에는 세가지의 문자열 중 하나만 입력할 수 있기 때문에!!

🌈 Union Types

|演算子を使用して複数のタイプを接続
納得できる因子を決める?!유니온 타입(Union Type)はい?JavaScriptのOR演算子(|)など、「A」または「B」を表すタイプ.

ORのあなたは?🤔

✔Union Type例1

パラメータを選択すると、上図のようにパラメータの選択を求められます.
許容できる因子を決める.

Returnalタイプの拡張幅?!🤔

type Direction = 'left' | 'right' | 'up' | 'down';
function move(direction: Direction) {
  console.log(direction);
}
move('down'); 

type TileSize = 8 | 16 | 32;
const tile: TileSize = 16;

✔️ユニオンタイプ例2

関数のパラメータidは、numberタイプであってもよいし、stringタイプであってもよい.
これが|演算子を使用して複数のタイプを接続する方法です.

function printId(id: number | string) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}

✔Union Type例3

// function: login -> success or fail ⏱
type SuccessState = {
  response: {
    body: string;
  };
};
type FailState = {
  reason: string;
};
type LoginState = SuccessState | FailState;

function login(id: string, password: string): LoginState {
  return {
    response: {
      body: 'logged in!',
    },
  };
}

Intersection Types: & ✨

ユニオンタイプとは逆のタイプ?

Intersection typeって何?

Intersection Typeは、複数のタイプを同時に満たすタイプ

複数のタイプが同時に宣言できます.

ただし、エラーが発生しないように宣言のタイプをすべて使用する必要があります.😅

✔勘定科目タイプの例

&演算子を使用して複数のタイプ定義を結合します.

type Student = {
  name: string;
  score: number;
};

type Worker = {
  empolyeeId: number;
  work: () => void;
};

function internWork(person: Student & Worker) {
  console.log(person.name, person.empolyeeId, person.work());
}

internWork({
  name: 'april',
  score: 1,
  empolyeeId: 123,
  work: () => {},
});