[ 인프런 - 타입스크립트 입문_기초부터 실전까지 ] 6. 타입스크립트 클래스 / 제네릭

인프런 장기효(캡틴판교) 님의 [ 타입스크립트 입문 - 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다.

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의

---

클래스

# 타입스크립트에서 클래스 선언하기

 

class Person2 {
  private name: string;
  public age: number;
  readonly log: string;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

---

제네릭 (Generics)

# 제네릭 (Generics)

: 타입을 마치 함수의 파라미터처럼 사용하는 것 

- 함수를 호출할 때 넘어오는 파라미터의 타입에 따라 타입이 결정된다. 

function logText<T>(text: T): T {
  console.log(text);
  return text;
}

logText<string>("Hello");
logText<number>(10);

---

제네릭의 장점 

- 함수를 호출할 때 타입을 결정하기 때문에 해당 타입을 알고, 해당 타입의 내장 함수를 사용할 수 있다. 

  - 아래 사진에서 str이 string타입인 것을 추론할 수 있기 때문에 string의 함수들을 사용할 수 있다. 

---

인터페이스에 제네릭을 선언하는 방법 

interface Dropdown<T> {
  value: T;
  selected: boolean;
}

const obj1: Dropdown<string> = {
  value: "abc",
  selected: true,
};

const obj2: Dropdown<number> = {
  value: 1,
  selected: true,
};

---

제네릭 실전 예제

: 이메일과 상품 수량을 선택하는 드롭다운 option을 배열에 저장하고, 제네릭을 이용하여 option을 불러오는 예제

  - 이메일 배열의 value는 string 타입으로 저장되어 있고, 상품 수량 배열의 value는 number 타입으로 저장되어 있음 

  - value의 타입이 T 이고, selected가 boolean인 인터페이스 생성 

  - 이메일 배열은 T 에 string을 지정하고, 상품 수량 배열은 T에 number를 지정 

  - option들을 드롭다운에 넣는 함수 addDropdown에는 T가 striong 또는 number가 들어갈 수 있도록 유니온 타입으로 선언

 

- typescript 코드

interface Option<T> {
  value: T;
  selected: boolean;
}

const emails: Option<string>[] = [
  { value: "naver.com", selected: true },
  { value: "gmail.com", selected: false },
  { value: "hanmail.net", selected: false },
];

const numberOfProducts: Option<number>[] = [
  { value: 1, selected: true },
  { value: 2, selected: false },
  { value: 3, selected: false },
];

function addDropdownItem(items: Option<string | number>[], selector: string) {
  items.forEach((item) => {
    const option = document.createElement("option");
    option.value = item.value.toString();
    option.innerText = item.value.toString();
    option.selected = item.selected;
    const selectTag = document.querySelector(selector);
    if (selectTag !== null) selectTag.appendChild(option);
  });
}

addDropdownItem(emails, "#email-dropdown");
addDropdownItem(numberOfProducts, "#product-dropdown");

 

- javascript, html 코드와 결과 

See the Pen Untitled by CJY00N (@cjy921004) on CodePen

 

 

---

정의된 타입으로 타입을 제한하기 

- 아래와 같이 작성하면 lengh에 대해 동작하는 인자만 넘겨받을 수 있음 

interface LengthType {
    length :number;
}

function logTextLength<T extends LengthType>(text:T):T{
    text.length;
    return text;
}

logTextLength("abc");
logTextLength(10); // Error
logTextLength(true); // Error

---

keyof로 타입을 제한하기 

- extends typeof 를 한 객체에 없는 속성 값들은 접근할 수 없게끔 제한할 수 있다. 

interface ShoppinItem {
  name: string;
  price: number;
  stock: number;
}

function getShoppinItemOption<T extends keyof ShoppinItem>(itemOption: T): T {
  console.log(itemOption);
  return itemOption;
}

getShoppinItemOption("name");
getShoppinItemOption("price");
getShoppinItemOption("stock");