'Practical Advanced TypeScript' 정리

// 대한민국의 인구 수 51,709,098명
const koreanPop = 51709098;

// with numeric seprator
const koreanPop = 51_709_098;

class AmountInput {
  private static MAX_AMOUNT_ALLOWED = 99_999_999;
  amount: number = 0;

  showTooltip() {
    // 툴팁을 표시
    setTimeout(() => {
      // 툴팁 닫기
    }, 2_500);
  }

  // 백만 단위로 표시
  formatMillion() {
    return this.amount / 1_000_000 + "M";
  }
}

class Library {
  titles: string[];

  constructor() {}
}
const library = new Library();

class Library {
  titles: string[];

  constructor(underRenovation: boolean) {
    if (!underRenovation) {
      this.titles = ["What if?", "Flow"];
    } else {
      this.titles = [];
    }
  }
}

class Library {
  titles!: string[];

  constructor() {}
}

interface Admin {
  id: string;
  role: string;
}

interface User {
  id: string;
  email: string;
}

function redirect(user: Admin | User) {
  if (/* 사용자가 어드민이라면 */) {
  }
}

function routeToAdminPage(role: Admin["role"]) {}
function routeToHomePage(email: User["email"]) {}

function redirect(user: Admin | User) {
  if ((user as Admin).role !== undefined) {
    routeToAdminPage(user.role); // 에러
  } else {
    routeToHomePage(user.email); // 역시 에러
  }
}

function redirect(user: Admin | User) {
  if (isAdmin(user)) {
    routeToAdminPage(user.role);
  } else {
    routeToHomePage(user.email);
  }
}

function isAdmin(user: Admin | User): user is Admin {
  return (user as Admin).role !== undefined;
}

function redirect(user: Admin | User) {
  if ("role" in user) {
    routeToAdminPage(user.role); // 이 부분에서 자동완성 할 때는 `role` 속성밖에 나오지 않음
  } else {
    routeToHomePage(user.email); // 여기서는 `email` 만 나옴
  }
}

export class Add implements Action {
  readonly type = "Add"; // (property) Add.type: 'Add'
  constructor(public payload: string) {}
}

export class Add implements Action {
  readonly type = "Add";
  constructor(public payload: string) {}
}

export class RemoveAll implements Action {
  readonly type = "Remove All";
}

export type TodoActions = Add | RemoveAll;

// ...
function todoReducer(state: TodoState = { todos: [] }, action: TodoActions) {
  // ...
}

interface ITodoState {
  todos: string[];
}

enum TodoActionType {
  Add = "Add",
  RemoveAll = "Remove All",
  RemoveOne = "Remove One",
}

export interface Action {
  type: TodoActionType;
}

export class Add implements Action {
  readonly type = TodoActionType.Add;
  constructor(public payload: string) {}
}

export class RemoveAll implements Action {
  readonly type = TodoActionType.RemoveAll;
}

export class RemoveOne implements Action {
  readonly type = TodoActionType.RemoveOne;
}

type TodoActions = Add | RemoveAll | RemoveOne;

function todoReducer(
  action: TodoActions,
  state: ITodoState = { todos: [] }
): ITodoState {
  switch (action.type) {
    case TodoActionType.Add: {
      return {
        todos: [...state.todos, action.payload],
      };
    }
    case TodoActionType.RemoveAll: {
      return {
        todos: [],
      };
    }
    default: {
      // 에러
      // 위의 switch 문을 다 거쳐서 남은 `action` 은 RemoveOne인데 `never` 가 될 수 없다.
      const x: never = action;
    }
  }
  return state;
}

interface Pet {
  name: string;
  age: number;
}

type ReadonlyPet = { readonly [K in keyof Pet]: Pet[K] };

const pet: Pet = { name: "Happy", age: 10 };
const readonlyPet: ReadonlyPet = { name: "Cerberus", age: 1000 };

pet.age = 15;
readonlyPet.age = 200; // readonly 속성을 수정하려고 하기 때문에 에러

interface Pet {
  name: string;
  age: number;
  favoritePark?: string;
}

type ReadonlyPet = { readonly [K in keyof Pet]-?: Pet[K] }; // `-?` 부분 주목

// 이제 favoritePark 속성이 없다고 에러가 난다.
const readonlyPet: ReadonlyPet = { name: "Cerberus", age: 1000 };

