✓ 제네릭 ( Generic )

• C# 및 Java 와 같은 언어에서 사용되는 문법
• 대규모 소프트웨어를 구축할 수 있는 가장 유연한 기능 제공
• <T> 와 같은 괄호 사용

/**
 * 제네릭
 */
function getInfo(msg: any) {
  return msg
}

console.log(getInfo('Word'))
console.log(getInfo(123))
console.log(getInfo([1, 2]))
console.log(getInfo(['C', 'T']))

✓ 제네릭 사용하기

위의 예시를 Generic 을 사용해서 다시 작성해보자.

// function 함수명<타입_변수_지정>(msg: 타입_인자): 타입_반환 {
//   return msg
// }

function getInfo<T>(msg: T): T {
  return msg
}

console.log(getInfo<string>('Word'))
console.log(getInfo<number>(123))
console.log(getInfo<number[]>([1, 2]))
console.log(getInfo<string[]>(['C', 'T']))

제네릭을 사용하지 않았다면 다음관 같이 Union 타입으로 지정해주어야 했을 것이다.

function getInfUnion(msg: string | number | string[] | number[]): string | number | string[] | number[] {
  return msg
}

console.log(getInfo('Word'))
console.log(getInfo(123))
console.log(getInfo([1, 2]))
console.log(getInfo(['C', 'T']))

혹은 any 를 사용해야 했을 것이다. 하지만 이 방법은 TypeScript를 사용하지 않는 것과 같다.

function getInfoAny(msg: any): any {
  return msg
}

console.log(getInfo('Word'))
console.log(getInfo(123))
console.log(getInfo([1, 2]))
console.log(getInfo(['C', 'T']))

✓ 함수에서의 제네릭

// --- function --- //
// function 함수명<타입 변수 지정>(msg: 타입 인자): 타입 반환 {
function getInfo<T>(msg: T): T {
  return msg
}


// --- type alias --- //
type TypeGetInfoFn = <T>(msg: T) => T


// --- interface --- //
interface InterfaceGetInfoFn {
  <T>(msg: T): T;
}


// + 호환 가능
const TypeAliases:TypeGetInfoFn = getInfo
const TypeIntercae:InterfaceGetInfoFn = getInfo
// + inliine 으로도 충분히 호환 가능
const TypeAliases:TypeGetInfoFn = function getInfo<T>(msg: T): T {
  return msg
}
const TypeIntercae:InterfaceGetInfoFn = function getInfo<T>(msg: T): T {
  return msg
}


// 여러 개 받을 수 있음
function getInfoMultiple<T1, T2>(msg: [T1, T2]): [T1, T2] {
  return msg
}

getInfoMultiple<string, number>(['Str', 123])

✓ 클래스에서의 제네릭

class Animal<T, U> {
  name: T
  genderType: U

  constructor(name: T, genderType: U) {
    this.name = name
    this.genderType = genderType
  }
}

type GenderType = 'M' | 'F'
const dog = new Animal<string, GenderType>('강아지', 'M')
const cat = new Animal<GenderType, string>('F', '고양이')

✓ 제네릭 타입 좁히기

/**
 * 제네릭 타입 좁히기 (extends)
 */
function printMessage<T extends string | number>(msg: T) {
  return msg
}

printMessage('Hello')
printMessage(123)
// Error!
// printMessage<string[]>(['H', 'E', 'L', 'L', 'O'])


function printArr<T extends string[] | number[]>(msg: T) {
  return msg.toString()
}

printArr(['H', 'E', 'L', 'L', 'O'])
printArr([1, 2, 3, 4])
// Error!
// printArr<boolean[]>([true, false])