아이템 14. 타입 연산과 제너릭 사용으로 반복 줄이기

/** 원본 코드 (개선 전) */
console.log('Cylinder 1 x 1 ',
            'Surface area: ', 6.283185 * 1 * 1 + 6.283185 * 1 * 1,
            'Volume: ', 3.14159 * 1 * 1 * 1
            )
console.log('Cylinder 1 x 2 ',
            'Surface area: ', 6.283185 * 1 * 1 + 6.283185 * 2 * 1,
            'Volume: ', 3.14159 * 1 * 2 * 1
            )
console.log('Cylinder 2 x 1 ',
            'Surface area: ', 6.283185 * 2 * 1 + 6.283185 * 2 * 1,
            'Volume: ', 3.14159 * 2 * 2 * 1
            )

/** 수정 코드 (개선 후) */
const surfaceArea = (r, h) => 2 * Math.PI * r * (r + h);
const volume = (r, h) => Math.PI * r * r * h;
for (const [r, h] of [[1, 1], [1, 2], [2, 1]]) {
    console.log(
        'Cylinder ${r} x ${h} ',
        'Surface area: ${surfaceArea(r, h)}',
        'Volume: ${volume(r, h)}'
    );
}

interface Person {
    firstName: string;
    lastName: string;
}

interface PersonWithBirthDate {
    firstName: string;
    lastName: string;
    birth: Date;
}

/* 예시 : 시그니처 추출/분리 */
/* 개선 전 */
function get(url: stirng, opts: Options): Promise<Response> { /* ... */}
function post(url: stirng, opts: Options): Promise<Response> { /* ... */}

/* 개선 후 */
type HttpFunction = (url: string, opts: Options) => Promise<Response>;
const get: HttpFunction = (url, opts) => { /* ... */}
const post: HttpFunction = (url, opts) => { /* ... */}

/* 예시 : 상속 */
/* 개선 전 */
interface Person {
    firstName: string;
    lastName: string;
}

interface PersonWithBirthDate {
    firstName: string;
    lastName: string;
    birth: Date;
}

/* 개선 후 */
interface Person {
    firstName: string;
    lastName: string;
}

interface PersonWithBirthDate extends Person {
    birth: Date;
}

// 아래와 같은 방법도 가능하다.
// type PersonwithBirthDate = Person & { birth: Date };

/* 개선 전 */
interface State {
    userId: string;
    pageTitle: string;
    recentFiles: string[];
    pageContents: string;
}
interface TopNavState {
    userId: string;
    pageTitle: string;
    recentFiles: string[];
}

/* 개선 후 */
interface State {
    userId: string;
    pageTitle: string;
    recentFiles: string[];
    pageContents: string;
};

type TopNavState {
    userId: State['userId'];
    pageTitle: State['pageTitle'];
    recentFiles: State['recentFiles'];
    // State 의 부분 집합으로 TopNavState 를 정의한다.
    // State 를 인덱싱하여 '속성의 타입'에서  중복을 제거할 수 있다.
};

type TopNavState {
    [k in 'userId' | 'pageTitle' | 'recentFiles']: State[k]
    // '매핑된 타입'을 사용해서 조금 더 개선할 수 있다.
};

type Pick<T, K> = { [k in K]: T[k] };

type TopNavState = Pick<State, 'userId' | 'pageTitle' | 'recentFiles'>;

interface SaveAction {
    type: 'save';
    //...
}
interface LoadAction {
    type: 'load';
    //...
}
type Action = SaveAction | LoadAction;

type ActionType = 'save' | 'load';
type ActionType = Action['type'] // 타입은 "save" | "load"

// [참고] type ActionRec = Pick<Action, 'type'>; // {type: "save" | "load"}

/* 개선 전 */
interface Options {
    width: number;
    height: number;
    color: string;
    label: string;
}
interface OptionsUpdate {
    width?: number;
    height?: number;
    color?: string;
    label?: string;
}

/* 개선 후 */
interface Options {
    width: number;
    height: number;
    color: string;
    label: string;
}
type OptionsUpdate = {[k in keyof Options] ?: Options[k]};
// type OptionsUpdate = {[k in "width" | "height" | "color" | "label"] ?: Options[k]};
// keyof Options => "width" | "height" | "color" | "label"

const INIT_OPTIONS = {
    width: 640,
    height: 640,
    color: '#00FF00',
    label: 'VGA',
}

type Options = typeof INIT_OPTIONS;
/* 아래와 같다. */
/*
interface Options {
    width: number;
    height: number;
    color: string;
    label: string;
}
*/

function getUserInfo(userId: string) {
    // ...
    return {
        userId,
        name,
        age,
        height,
        weight,
        favoriteColor,
    }
}

type UserInfo = ReturnType<typeof getUserInfo>;
// type UserInfo = { userId: string; name: string; age: number; ...}