TS 기초 - 제네릭

시작

• 간단한 CRUD를 위해 화면을 React - Typescript 만들다 보니 Typescript에 대한 공부가 필요하다고 느꼈다. 단순히 변수에 타입을 정해주는 수준이 아닌 Typescript를 편하게 사용하기 위해 기초부터 공부해보려 한다.
  https://typescript-kr.github.io/pages/basic-types.html#%EC%86%8C%EA%B0%9C-introduction
• 상단 사이트를 통해 공부하고 몰랐던 부분을 적어보고 내것으로 만들어보려 한다.

제네릭의 Hello World - identity

function identity(arg: number): number {
    return arg;
}

function identity2(arg: any): any {
    return arg;
}

• 제네릭이 없으면, identity 함수에 특정 타입을 줘야한다.
• any를 쓰면 어떤 타입이든 받을 수 있지만, 실제 return될 때 어떤 타입인지 알 수 없게 된다.

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("myString"); // 출력 타입은 'string'입니다.
let output2 = identity("myString"); //출력 타입은 'string'입니다.

• identity함수에 T라는 타입 변수를 추가하여, 유저가 준 인수의 타입을 감지하고, 이 정보를 나중에 사용할 수 있게 한다.
• 인수와 return타입이 같으므로 any를 사용했을 때 문제되는 것을 방지할 수 있다.

제네릭 타입 변수 작업

• identity 함수에 인자가 배열일 경우

function identity<T>(arg: T[]): T[] {
  console.log(arg.length); // 배열은 .length를 가지고 있습니다. 따라서 오류는 없습니다.
  return arg;
}

function loggingIdentity2<T>(arg: Array<T>): Array<T> {
  console.log(arg.length); // 배열은 .length를 가지고 있습니다. 따라서 오류는 없습니다.
  return arg;
}

제네릭 타입

• 함수 선언

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: <T>(arg: T) => T = identity;

• 제네릭의 타입 매개변수에 다른 이름 사용 가능

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: <U>(arg: U) => U = identity;

• 제네릭 인터페이스

interface GenericIdentityFn {
  <T>(arg: T): T;
}

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: GenericIdentityFn = identity;

제네릭 제약조건

• 함수에 모든 타입이 아닌 length라는 프로퍼티가 있는 경우만 동작하도록 제약조건을 건다.

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // 이제 .length 프로퍼티가 있는 것을 알기 때문에 더 이상 오류가 발생하지 않습니다.
    return arg;
}

loggingIdentity(3);  // 오류, number는 .length 프로퍼티가 없습니다.

loggingIdentity({length: 10, value: 3});

결론

• Typescript 기초 문서를 읽어보고 공부하면서 정리했는데, 자바랑 매우 비슷한 느낌을 받았다. 실무에서도 사용할 기회가 있으면 좋겠다.