TypeScript 제네릭: 전체 가이드

TL;DR: TypeScript Generics를 사용하면 개발자는 유형 안전성을 유지하면서 다양한 데이터 유형으로 작업할 수 있는 재사용 가능한 코드를 작성할 수 있습니다. 강력하고 확장 가능한 TypeScript 앱을 구축하는 데 필수적입니다.

코드가 투명하고 관리 가능하도록 하기 위해 Typescript는 여러 종류의 데이터를 안전하고 효과적으로 관리해야 합니다. Typescript의 핵심 기능 중 하나는 엄격한 유형 제한을 준수하면서 함수, 클래스 및 인터페이스 생성을 허용하는 Typescript 제네릭입니다. 제네릭을 사용하면 코드 작성과 실수를 줄일 수 있으며, 가장 중요한 것은 다양한 데이터 유형에 맞는 유연한 구성 요소를 구축할 수 있다는 것입니다.

이 기사에서는 함수, 클래스, 인터페이스에서의 사용법을 포함하여 TypeScript 제네릭의 필수 사항을 살펴보고 이러한 제네릭이 코드를 다양하고 강력하게 만드는 방법을 보여줍니다.

Typescript 제네릭이란 무엇입니까?

Typescript 제네릭은 자리 표시자 유형으로 Typescript 코드를 정의할 수 있으므로 유형 안전성을 유지하면서 유연성, 확장성, 재사용이 가능합니다.

Typescript는 일반 유형을 정의하는 자리 표시자로 컴파일 시간 동안 유형 안전성 검사를 수행합니다. 구성 요소가 구현되면 실제 유형이 자리 표시자를 대체합니다. 이 기술을 사용하면 각 데이터 유형에 대해 별도의 구현이 필요하지 않으므로 이중성을 더 쉽게 관리하고 줄일 수 있습니다.

제네릭이 없으면 다양한 버전의 함수나 클래스를 작성하여 다양한 데이터 유형을 처리하므로 코드 중복이 발생합니다. 제네릭을 사용하면 정적 유형 검사를 유지하면서 다양한 종류에 재사용할 수 있는 단일 구현이 가능합니다.

다음 섹션의 코드 예제는 이러한 차이점을 이해하는 데 도움이 됩니다.

Typescript 제네릭을 언제 사용해야 합니까?

제네릭은 TypeScript의 다양한 부분에서 사용되어 유형을 보다 효율적으로 관리할 수 있습니다. 유연성이 중요한 기능, 인터페이스, 클래스 및 기타 구조에서 중요한 역할을 합니다.

1. 함수의 일반 유형

중복성을 줄이기 위해 함수에 일반 사항이 적용되는 경우가 많습니다. 예를 들어, 문자열이나 숫자를 매개변수로 취하는 함수를 생각해 보세요.

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

이 기능은 잘 작동합니다. 그러나 이는 모든 유형을 사용하므로 Typescript가 특정 유형을 추적하지 못한다는 의미입니다. 결과적으로 반환 값은 any로 입력되며 Typescript는 더 이상 유형 안전성을 적용할 수 없습니다. 유형 안전성을 유지해야 한다면 하나는 문자열을 반환하고 다른 하나는 숫자를 반환하는 두 가지 다른 함수를 작성해야 합니다. 그러나 이러한 접근 방식은 코드 중복을 증가시킵니다.

유형 정보를 보존하기 위해 제네릭을 사용하면 위 기능을 개선할 수 있습니다.

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

T는 이 경우 메소드가 사용하는 유형을 나타냅니다. 있는 경우 Typescript는 입력 유형과 반환 매개변수의 유형이 동일한지 확인합니다.

또한 매개변수 유형을 명시적으로 정의하지 않고도 함수를 정의할 수 있습니다.

function identity<T>(value: Type): T {
  return value;
}
const result1 = identity<number>(42); // result1: number
const result2 = identity<string>("hello"); // result2: string

Typescript에서는 단일 함수 또는 구성 요소에서 여러 유형으로 작업할 때 두 개 이상의 일반 유형 매개변수를 사용할 수 있습니다. 예를 들어, 서로 다른 두 가지 유형의 입력을 받아 쌍으로 반환하는 함수가 필요할 수 있습니다.

const result3 = identity(100); // result3: number
const result4 = identity("world"); // result4: string

이 경우 함수는 T 유형의 첫 번째 요소와 U 유형의 두 번째 요소가 있는 튜플을 반환합니다. 이를 통해 함수를 통해 서로 다른 두 유형을 유형에 맞게 처리할 수 있습니다.

2. TypeScript의 기본 유형

Typescript에서는 제네릭에 대한 기본 유형을 제공하여 선택적으로 만들 수 있습니다. 유형이 제공되지 않으면 Typescript는 기본값을 사용합니다.

function multipleParams<T, U>(first: T, second: U): [T, U] {
 return [first, second];
}
const result1 = multipleParams<string, number>("hello", 42); // result1: [string, number]
const result2 = multipleParams<string, number>("hello", "world"); // result2: gives a type error

