TypeScript - TypeScript Generics

꼬디바아 ㅣ 2024. 3. 4. 15:28

728x90

TypeScript 대표이미지

 

728x90

 

🖥️ Generics

TypeScript 에서 Generics는 코드의 유연성을 높이고 타입 안정성을 유지하는 데 사용되는 강력한 도구이다. Generics를 사용하면 함수, 클래스, 인터페이스 등에서 여러 타입을 다룰 수 있으며, 코드의 재사용성을 높일 수 있다.

 

🖥️ Generics의 기본 구문

function 함수이름<T>(매개변수: T): T {
    // 함수 내용
    return 매개변수;
}

 

<T> 는 제네릭 타입 매개변수를 나타낸다. 이 매개변수는 함수 내부에서 사용되는 모든 타입을 대표한다.

 

🖥️ 함수에서의 Generics

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

// 사용 예제
let result = identity<string>("Hello, TypeScript Generics!");
console.log(result); // 출력: Hello, TypeScript Generics!

let numberResult = identity<number>(42);
console.log(numberResult); // 출력: 42

 

🖥️ 클래스에서의 Generics

class Container<T> {
    private value: T;

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

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

// 사용 예제
let stringContainer = new Container<string>("TypeScript Generics");
console.log(stringContainer.getValue()); // 출력: TypeScript Generics

let numberContainer = new Container<number>(42);
console.log(numberContainer.getValue()); // 출력: 42

 

🖥️ 인터페이스에서의 Generics

interface Pair<T, U> {
    first: T;
    second: U;
}

// 사용 예제
let pair1: Pair<string, number> = { first: "one", second: 1 };
let pair2: Pair<number, boolean> = { first: 2, second: true };

 

🖥️ Generic 타입 제한

extends 문법을 쓰면 넣을 수 있는 타입을 제한할 수 있다. 그래서 MyType extends number 라고 쓰면 타입 파라미터에 넣을 수 있는 타입을 제한가능하다. intertface 문법에 쓰는 extends와는 살짝 다른 느낌이다. interface 문법에 extends는 복사인데 generic에 extends는 number와 비슷한 속성을 가지고 있는지 if 문으로 체크하는 문버이라고 보면 된다.

function 함수<MyType extends number>(x: MyType) {
  return x - 1
}

let a = 함수<number>(100

 

728x90

'👨‍💻 TypeScript' 카테고리의 다른 글

TypeScript - TypeScript + Redux  (0) 2024.03.19
TypeScript - React + Typescipt  (0) 2024.03.17
TypeScript - public, private  (0) 2024.03.04
TypeScript - TypeScript never type  (0) 2024.03.04
TypeScript - rest parameter / destructuring  (0) 2024.03.02