이번 시간에는 TypeScript의인터페이스 문법에서 제네릭을 사용하는 방법에 대해 정리하겠습니다
인터페이스에서 제네릭 선언
//TypeScript
interface MyData<T>{ //제네릭 타입 별칭(제네릭 타입 매개변수)을 지정하고 <T>
name: string
value: T // value는 제네릭 타입 매개변수에 할당된 타입으로 지정하겠다는 말
}
✅
1. 인터페이스에서 제네릭 타입(제네릭 타입 별칭) 별칭을 지정합니다. <T>
2. value 속성은 제네릭 타입 변수에 할당된 타입으로 지정하도록 선언 하였습니다
인터페이스에서 제네릭 사용
//TypeScript
//인터페이스에서 제네릭 선언
interface MyData<T>{ //제네릭 타입 별칭(제네릭 타입 매개변수)을 지정하고 <T>
name: string
value: T // value는 제네릭 타입 매개변수에 할당된 타입으로 지정하겠다는 말
}
//인터페이스에서 제네릭 사용
const dataA: MyData<string> = { // 인터페이스로 MyData를 이용하고 제네릭 타입 변수는 string 타입을 사용하겠다고 함
name: 'Data A',
value: 'Hello world!'
}
const dataB: MyData<number> = { // 인터페이스로 MyData를 이용하고 제네릭 타입 변수는number타입을 사용하겠다고 함
name: 'Data B',
value: 1234
}
const dataC: MyData<boolean> = { // 인터페이스로 MyData를 이용하고 제네릭 타입 변수는boolean타입을 사용하겠다고 함
name: 'Data C',
value: false
}
const dataD: MyData<number[]> = { // 인터페이스로 MyData를 이용하고 제네릭 타입 변수는number 배열 타입을 사용하겠다고 함
name: 'Data D',
value: [1,2,3,4]
}
✅
1. dataA가 MyData 인터페이스를 통해서 타입을 지정해 줍니다.
2. 이 때 <string>을 이용해 string 형식의 타입을 제네릭 타입 변수로 지정하겠다 선언하였습니다.
3. 이에 dataA의 value 타입은 string을 사용하도록 지정하였습니다
4. dataB, dataC, dataD 또한 각각의 제네릭 타입변수를 지정하여 객체의 속성을 초기화 하였습니다.