type ReadonlyPet =
  +readonly [K in keyof Pet]-?: Pet[K];
};

interface TreeNode<T> {
  value: T;
  left: TreeNode<T>;
  right: TreeNode<T>;
}

interface LinkedListNode<T> {
  value: T;
  next: LinkedListNode<T>;
}

let node: LinkedListNode<string>;
node.next.next.next.next.next.value;

interface Action {
  type: string;
}

interface ListNode<T> {
  value: T;
  prev: ListNode<T>;
  next: ListNode<T>;
}

let action1 = { type: "LOGIN" };
let action2 = { type: "LOAD_POSTS" };
let actionNode1: ListNode<Action> = {
  value: action1,
  prev: null,
  next: null,
};
let actionNode2: ListNode<Action> = {
  value: action2,
  prev: actionNode1,
  next: null,
};
actionNode1.next = actionNode2;

actionNode1.next = actionNode2;

let currentNode = actionNode2;

do {
  console.log(currentNode.value);
  currentNode = currentNode.prev;
} while (currentNode);

class BackwardActionIterator implements IterableIterator<Action> {
  constructor(private _currentActionNode: ListNode<Action>) {}
}

class BackwardActionIterator implements IterableIterator<Action> {
  constructor(private _currentActionNode: ListNode<Action>) {}

  [Symbol.iterator](): IterableIterator<Action> {
    return this;
  }

  next(): IteratorResult<Action> {
    const curr = this._currentActionNode;
    // 종료 조건
    if (!curr || !curr.value) {
      return { value: null, done: true };
    }
    // 1. 리스트의 아이템을 이동한다
    this._currentActionNode = curr.prev;
    // 2. 값을 리턴해준다
    return { value: curr.value, done: false };
  }
}

let action1 = { type: "LOGIN" };
let action2 = { type: "LOAD_POSTS" };
let action3 = { type: "DISPLAY_POSTS" };
let action4 = { type: "LOGOUT" };

let actionNode1: ListNode<Action> = {
  value: action1,
  prev: null,
  next: null,
};
let actionNode2: ListNode<Action> = {
  value: action2,
  prev: actionNode1,
  next: null,
};
actionNode1.next = actionNode2;
let actionNode3: ListNode<Action> = {
  value: action3,
  prev: actionNode2,
  next: null,
};
actionNode2.next = actionNode3;
let actionNode4: ListNode<Action> = {
  value: action4,
  prev: actionNode3,
  next: null,
};
actionNode3.next = actionNode4;

const backwardActionsList = new BackwardActionIterator(actionNode4);

for (const action of backwardActionsList) {
  console.log(action);
}
/** 결과
 * { type: 'LOGOUT' }
 * { type: 'DISPLAY_POSTS' }
 * { type: 'LOAD_POSTS' }
 * { type: 'LOGIN' }
 */

interface StringContainer {
  value: string
  format(): string
  split(): string[]
}

interface NumberContainer {
  value: number
  nearestPrime: number
  round(): number
}

interface Item<T> {
  id: T
  container: T extends string ? StringContainer : NumberContainer
}

let item: Item<string> = {
  id: "a23d",
  container: null
}

item.container.
// 여기까지 찍어보면 타입스크립트 개발 환경에서는 StringContainer 타입에 맞는 자동완성이 나온다.

type ArrayOnly<T> = T extends any[] ? T : never;
type StringOrNumbers = ArrayOnly<string | number | string[] | number[]>;

interface Book {
  id: string;
  tableOfContents: string[];
}

interface Tv {
  id: number;
  diagonal: number;
}

interface ItemService {
  getItem<T>(id: T): Book | Tv;
}

interface ItemService {
  getItem<T extends string | number>(id: T): T extends string ? Book : Tv;
}

let itemService: IItemService;

const book = itemService.getItem("10");
const tv = itemService.getItem(10);
const wrong = itemService.getItem(false); // 에러

const someNumbers = [2, 1];
const someObject = {
  id: 21,
  name: 'John',
};
const someBoolean = true;

type NumbersArrayFlattened // -> number
type SomeObjectFlattened   // -> number | string
type SomeBooleanFlattened  // -> boolean

type FlattenArray<T extends any[]> = T[number];
type FlattenObject<T extends object> = T[keyof T];

