28일차

🥕

28일차

 

Part 4. TypeScript Essentials

Ch 7. Generics

 

---

 

 

Ch 7. Generics

 

 

 

타입은 최대한 작은 범위로 제한 하는 것이 좋다!!! 그렇게 만들기 위해 노력하쟈

 

 

// Generics vs Any

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

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

// 더 많은 반복된 함수들 ...

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

console.log(hello("Mark").length); // any
console.log(hello(39).length); // any

function helloGeneric<T>(message: T): T {
  return message;
}

console.log(helloGeneric("Mark").length); // string
console.log(helloGeneric(39)); // number
console.log(helloGeneric(true)); // boolean

 

// Generic Basic

function helloBasic<T, U>(message: T, comment: U): T {
  return message;
}

helloBasic<string, number>("Mark", 39); // 지정 O => 타입 제한
helloBasic(36, 39); // 지정 X => 타입 추론

 

// Generic Array & Tuple

function helloArray<T>(message: T[]): T {
  return message[0];
}

helloArray(["Hello", "World"]); // string
helloArray(["Hello", 5]); // string | number

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

helloTuple(["Hello", "World"]); // string, string
helloArray(["Hello", 5]); // string | number

 

// Generics Function

type HelloFunctionGeneric1 = <T>(message: T) => T;

const helloFunction1: HelloFunctionGeneric1 = <T>(message: T): T => {
  return message;
};

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

const helloFunction2: HelloFunctionGeneric2 = <T>(message: T): T => {
  return message;
};

 

// Generic Class

class Person<T, K> {
  private _name: T;
  private _age: K;

  constructor(name: T, age: K) {
    this._name = name;
    this._age = age;
  }
}

new Person("Mark", 39);
new Person<string, number>("Mark", "age"); // 🚨 Error

 

// Generics with extends

class PersonExtends<T extends string | number> {
  private _name: T;

  constructor(name: T) {
    this._name = name;
  }
}

new PersonExtends("Mark");
new PersonExtends(39);
new PersonExtends(true); // 🚨 Error string | number 만 가능

 

// keyof & type lookup system

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

const person: IPerson = {
  name: "Mark",
  age: 39,
};

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

getProp(person, "name"); // string
getProp(person, "age"); // number

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

setProp(person, "name", "Anna");