1) Class & Generics

TypeScript에서의 Class문법에 대해 알아볼 페이지입니다.

1. Class

자바스크립트의 클래스 기능(ES6)을 확장하여 정적 타입 검사, 접근제한자, 인터페이스 구현 및 추상클래스 기능등 객체지향 프로그래밍과 관련된 다양한 기능을 제공합니다.

class User {
  // 필드
  name: string;
  private age: number;
  
  // 생성자
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

1) 접근제한자

접근제한자

public - 어디서든 접근가능(default)

private - 클래스내부에서 접근가능

protected - 클래스내부에서 혹은 상속클래스의 내부 에서 접근가능.

2) 생성자 파라미터 속성 문법

• 클래스 작성시의 보일러 플레이트를 줄여주는 문법

• 생성자의 파라미터에 접근제한자 및 readonly예약어를 붙이면 필드 선언과 초기화 과정을 동시에 수행할 수 있다.

2. Generic

Generic은 Type을 변수처럼 외부에서 주입받아 사용하는 방식으로 Java의 Generic과 유사합니다. 변수에 값을 대입하듯 Generic에 Type값을 대입하여 사용하므로 Generic은 Type변수라고불립니다.

function returnGeneric<T>(value: T): T {
  return value;
}

const result = returnGeneric<string>("hello"); //T에는 string이 대입

1) Generic의 extends

TypeScript에서는 extends를 활용하여 상한경계설정이 가능합니다.(super는 미지원)

• 상한경계설정

  • <T extends Type>

  • T혹은 Animal을 상속받은 하위타입만 대입가능

  • Animal이 대입 가능한 최상위 타입이 된다.

function func<T extends Animal>() {
  // T는 Animal을 상속받았거나 하위 타입이어야 함
}

2) Generic의 기본 타입

TypeScript의 Generic에는 기본타입을 지정할 수 있다. 사용자가 제네릭을 직접 지정하지 않거나 타입추론에 활용될 인자를 넘기지 않는 경우 타입변수에는 기본값이 대입된다.

function wrap<T = string>(value: T): T[] {
  return [value];
}

3) keyOf 연산자와 Generic

Object Type의 속성 이름들을 UnionType으로 추출하는 연산자

type Person = {
    name : string,
    age : number,
    location : string
};

type KeysOfPerson = keyof Person; // "name"|"age"|"location"'

3. Utility Types

TypeScript에는 기존 타입들을 변형하거나 조작할 수 있도록 도와주는 다양한 도구들이 존재합니다. Utility Types들을 활용하여 반복적인 타입 정의를 줄이면서 더욱 유연한 방식으로 타입들을 구성을 할수 있습니다.

Documentation - Utility Typestypescriptlang

• 모든 타입을 다 알아보기에는 양이 많으므로 React와 연관되어 자주 사용되는 몇 가지 Utility Type들을 알아보겠습니다.

1) Partial<T>

• 객체 타입의 모든 속성을 optional 속성으로 바꿔줄 때 사용하는 유틸리티 타입입니다.

• 비슷한 Utility Types

  • Required<T> : 모든 속성을 required속성으로 만들어주는 Type

  • Readonly<T> : 모든 속성을 readonly속성으로 만들어주는 Type

interface User {
  id: number;
  name: string;
  email: string;
}
const partial: Partial<User> = {name:'mkm'}; // email, id가 없어도 문제 없음.

2) Pick<T,K>

• 객체의 속성 중 일부만 선택(Pick)하여 새로운 타입을 만들 때 사용합니다

// User에서 name과 email만 사용
type SimpleUser = Pick<User, "name" | "email">;// {name:string, email:string}

3) Omit<T,K>

• 객체 타입에서 특정 속성을 제외하고 나머지만 남긴 새 타입을 만듭니다.

// id를 제외한 사용자 정보
type NewUser = Omit<User, "id">; // {name:string, email:string}

4) Record<K,T>

• 키(K) 집합을 기준으로 값 타입(T) 을 지정하는 객체 타입을 만듭니다.

• 지정된 키들로 구성된 객체를 만들고 싶을 때 사용합니다.

type ScoreMap = Record<string, number>;
const scores: ScoreMap = {
  math: 90,
  science: 85,
  english: 92,
};

5) ReturnType<T>

• 함수 타입 T가 반환하는 결과의 타입을 가져옵니다.

• 함수의 반환 타입을 다시 선언하지 않고 재사용하기 위해 사용합니다.

function getUser() {
  return { id: 1, name: "mkm" };
}

type UserData = ReturnType<typeof getUser>; // { id: number, name: string }

6) Parameters<T>

• 함수 타입 T의 매개변수 타입을 배열로 추출합니다.

function greet(name: string, age: number) : void {

}
type GreetParams = Parameters<typeof greet>; // [string, number]

• 나머지 유틸리티 타입들은 사이트를 참고하세요.