type NumbersArrayFlattened = FlattenArray<typeof someNumbers>; // -> number
type SomeObjectFlattened = FlattenObject<typeof someObject>; // -> number | string

type Flatten<T> = T extends any[]
  ? T[number]
  : T extends object
    ? T[keyof T]
    : T;

type NumbersArrayFlattened = Flatten<typeof someNumbers>; // -> number
type SomeObjectFlattened = Flatten<typeof someObject>; // -> number | string
type SomeBooleanFlattened = Flatten<typeof someBoolean>; // -> boolean

function generateId(seed: number) {
  return seed + 5; // 숫자를 반환
  //  return seed + "5"; -> 문자열을 반환
}

function generateId(seed: number) {
  return seed + 5;
}

lookupEntity(generateId(10)); // 에러

// id의 인자 타입을 number로 바꿔주면 당장은 동작하겠다만
// generateId의 리턴 타입이 바뀌게 되면 일일이 대응해주어야 하나?
function lookupEntity(id: string) {
  // id값으로 엔티티를 쿼리한다
}

type ReturnType<F> = F extends (...args: any[]) => infer R ? R : any;

// ...
type Id = ReturnType<typeof generateId>;
lookupEntity(generateId(10)); // 이제 에러 안난다

// generateId의 리턴 타입에 따라 id의 타입도 바뀐다
function lookupEntity(id: Id) {
  // id값으로 엔티티를 쿼리한다
}

type UnpackPromiseArray<P> = P extends Promise<infer K>[] ? K : any;

const arr = [Promise.resolve(true)];

type ExpectedBoolean = UnpackPromiseArray<typeof arr>; // -> boolean

/**
 * `Payload<H>` 는 핸들러 `H` 타입에 있는 페이로드 타입을 추론한다.
 * 만약 핸들러가 페이로드 인자(두 번째 인자)가 없는 경우 리턴 타입은 `undefined` 를 리턴하고
 * 페이로드가 있다면 페이로드의 타입을 추론하여 리턴한다.
 */
export type Handler<S, P> = (state: S, payload: P) => S;
type Payload<H> = H extends (s: any) => any
  ? undefined // 페이로드가 인자에 포함되지 않은 경우
  : H extends Handler<any, infer Payload> // `H` 타입이 `Handler` 타입이 아닌 경우 에러를 표시한다
    ? Payload
    : never;

interface Email {
  from: string;
  to: string[];
  body: string;
}

interface Todo {
  isCompleted: boolean;
  text: string;
  linkedEmail: Email;
}

interface RootState {
  userId: string;
  showCompletedOnly: boolean;
  todoTypes: string[];
  todos: Todo[];
  iconGrid: string[][];
}

function rootReducer(action: any, state: RootState): RootState {
  // case action 1...
  // case action 2...
  return state;
}

let state: RootState;

// 아래의 코드는 아무런 경고가 뜨지 않는다.
state.showCompletedOnly = true;
state.userId = "newId";
state.todoTypes = [];
state.todoTypes[0] = "diff type";
state.todos[1].linkedEmail.body = "hi";
state.todos[1].linkedEmail.to[1] = "john";

type ReadonlyRootState = Readonly<RootState>;
let state: ReadonlyRootState;

// 위의 세 줄 까지만 에러가 뜬다.
state.showCompletedOnly = true;
state.userId = "newId";
state.todoTypes = [];
// 여기부터는 에러가 뜨지 않는다.
state.todoTypes[0] = "diff type";
state.todos[1].linkedEmail.body = "hi";
state.todos[1].linkedEmail.to[1] = "john";

type DeepReadonly<T> = { readonly [K in keyof T]: DeepReadonly<T[K]> };
type ReadonlyRootState = DeepReadonly<RootState>;

let state: ReadonlyRootState;

// 이제 모든 부분에서 에러가 표시된다.
state.showCompletedOnly = true;
state.userId = "newId";
state.todoTypes = [];
state.todoTypes[0] = "diff type";
state.todos[1].linkedEmail.body = "hi";
state.todos[1].linkedEmail.to[1] = "john";

state.todoTypes.map(todo => todo.toUpperCase());

type DeepReadonlyObject<T> = { readonly [K in keyof T]: DeepReadonly<T[K]> };
type DeepReadonly<T> = T extends (infer E)[]
  ? ReadonlyArray<DeepReadonlyObject<E>>
  : T extends object
    ? DeepReadonlyObject<T>
    : T;
