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
'Front-End > TypeScript' 카테고리의 다른 글
[Typescript] 11장 고급 타입 Chapter 2 (0) | 2025.03.08 |
---|---|
[Tyepscript] 10장 고급 타입 Chapter 1 (0) | 2025.03.06 |
[Typescript] 8장 열겨형 (0) | 2025.02.23 |
[TypeScript] 7장 클래스 (0) | 2025.02.20 |
[Typescript] 6장 유니언 타입과 교차 타입 (0) | 2025.02.18 |