[Typescript] 9장 제네릭

1. 제네릭 

제네릭은 함수, 클래스, 인터페이스를 정의할 때 특정 데이터 타입을 지정하지 않고, 나중에 사용할 데이터 타입을 매개변수로 받아서 사용할 수 있게 해줍니다.

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

const output1 = identity<string>('Hello, Generics!'); // 문자열
const output2 = identity<number>(123); // 숫자
const output3 = identity<boolean>(false); // boolean

console.log(output1); // "Hello, Generics!"
console.log(output2); // 123
console.log(output3); // false

2. 제네릭 타입 변수 작업

제네릭 타입 변수를 사용하여 배열이나 객체와 같은 다양한 구조를 정의할 수 있습니다.

function loggingIdentity<T>(arg: T[]): T[] {
  console.log(arg.length);
  return arg;
}

const result = loggingIdentity<number>([1, 2, 3]); // 숫자 배열
console.log(result); // [1, 2, 3]

3. 제네릭 타입

제네릭 타입을 사용하여 특정 타입의 객체를 정의할 수 있습니다.

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

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

const myIdentity: GenericIdentityFn<number> = identityFn;
console.log(myIdentity(10)); // 10

4. 제네릭 클래스

제네릭 클래스에서도 사용할 수 있습니다.

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;

  constructor(zeroValue: T, add: (x: T, y: T) => T) {
    this.zeroValue = zeroValue;
    this.add = add;
  }
}

const myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y);
console.log(myGenericNumber.add(myGenericNumber.zeroValue, 10)); // 10

5. 제네릭 제약조건

제네릭에 제약조건을 추가해 특정 타입만 사용할 수 있도록 제한할 수 있습니다.

interface Lengthwise {
  length: number;
}

function loggingLength<T extends Lengthwise>(arg: T): T {
  console.log(arg.length); // 길이 출력
  return arg;
}

loggingLength({ length: 10, value: 3 }); // true
// loggingLength(123); // Error

6.제네릭 제약조건에서 타입 매개변수 사용

제약조건에서 다른 타입 매개변수를 사용할 수 있습니다.

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

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

const person: Person = {
  name: 'James',
  age: 30,
};

const PersonName = getProperty(person, 'name'); // "James"
const PersonAge = getProperty(person, 'age'); // 30

console.log(PersonName);
console.log(PersonAge);

7. 제네릭에서 클래스 타입 사용

제네릭을 사용하여 클래스 타입을 지정할 수 있습니다.

class Container<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

const stringContainer = new Container<string>('Hello');
const numberContainer = new Container<number>(123);

console.log(stringContainer.getValue()); // "Hello"
console.log(numberContainer.getValue()); // 123

 

GitHub - Koras02/typescript-bloging

Contribute to Koras02/typescript-bloging development by creating an account on GitHub.

github.com

 

LIST