타입스크립트 | 제네릭 함수

제네릭 함수에 대해 알아봅니다. 제네릭에 대해서는 아랫글을 참고해 주세요.

타입스크립트 | 제네릭, 타입매개변수, Array

---

제네릭 함수 이해하기

제네릭 함수는 함수가 호출될 때마다 컴파일러에서 지정되거나 유추되는 타입 매개변수를 받습니다.

함수가 타입 매개변수에 의해 지정된 타입의 매개변수를 수락하기를 원하면 위와 같이 제네릭 함수로 만들 수 있습니다. 예에서는 함수 매개변수의 타입을 T로 적어주었습니다. 또한 함수 MyPrint는 해당 타입의 값을 반환하기를 원하므로 함수 반환 타입을 T로 적었습니다. 그리고 함수 내에서 T를 사용하여 새 변수를 선언하거나 타입 지정이 필요한 다른 작업을 수행할 수 있습니다. 위 예제에서는 함수에 전달된 값을 콘솔에 출력한 후 리턴해 주고 있습니다. 리턴 타입 역시 T가 되므로 완벽하게 유효한 제네릭 함수입니다.

다음은 해당 함수를 호출하는 예입니다.

함수를 호출할 때 타입 매개변수에 string을 지정했음을 주목해 주세요. 함수 선언에서 함수 매개변수와 반환 값이 모두 타입 매개변수로 전달되는 타입이 되도록 지정했으며, 함수에 문자열 리터럴 "print hi" 를 전달하고 있습니다.

두 번째 호출 예는 인터페이스로 만든 사용자 지정 타입인 Paper를 타입 매개변수로 지정하여 함수로 전달하고 있습니다.

---

제네릭 함수 연습

유틸 함수를 제네릭으로 만들어 보도록 하겠습니다. 새 함수를 utitlity.ts파일에 아래와 같이 작성하였습니다.

이제 제네릭 함수 Splice2 를 호출하는 코드를 별도 파일에서 작성해 보겠습니다.

다른 파일에서 함수를 사용하려면 먼저 import 목록에 추가해야 합니다.

Paper인터페이스를 만들어 주었고, myPaper변수에 Paper의 배열 타입으로 5개의 Paper를 하드코딩했습니다. Splice2 함수에 타입 매개변수로 Paper를 건네주었고 매개변수로 배열인 Mypaper를 건네주었습니다.

이제 이 특정 함수 호출에 대한 타입 매개변수를 지정했으므로 해당 매개변수 위로 마우스를 가져가면 타입 매개변수에 대해 예상되는 타입의 호출 시그니처를 볼 수 있습니다. Paper를 타입으로 전달하기 때문에 시그니처는 Paper[]를 매개변수로 전달해야하고, Paper[]를 반환한다는 것을 보여줍니다.

 

number를 타입 매개변수로 전달하여 다시 호출하고 있습니다. Splice2함수는 매개변수로 해당 타입의 배열을 예상하므로 4개의 숫자가 있는 하드 코딩된 배열을 전달하고 있습니다. 다시 마우스를 오버해보면 아래와 같이 호출 시그니처가 number로 바뀌는 것을 확인할 수 있습니다.

 

컴파일 후 실행을 해보면 아래와 같이 제네릭 함수가 잘 작동하는 걸 확인할 수 있습니다.

 

---

여기까지 읽어주셔서 감사합니다.