TypeScript Essentials

Generics

Generics & Any 차이점

function helloString(msg: string): string {
  return msg;
}

function helloNumber(msg: number): number {
  return msg;
}

//반복되는 함수들 ...
//그래서 any를 사용하면?

function hello(msg: any): any {
  return msg;
}

console.log(hello('mark').length); //이런 것 사용 못한다.


//generics
function helloGeneric<T>(msg: T) T {
  return msg;
}

console.log(helloGeneric('mark').length); //타입 추론 가능
console.log(helloGeneric(33)); 
console.log(helloGeneric(true));

Generics Basic

//generics
function helloBasic<T>(msg: T) T {
  return msg;
}

//<> 사이에 직접 타입 지정
helloBasic<string>('mark');

//값을 넣으면 타입 추론
helloBasic(36);

//여러 개도 넣을 수 있음
function helloBasic2<T, U>(msg: T, cmt: U) T {
  return msg;
}

helloBasic<string, number>('mark', 33);

Generic Array & Tuple

function helloArr<T>(msg: T[]): T {
  return msg[0];
}

helloArr(['hello', 'world']);

function helloTuple<T, K>(msg: [T, K]): {
  return msg[0];
}

helloTuple(['hello', 'tuple']);

Generic Function

type HelloFunctionGeneric1 = (msg: T) => T;

const helloFunc1: HelloFunctionGeneric1 = <T>(msg: T): T => {
  return msg;
}

interface HelloFunctionGeneric2 {
  <T>(msg: T): T;
}

const helloFunc2:HelloFunctionGeneric2 = <T>(msg: T): T => {
  return msg;
}

Generic Class

class Person<T> {
  private _name: T;
  
  constructor(name: T) {
    this._name = name;
  }
}

//지정하거나 추론 당하거나
new Person('mark');
new Person<number>(33);

class Person2<T, K> {
  private _name: T;
  private _age = K;
  
  constructor(name: T, age: K) {
    this._name = name;
    this._age = age;
  }
}

new Person2('mark', 33);

Generic with extends

class PesonExtends<T extends string | number> {
  private _name: T;
  
  constructor(name: T) {
    this._name = name;
  }
}

new PersonExtends('mark');
new PersonExtends(33);
new PersonExtends(true); //에러 발생

Extends를 사용해서 사용자에게 어떤 가이드를 제공할 수 있다.
아무 타입이나 넣는 것을 방지하도록 하는 것.

keyof & type lookup system

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

const person: IPerson = {
  name: 'mark',
  age: 33
};

//function getProp(obj: IPerson, key: keyof IPerson): IPerson[keyof IPerson] {
//  return obj[key];
//}
function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

//person->IPerson 자동 추론
//두번째 인자는 자동으로 name이나 age
//name 하면 string으로, age 하면 number로
getProp(person, 'age');


//function setProp(obj: IPerson, key: "name"|"age", value: string|number): void {
//  obj[key] = value;
//}

function setProp<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value;
}

setProp(person, 'name', 'lalaa');

• keyof
  어떤 객체의 key의 이름들로 union type으로 반환된다.
  type Keys = keyof IPerson;
  -> IPerson의 key인 name과 age의 union type으로 된다.

IPerson[keyof IPerson]
-> IPerson['name'|'age']
-> IPerson['name'] | IPerson['age']
-> string | number