Typescript 제네릭
10255 단어 typescript
제네릭을 사용하는 가장 기본적인 예는 배열입니다. Typescript를 사용하여 배열을 채울 유형을 정의할 수 있습니다.
const strArr: string[] = ["one", "two", "three"];
strArr.push(1) // This would error
string[]
를 사용하여 함수에서 arg 유형을 정의하는 경우 예상대로 arg가 문자열 배열이 아니면 오류가 발생합니다. 그러나 다른 유형의 배열을 처리할 수 있는 함수가 필요할 수 있는 시나리오가 있습니다. 다음 예를 고려하십시오. getLast
는 배열의 마지막 항목을 반환합니다.const getLast = (arr: string[]): string => {
return arr[arr.index - 1];
}
// 'test2'
console.log(getLast(['test', 'test2']);
// Will error
console.log(getLast([1,2,3]);
여기서 알 수 있듯이 문자열만 포함하도록 전달할 수 있는 배열
getLast
로 제한됩니다. 그러나 모든 유형을 포함하는 배열의 마지막 항목을 반환하려는 것은 완벽하게 합리적일 것입니다. 여기서 값이 아닌 유형에 대해 작동하는 특수 변수인 유형 변수를 사용할 수 있습니다.const getLast = <T>(arr: T[]): T => {
return arr[arr.length - 1];
}
위에서 볼 수 있듯이
getLast
에 전달되는 배열의 유형을 유형 변수T
로 정의할 수 있습니다(참고 - T
는 유형 변수의 일반적인 이름이지만 모든 이름을 사용할 수 있음). Typescript는 반환 유형도 인식합니다. 이것은 위의 것을 일반 함수로 바꿉니다. 다른 유형의 함수를 호출하기 위한 구문은 다음과 같습니다.const numOutput = getLast<number[]>([1,2,3]) // output will be of type 'number'(3)
const strOutput = getLast<string[]>(['a','b','c']) // output will be of type 'string'('c')
제네릭 함수를 생성할 때 하나 이상의 유형 변수를 사용할 수 있습니다.
cont makeArr = <X, Y>(x: X, y: Y): [X, Y] => {
return [x, y];
}
const v = makeArr<number, string>([1,'a']); // returns type ['number', 'string']
// Types can be inferred by Typescript, <number, number> is not necessary.
const v2 = makeArr(2,3) // returns type ['number', 'number']
다른 객체 유형에서 유형 변수를 확장하는 것이 가능합니다.
.length
속성이 있는 유형에서만 작동하는 함수를 만들고 싶다면. 그렇게 하려면 요구 사항을 T
에 대한 제약 조건으로 나열해야 합니다.그렇게 하기 위해 우리는 우리의 제약을 설명하는 인터페이스를 만들 것입니다. 여기에서 단일
.length
속성이 있는 인터페이스를 만든 다음 이 인터페이스와 extends
키워드를 사용하여 제약 조건을 나타냅니다.interface WithLength {
length: number
}
function echo<T extends WithLength>(arg: T): T {
console.log(arg.length); // arg has a .length property, so no error
return arg;
}
인터페이스가 있는 제네릭
제네릭을 사용하여 코드에서 보다 유연한 인터페이스를 생성할 수 있습니다. 구문은 위의 예와 유사합니다. 이것은 HTTP 요청과 같이 객체 모양의 일부만 확신할 수 있는 경우에 유용합니다.
interface HttpResponse<T = any> {
success: boolean
error?: string
data: T
}
type StringResponse = HttpResponse<string>
그런 다음 위의 내용을 함수에서 사용하여 코드 기반에서 반환된 데이터를 더 많이 제어할 수 있습니다.
interface Person {
name: string
age: number
}
const makeRequest = async<T = any>(): Promise<HttpResponse<T>> => {
const response = await // some logic
return response;
}
const data = makeRequest<Person>() // resolves with data as a Person
유용한 기사
Official Typescript docs
Reference
이 문제에 관하여(Typescript 제네릭), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lukebrobbs/typescript-generics-41c6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)