TypeScript 제네릭 익히기: 코드 재사용성 및 유형 안전성 향상

TypeScript는 JavaScript 작성 방식에 혁명을 일으켜 개발 프로세스에 정적 타이핑과 향상된 도구를 제공합니다. 가장 강력한 기능 중 하나는 다양한 유형에서 작동하는 재사용 가능한 구성 요소를 만들 수 있는 제네릭입니다. 이 게시물에서는 TypeScript 제네릭에 대해 자세히 알아보고 코드의 유연성과 유형 안전성을 어떻게 향상시킬 수 있는지 살펴보겠습니다.

제네릭 이해

제네릭은 단일 유형이 아닌 다양한 유형에서 작동할 수 있는 구성요소를 생성하는 방법을 제공합니다. 유형 정보를 희생하지 않고 다양한 데이터 유형을 처리할 수 있는 구성 요소를 생성하려는 경우 특히 유용합니다.

간단한 예부터 시작해 보겠습니다.

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

let output = identity<string>("myString");
console.log(output);  // Output: myString

이 예에서 T는 사용자가 제공하는 유형을 캡처하는 유형 변수입니다. 이를 통해 나중에 해당 유형 정보를 사용할 수 있습니다.

함수의 제네릭

제네릭은 일반적으로 유연하고 재사용 가능한 코드를 생성하는 함수에 사용됩니다. 보다 실용적인 예는 다음과 같습니다.

function firstElement<T>(arr: T[]): T | undefined {
    return arr[0];
}

let numbers = [1, 2, 3, 4, 5];
let strings = ["a", "b", "c"];

console.log(firstElement(numbers));  // Output: 1
console.log(firstElement(strings));  // Output: "a"

이 함수는 모든 유형의 배열에서 작동하며 해당 유형의 첫 번째 요소를 반환하거나 배열이 비어 있으면 정의되지 않은 값을 반환합니다.

인터페이스의 제네릭

유연한 데이터 구조를 생성하기 위해 인터페이스에서 제네릭을 사용할 수도 있습니다.

interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

let pair: KeyValuePair<string, number> = { key: "age", value: 30 };

클래스의 제네릭

클래스에서는 제네릭을 활용하여 재사용 가능한 구성 요소를 만들 수도 있습니다.

class Queue<T> {
    private data: T[] = [];

    push(item: T) {
        this.data.push(item);
    }

    pop(): T | undefined {
        return this.data.shift();
    }
}

let numberQueue = new Queue<number>();
numberQueue.push(10);
numberQueue.push(20);
console.log(numberQueue.pop());  // Output: 10

이 대기열 클래스는 모든 유형의 데이터에 대해 작업할 수 있으므로 사용 전반에 걸쳐 유형 안전성을 제공합니다.

일반 제약조건

때때로 제네릭이 사용할 수 있는 유형을 제한하고 싶을 때가 있습니다. 제약 조건을 사용하여 이를 수행할 수 있습니다.

interface Lengthwise {
    length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
    console.log(arg.length);
}

logLength("Hello");  // Works
logLength([1, 2, 3]);  // Works
logLength(3);  // Error: Number doesn't have a length property

이 예에서는 T를 길이 속성이 있는 유형으로 제한합니다.

결론

제네릭은 코드 재사용 및 유형 안전성을 향상시키는 TypeScript의 강력한 기능입니다. 제네릭을 마스터하면 다양한 유형에서 작동하는 보다 유연하고 강력한 코드를 작성할 수 있습니다. TypeScript를 사용하여 계속 개발하면서 제네릭을 사용하여 코드의 유연성과 유지 관리성을 향상시킬 수 있는 기회를 찾으세요.

제네릭을 마스터하는 열쇠는 연습이라는 점을 기억하세요. 제네릭을 사용하도록 기존 코드 중 일부를 리팩터링해 보면 코드 재사용성 및 유형 안전성 측면에서 곧 이점을 확인할 수 있습니다.

더 많은 Typescript 튜토리얼

위 내용은 TypeScript 제네릭 익히기: 코드 재사용성 및 유형 안전성 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!