TypeScript 제네릭 101

TypeScript를 처음 접하고 제네릭이 하는 일을 머리로 이해하고 계십니까? 이 짧은 기사는 당신을 위한 것입니다.

제네릭?

제네릭은 단순히 해당 데이터 유형에 대한 정보를 잃지 않고 다양한 데이터 유형과 함께 작동하는 코드 구성 요소를 빌드하는 방법입니다. 이러한 구성 요소는 재사용이 가능합니다. 모든 데이터 유형의 입력을 받아 필요한 출력을 생성할 수 있습니다. 이렇게 하면 구성 요소가 유연해집니다.

제네릭 없이

다음은 주어진 것을 반향하는 TypeScript 함수입니다. 제네릭 메서드를 적용하지 않으면 인수의 유형을 지정하거나 any 유형을 사용해야 합니다.

// Specific type
function echo(arg: number): number {
    return arg
}

// Using the 'any' type
function echo(arg: any): any {
    return arg
}

특정 유형을 사용하면 해당 유형에 대한 정보만 보유합니다. 'any' 유형을 사용하는 것은 일반적으로 보이지만 전달된 데이터 유형에 대한 정보를 잃게 됩니다. 유형이 'any'인 문자열을 전달하면 Typescript는 반환된 유형을 'any'로 변환합니다. 문자열이 아닙니다.

일반적인 방법

일반적인 방법은 유형에도 불구하고 인수를 캡처하고 반환되는 항목을 나타내는 것입니다. 'Type' 변수가 그렇게 합니다. 값이 아닌 데이터 유형에 대한 특수 변수입니다.

// Using the 'Type' variable
function echo<Type>(arg: Type): Type {
    return arg;
}

'Type' 변수는 유형의 범위를 캡처하고 나중에 사용할 정보를 보유하므로 'echo' 함수를 일반화합니다.

일반 함수 호출

일반 함수는 두 가지 방법으로 호출할 수 있습니다. 첫 번째는 'Type' 변수 인수와 함수를 전달하는 것입니다. 이렇게 하면 명시적으로 '유형'을 문자열로 설정할 수 있습니다.

let output = echo<string>("Romeo");

두 번째 방법은 함수를 호출하고 인수만 전달하는 것입니다. Typescript는 유형을 자동으로 유추합니다.

let output = echo("Romeo");

Always use the first way when working on complex code because TypeScript may fail to infer the proper type.

끝

이제 TypeScript Generics의 101가지를 알게 되었습니다. 건배!