[インフラストラクチャ実戦プロジェクトから学ぶタイプスクリプト]-高度なタイプ、mapdタイプ

この文章は実戦型シナリオの高級タイプとmapdタイプに基づいて整理されています.

ユーティリティタイプの概要

タイプスクリプトマニュアルリファレンスWebサイト:https://joshua1988.github.io/ts/usage/utility.html
ユーティリティタイプは、定義されたタイプを変換するときに使用される良い構文です.
以下に示すように、これをコードと見なします.

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

type MayHaveEmail = Partial<Address>;

const me: MayHaveEmail = {}; // 가능
const you: MayHaveEmail = { email: '[email protected]' }; // 가능
const all: MayHaveEmail = { email: '[email protected]', address: 'Pangyo' }; // 가능

Partialタイプで記述されている場合は、インタフェースで定義されているタイプの一部だけでオブジェクトを作成できます.
このユーティリティタイプを使用すると、より簡潔な構文を使用して新しいタイプを定義することなく、新しいタイプを使用できます.

ユーティリティタイプの例-Pick

NAVER Shoppingという名前のサイトには、製品の情報を取得するために使用できるfetchProductsという関数があります.商品の詳細ビューをクリックしたときのdisplayProductDetailという関数もあります.
彼らの買収のために、以下に示すように、インタフェースProduct、ProductDetailが定義されている.

interface Product {
    id: number;
    name: string;
    price: number;
    brand: string;
    stock: number;
}

// 상품 목록을 받아오기 위한 API 함수
function fetchProducts(): Promise<Product[]> {
    // ..
}

interface ProductDetail {
    id: number;
    name: string;
    price: number;
}

type ShoppingItem = Pick<Product, 'id' | 'name' | 'price'>

function displayProductDetail(shoppingItem: ShoppingItem) {
    
}

このコードから分かるように、Product、ProductDetailの部分にはid, number, priceの繰り返しがある.この問題を解決するために、Pickというユーティリティタイプを使用してShoppingItemと同様のタイプを作成すると、コードの重複を減らすことができます.

Omitタイプとその他のユーティリティタイプのリストについて説明します

「コミット」(Omit)タイプは、指定した属性を特定のタイプから削除した後の残りの属性タイプを定義します.

interface Product {
  id: number;
  name: string;
  price: number;
  brand: string;
  stock: number;
}

const productWithoutStock: Omit<Product, 'stock'> = {
  id: 123,
  name: '상품1',
  price: 1000,
  brand: 'abc'
}

const productWithoutBrandAndPrice: Omit<Product, 'brand'|'price'> = {
  id: 1234,
  name: '상품2',
  stock: 1111
}

ユーティリティタイプの例-Partial

特定の商品を更新するだけだと仮定します.もし部分だけ更新して、更新が必要なすべてのProductを更新しなければ、どうすればいいですか?ハーモニーで見てみましょう

// 중복 발생
interface UpdateProduct {
  id?: number;
  name?: string;
  price?: number;
  brand?: string;
  stock?: number;
}

type UpdateProduct = Partial<Product>
// 3. 특정 상품 정보를 업데이트(갱신) 하는 함수
function updateProductItem(productItem: Partial<Product>) {}

パラメータとしてinterfaceキーワードを使用して、部分のみを処理できます.しかし、このようにすれば、繰り返しが発生し、効率が低下します.したがって、Partialを使用してUpdateProductを定義し、全体に必要な部分のみを受け入れることができる.

インプリメンテーションおよびクリーンアップユーティリティのタイプ

Partial内部で実施

Partialがどのように実施されているかを見てみましょう.Partial.ts

type Partial<T> = {
    [P in keyof T]?: T[P];
};

今コードを見ていると、どんな内容なのか分かりにくいです.Partialがどのように実現されているかを順に理解してみましょう.#1

type UserProfileUpdate = {
  username?: UserProfile['username'];
  email?: UserProfile['email'];
  profilePhotoUrl?: UserProfile['profilePhotoUrl'];
};

1つ目は上記のように、UserProfileUpdateのタイプを発表し、すべての観客にUserProfileの身長で接近した.#2

type UserProfileUpdate = {
  [p in 'username' | 'email' | 'profilePhotoUrl']?: UserProfile[p];
};
type UserProfileKeys = keyof UserProfile;

inを使用してusername, email, profilePhotoUrlを回転するときのコードの略です.ここではkeyofを使用し、UserProfile内にすべてのキーが表示されます.#3

type UserProfileUpdate = {
  [p in keyof UserProfile]?: UserProfile[p];
};

アプリケーションkeyofは、上述したようにコードを減らすことができる.#4

type Subset<T> = {
  [p in keyof T]?: T[p];
};

最終的には,Generickを用いてTをパラメータとして受け入れ,以下のように記述することができる.これを最初のPartialと比較すると同じであることが確認できた.

地図の種類

マッピングタイプは、既存の定義されたタイプを新しいタイプに変換する構文です.
→javascriptのmap() API関数をタイプに適用するのと同じ効果があります.

マッピングタイプの例

まずはJavaScriptのfor…inドアを見てみましょう.

var arr = ['a', 'b', 'c'];
for (var key in arr) {
  console.log(arr[key]);
}

arrのアレイの周りでこれらの値を巡回します.
タイプスクリプトのマッピングタイプを以下に示します.

type Heroes = 'Hulk' | 'Capt' | 'Thor';
type HeroAges = { [K in Heroes]: number };
const ages: HeroAges = {
  Hulk: 33,
  Capt: 100,
  Thor: 1000,
};

Heroesのタイプを使用して、numberタイプを内側の値の周りに付与します.したがって、agesという変数のタイプをHeroAgesに付与し、上記の宣言を行うことができる.
これにより、マッピングタイプは、既存の定義されたタイプを使用して新しいタイプに変換できます.