[Typescript] 제네릭 (Generic)

제네릭

 

- 제네릭은 재사용성이 높은 컴포넌트를 만들 때 활용된다. 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다.

- 그때그때 다른 타입의 데이터를 넣어주고 싶다면 제네릭 문법을 이용해 유연하게 사용할 수 있다.

 

제네릭 - 함수에서의 활용

interface Obj {
  x: number
}
type Arr = [number, number]

// 함수를 사용해야할 때마다 오버로딩을 해주는 것은 번거롭다. 이를 generic으로 해결할 수 있다.
// 처음 들어오는 값을 보고 타입을 추론한다.
function toArray<T>(a: T, b: T) {
  return [a,b]
}

// 명시적인 방법보다 typescript가 추론할 수 있는 상황을 만들어주는 것이 좋다.
console.log(
  toArray<string>('cristiano', 'ronaldo'),
  // 명시적으로 지정 가능
  toArray(1,2),
  toArray(true, false),
  toArray({x:1}, {x:2}),
  toArray<Arr>([1,2],[3,4]), // <Arr>이 없다면 number[]로만 인식, 개수가 달라져도 오류 발생 X
)

 

제네릭 - 클래스에서의 활용

class Userr<P> {

  constructor(public payload: P) {
    
  }
  getPayload() {
    return this.payload;
  }
}

interface UserAType {
  name: string
  age:number
  isValid: boolean
}
interface UserBType {
  name: string
  age:number
  emails: string[]
}
const dmddo = new Userr<UserAType>({
  name: "cristiano",
  age: 28,
  isValid: true
})
const siuuuu = new Userr<UserBType>({
  name:'ronaldo',
  age: 28,
  emails: ['realmadrid@gmail.com']
})

 

제네릭 - 인터페이스에서의 활용

interface MyData<T> {
  name: string
  value: T
}
const dataA : MyData<string> = {
  name: 'muchas gracias',
  value: 'hello world'
}
const dataB : MyData<number> = {
  name: 'aficion',
  value: 7
}
const dataC : MyData<boolean> = {
  name: 'esta para',
  value: true
}
const dataD : MyData<string[]> = {
  name: 'vosotros',
  value: ['s','i','u','u','u','u','u']
}

 

제네릭 - 제약조건(constraints)

 

- 함수, 클래스, 인터페이스에서 generic 문법을 사용할 수 있다. 이때 extend 키워드를 이용해서 제약조건을 줄 수 있다.

interface MyData<T extends string | number> {
  name: string
  value: T
}
const dataA : MyData<string> = {
  name: 'muchas gracias',
  value: 'hello world'
}
const dataB : MyData<number> = {
  name: 'aficion',
  value: 7
}
const dataC : MyData<boolean> = {
  name: 'esta para',
  value: true
} // 타입 에러 발생, T는 string 또는 number 타입만 허용하기 때문이다.
const dataD : MyData<string[]> = {
  name: 'vosotros',
  value: ['s','i','u','u','u','u','u']
} // 타입 에러 발생, T는 string 또는 number 타입만 허용하기 때문이다.