Into the Typescript 3

高度なタイプ

ユーティリティタイプ

ユーティリティタイプは、定義したタイプを少し変更できる良いタイプ構文です.ユーティリティタイプを使用すると、より簡潔な構文でタイプを定義できます.

partial
特定のタイプの部分集合のみをタイプとして使用したい場合.

interface Address {
  email: string;
  address: string;
}

type MayHaveEmail = Partial<Address>;
const me: MayHaveEmail = {}; // 가능
const you: MayHaveEmail = { email: '[email protected]' }; // 가능

partialを使用しない場合、optialパラメータを使用するとコードが重複します.

interface UpdateProduct {
  id?: number;
  name?: string;
  price?: number;
  brand?: string;
}

pick
タイプのいくつかの属性のみをタイプとして使用したい場合.

interface Beverage{
  name: string;
  price: number;
}

const gatorade : Pick<Beverage, 'name'> = {
  name : 'gatorade',
}

内部動作方式

上記の注記に示すように、Partialタイプをよく見ると、すべてのプロパティに適用されます.

Omit
ピックとは逆に、いくつかのタイプを削除したい場合は、それを使用します.

interface Device {
  name: string;
  company : string;
  price : number;
  place: string;
}
const samsung: Omit<Device, 'place'|'price'> = {
  name: '갤럭시S20',
  company: '삼성'
}

マッピングのタイプ

これはJavaScriptのmap関数と似た原理で,タイプにマッピングを適用することでタイプを変える方式である.

デフォルトフォーマット
マッピングタイプは次の形式で作成する必要があります.

{ [ P in K ] : T }
{ [ P in K ] ? : T }
{ readonly [ P in K ] : T }
{ readonly [ P in K ] ? : T }

キー値ごとに数値のあるオブジェクトを作成する場合は、次のように作成できます.

type stocks = 'APPL'|'TSLA'|'MSFT';
type StockPrice = {[K in stocks]: number};
const PriceInfo : StockPrice = {
  'APPL': 119,
  'TSLA': 654,
  'MSFT': 230,
}