이 예에서 유형 매개변수 T의 기본값은 문자열입니다. 개발자가 함수를 호출할 때 특정 유형을 지정하지 않으면 T는 기본적으로 문자열이 됩니다.

3. 일반 인터페이스

Typescript 제네릭도 인터페이스에 적용할 수 있습니다. 모든 유형 값을 사용하여 Box
인터페이스를 정의한다고 가정해 보세요.

function createArray<T = string>(length: number, value: T): T[] {
 return Array(length).fill(value);
}

const stringArray = createArray(3, "hello"); // T defaults to string, so stringArray is a string array
const numberArray = createArray<number>(3, 42); // T is explicitly set to a number, so numberArray is a number array

이것은 일반 함수 예제와 더 동일합니다. 이 코드는 특정 유형을 정의하지 않았으므로 문제 없이 작동할 것입니다. 하지만 값이 any로 입력되어 있으므로 유형 관련 버그가 발생할 수 있습니다.

유형을 보호하기 위해 여기에서 일반 인터페이스를 정의할 수 있습니다.

interface Box {
  value: any;
}
const numberBox: Box = { value: 123 }; // correct
const stringBox: Box = { value: "hello" }; // correct

인터페이스는 일반적이며 해당 값 유형은 Type 변수로 엄격하게 제한됩니다. Typescript가 적절한 유형을 준수하도록 보장하기 위해 인스턴스를 생성하는 동안 Type 변수를 숫자나 문자열로 지정할 수 있습니다.

4. 일반 클래스

유형 안전성을 유지하면서 다양한 유형을 처리하기 위해 제네릭을 사용하여 클래스를 작성할 수도 있습니다. 모든 유형의 값을 저장하고 검색할 수 있는 Storage
클래스를 만들어 보겠습니다.

interface Box<Type> {
  value: Type;
}
const numberBox: Box<number> = { value: 123 }; // number
const stringBox: Box<string> = { value: "hello" }; // string
const stringBox2: Box<string> = { value: 123 }; // incorrect

이 클래스는 작동하지만 데이터 유형이 any이므로 getItem 메서드는 유형 안전성을 제거하여 any를 반환합니다. 따라서 유형 안전성을 향상시키기 위해 제네릭을 사용하여 클래스를 다시 작성할 수 있습니다.

class Storage {
  private data: any;
  setItem(item: any): void {
    this.data = item;
  }
  getItem(): any {
    return this.data;
  }
}
const storage = new Storage();
storage.setItem(123);
const item = storage.getItem();

이 경우 T 유형은 Storage 클래스에서 사용됩니다. Typescript는 인스턴스를 생성할 때 데이터 유형을 정의할 때 데이터가 올바른지 확인합니다. 이 코드 예제의 getItem 메소드는 숫자를 생성합니다.

5. 일반 제약조건

제네릭 제약 조건을 사용하여 제네릭이 허용할 수 있는 유형을 제한하여 특정 속성을 갖도록 할 수 있습니다.

예를 들어 입력의 length 속성에 액세스해야 하는 함수가 있는 경우 제약 조건을 사용하여 length 속성이 있는 유형만 허용되도록 할 수 있습니다. . 이렇게 하면 Typescript에서 오류가 발생하거나 호환되지 않는 유형이 빠져나가는 것을 방지할 수 있습니다.

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

여기서 T 값은 length 속성으로 정의되지 않습니다. 문제를 무시하려면 T에 length 속성이 있어야 함을 지정하는 제약 조건을 추가할 수 있습니다. T 확장 { 길이: 숫자 }라고 말하여 이를 수행합니다.

function identity<T>(value: Type): T {
  return value;
}
const result1 = identity<number>(42); // result1: number
const result2 = identity<string>("hello"); // result2: string

이제 이 함수는 length 속성을 ​​갖게 됩니다. 오류가 발생하지 않으며 입력 길이만큼 실행됩니다.

결론

Typescript 제네릭을 사용하면 유연하고 재활용 가능하며 유형이 안전한 코드를 작성할 수 있습니다. 이러한 제네릭이 포함된 클래스, 메서드 및 인터페이스를 사용하면 코드를 반복하지 않고도 다양한 데이터 유형을 관리할 수 있습니다. 일반 제약 조건, 다양한 유형 및 기본 유형은 이 게시물에서 살펴본 주요 사용 사례 중 일부이며 각 유형이 프로그램의 확장성과 유지 관리성을 어떻게 향상시킬 수 있는지 보여주었습니다.

Typescript 제네릭을 이해하면 더 정확하고 적응 가능하며 유형이 안전한 코드를 작성하는 데 도움이 되어 Typescript 애플리케이션을 더욱 강력하게 만들 수 있습니다.

관련 블로그

• Webpack vs Vite: 어떤 번들러가 귀하에게 적합합니까?
• 싱글 스파로 마이크로 프런트엔드 구축: 가이드
• RxJS로 비동기 JavaScript 마스터하기
• Axios와 Fetch API? 올바른 HTTP 클라이언트 선택

위 내용은 TypeScript 제네릭: 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!