type ReadonlyRootState = DeepReadonlyObject<RootState>;

let state: ReadonlyRootState;

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

class TodoService {
  todos: Promise<Todo[]> = fetch("...");
}

const todoService = new TodoService();

function GetTodos(target: any, propertyKey: string) {}

class TodoService {
  @GetTodos
  todos: Promise<Todo[]>;
}

function GetTodos(target: any, propertyKey: string) {
  const fetchData = () => fetch("targetUrl").then(response => response.json());

  Object.defineProperty(target, propertyKey, {
    get: function () {
      return fetchData();
    },
  });
}

class TodoService {
  @GetTodos
  todos: Promise<Todo[]>;
}

const todoService = new TodoService();
todoService.todos.then(todos => {
  console.log(todos);
});

function GetTodos(target: any, propertyKey: string) {
  const hiddenInstanceKey = `_$$${propertyKey}$$_`;
  const fetchData = () => {
    console.log("calling fetchData"); // fetchData가 여러번 호출되는지 확인해보자
    return fetch("targetUrl").then(response => response.json());
  };

  Object.defineProperty(target, propertyKey, {
    get: function () {
      // 최초 호출 시 `hiddenInstanceKey` 안에 동적 할당
      return this[hiddenInstanceKey] || (this[hiddenInstanceKey] = fetchData());
    },
  });
}

class TodoService {
  @GetTodos
  todos: Promise<Todo[]>;
}

const todoService = new TodoService();
todoService.todos.then(todos => {
  console.log(todos);
});
todoService.todos.then(todos => {
  console.log(todos);
});
todoService.todos.then(todos => {
  console.log(todos);
});

function Get(url: string) {
  return function (target: any, propertyKey: string) {
    const hiddenInstanceKey = `_$$${propertyKey}$$_`;
    const fetchData = () => fetch(url).then(response => response.json());

    Object.defineProperty(target, propertyKey, {
      get: function () {
        return (
          this[hiddenInstanceKey] || (this[hiddenInstanceKey] = fetchData())
        );
      },
    });
  };
}

class TodoService {
  @Get("https://jsonplaceholder.typicode.com/todos")
  todos: Promise<ITodo[]>;
}

function f() {
  console.log("f(): evaluated");
  return function (
    target,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    console.log("f(): called");
  };
}

function g() {
  console.log("g(): evaluated");
  return function (
    target,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    console.log("g(): called");
  };
}

class C {
  @f()
  @g()
  method() {}
}
const c = new C();
console.log(c.method());

/**
 * method 호출 결과
 * f(): evaluated
 * g(): evaluated
 * g(): called
 * f(): called
 */

const Get: (url: string) => PropertyDecorator = url => {
  return function fetchDecorator(target: any, propertyKey: string) {
    const hiddenInstanceKey = `_$$${propertyKey}$$_`;
    const fetchData = () => fetch(url).then(response => response.json());

    Object.defineProperty(target, propertyKey, {
      get() {
        return (
          /**
           * 데코레이터를 조합 할 때는 이상하게도 `Object.defineProperty` 안에서 `this` 가 제대로 동작하지 않았다(undefined로 표시됨).
           * 강좌의 예제에서는 `this` 가 잘 동작했지만, 이번에는 `target` 만 사용하여도 동작하고, 같은 객체를 사용하리라 생각하기 때문에 변경했다.
           */
          target[hiddenInstanceKey] || (target[hiddenInstanceKey] = fetchData())
        );
      },
      configurable: true,
    });
  };
};

const First: () => PropertyDecorator = () => {
  return function (target: any, propertyKey: string) {
    const hiddenInstanceKey = `_$$${propertyKey}$$_`;
    // `@Get` 데코레이터를 통해 먼저 재정의되었던 `get` 을 가져온다.
    const prevInit = Object.getOwnPropertyDescriptor(target, propertyKey).get;
    const getFirst = () => prevInit().then(response => response[0]);

    Object.defineProperty(target, propertyKey, {
      get() {
        return (
          target[hiddenInstanceKey] || (target[hiddenInstanceKey] = getFirst())
        );
      },
      configurable: true,
    });
  };
};

class TodoService {
  @First()
  @Get("https://jsonplaceholder.typicode.com/todos")
  todos: Promise<Todo[]>;
}