[TypeScript] Generic과 Utility Type

1. Generic

function printStrings(arr: string[]): void {

    for (let i = 0; i < arr.length; i++) {

        console.log(arr[i]);

    }

}

function printNumbers(arr: number[]): void {

    for (let i = 0; i < arr.length; i++) {

        console.log(arr[i]);

    }

}

 

위 함수들은 기능이 비슷하지만, 각각 String 타입과 number 타입의 배열을 처리할 수 있는 함수이다.

위와 같은 코드가 많아졌을 때 하나의 함수로 만들 수는 없을까? 

-> 이러한 상황에서 Generic을 사용할 수 있다.

Generic은 타입을 변수처럼 사용하는 것이다. 

 

function printAnything<T>(arr: T[]): void {

    for (let i = 0; i < arr.length; i++) {

        console.log(arr[i]);

    }

}

printAnything(['a', 'b', 'c']); // <string>을 써주지 않아도 타입 추론이 가능

printAnything([1, 2, 3]); // <number>를 써주지 않아도 타입 추론이 가능

위 처럼 함수를 선언하게 되면 'a','b','c' 문자열 배열을 인자로 호출한 printAnything은 문자열 타입으로 추론되고, 

숫자 배열을 인자로 호출한 함수는 숫자 타입으로 추론되어진다.

 

 

 뭐 물론 안전한 코딩을 위하여 , Protected한 환경에서의 작업을 위하여 아래와 같이 타입 선언을 해주는 것이 좋다. 

printAnything<string>(['a', 'b', 'c']); // <string>을 써주지 않아도 타입 추론이 가능

printAnything<number>([1, 2, 3]); // <number>를 써주지 않아도 타입 추론이 가능

 

 

2. Utility Type

타입 스크립트에서 타입의 변환을 코드 상에서 편하게 하기 위해서 타입스크립트에서 지원하는 문법

pick, omit, exclude, partial, readonly, record, extract, ReturnType, Parameters, Awaited 같은 문법이 존재한다.

 

Utility type을 응용해보자. 앞서 말했듯이 Utility Type은 타입의 변환을 코드 상에서 편하게 하기 위햐서 타입스크립트에서 지원하는 문법이다. 내가 여태 배웠던 자바나, C# 등 기타 객체지향이나, 절차 지향 언어 특유에 있었던 것과는 별개로

아예 새로운 개념인 듯 하여 약간의 이해하는데 어려움이 있다. 

 

대체로 많이 쓰이는 것들은 Pick, Omit ,Partial, ReadOnly 정도 등이 있는 듯 하다.

// 기초가 되는 아래와 같은 타입이 있다고 할 때

type Pokemon = {

    pokemonNumber : number;

    name : string;

    isBoy : boolean;

}

// 앞서 배운 Utility 타입을 통해서 각각 기능에 맞는 타입을 만들 수가 있다.

// 많이 쓰이는 Pick, Omit ,Partial, ReadOnly

// Pick : 특정 프로퍼티 집합을 선택해 타입을 구성 가능

interface Todo {

    title: string;

    description: string;

    completed: boolean;

}

type TodoPreview = Pick<Todo, 'title' | 'completed'>;

const todo: TodoPreview = {

    title: 'Clean room',

    completed: false,

};

// Omit : 모든 프로퍼티에서 해당하는 일부 프로퍼티를 제거한 타입으로 구성 - Pick과 비슷하면서도 또 조금 다름

interface Todo {

    title: string;

    description: string;

    completed: boolean;

}

type TodoPreview = Omit<Todo, 'description'>;

const todo: TodoPreview = {

    title: 'Clean room',

    completed: false,

};

// Partial

interface User {

    id: number;

    name: string;

    email: string;

  }

 

  const updateUser = (id: number, userUpdates: Partial<User>) => {

    // 업데이트 로직이 들어갈 때 필요한 로직만 전달할 떄 많이 사용

  }

// ReadOnly

interface Todo {

    title: string;

}

const todo: Readonly<Todo> = {

    title: 'Delete inactive users',

};

todo.title = 'Hello'; // 오류: 읽기 전용 프로퍼티에 재할당할 수 없음

type pokemonNum = Pick<Pokemon,'pokemonNumber'>