TypeScript 공부3

김민석·2025년 8월 21일

함수 타입 정의

어떤 타입의 매개변수를 받아 어떤 값을 반환하는지 알려주는 것이 좋은 함수 설명?!

매개변수

매개변수 또한 선택적 매개변수가 가능하며 매개변수에 ?(옵셔널체이닝)을 붙이면 함수를 호출할 때 매개변수를 넣지 않아도 함수를 호출할 수 있다. 하지만 옵셔널체이닝을 붙이면 값이 type 혹은 undefined이기 떄문에
함수 안에서 해당 타입에 대하여 연산 및 메서드를 사용할 떄 타입좁히기 및 타입 가드를 이용하여 타입을 보장한 다음 사용이 가능하다!!
또한 선택적 매개변수는 필수 매개변수 보다 뒤로 가야함. 아니면 에러 발생

함수 타입 표현식

type Operation = (a:number,b:number) => number;
const add:Operation = (a,b) => a + b;
const sub:Operation = (a,b) => a - b;

호출 시그니처

type Operation = {
	(a:number,b:number) => number;
	name :string;
}

함수 타입의 호환성

특정 함수 타입을 다른 함수 타입으로 취급해도 괜찮은가를 판단

1.반환값의 타입이 호환되는가
=> 타입이 다운캐스팅 되면 호환이 안됨.
2.매개변수의 타입이 호환되는가

매개변수의 개수가 같을 떄
- 매개변수가 업캐스팅 일때는 안됨.
- 매개변수가 서브 타입인 경우 프로퍼티가 더 많아서 만약 슈퍼 타입 함수를 서브 타입 함수로 변경한다면 슈퍼타입 함수가 서브 타입의 프로퍼티를 가지지 않기 때문
매개변수의 개수가 다를 때
+ 매개변수가 다른 타입을 넣을 떄 적은 매개변수의 타입에 많은 매개변수 타입을 넣으면 안됨. 위에 같을 떄와 같은 느낌의 형식

함수 오버로딩

타입스크립트에서 함수 오버로딩은 동일한 이름을 가진 함수가 다양한 매개변수 타입이나 개수에 따라 다른 동작을 할 수 있도록 하는 기능입니다. 이를 통해 함수 호출 시 다양한 타입의 인자를 전달할 수 있으며, 각기 다른 타입에 대해 다른 처리를 할 수 있습니다. 함수 오버로드는 코드의 가독성과 유지 보수성을 향상시키는데 도움을 줍니다.

함수 오버로드를 구현하기 위해서는 먼저 함수의 선언부를 여러 번 작성해야 합니다. 이들은 오버로드 시그니처(overload signature)라고 불리며, 구현부(implementation)는 포함하지 않습니다. 오버로드 시그니처 다음에 구현부를 포함한 함수 선언이 이루어져야 합니다. 구현부는 오버로드된 모든 시그니처를 충족시킬 수 있어야 하며, 이를 통해 실제 함수의 동작이 정의됩니다.

예제

function add(a: number, b: number): number; // 오버로드 시그니처 1
function add(a: string, b: string): string; // 오버로드 시그니처 2
function add(a: any, b: any): any { // 구현부
  return a + b;
}

const result1 = add(1, 2); // result1의 타입은 number
const result2 = add("Hello, ", "world!"); // result2의 타입은 string

위 예제에서 add 함수는 두 개의 오버로드 시그니처를 가집니다. 첫 번째는 두 개의 number 타입 매개변수를 받고 number를 반환하며, 두 번째는 두 개의 string 타입 매개변수를 받고 string을 반환합니다. 구현부에서는 매개변수의 타입에 관계없이 두 매개변수를 더하는 간단한 연산을 수행합니다. 하지만 실제로 함수를 호출할 때는 오버로드 시그니처에 따라 타입 체크가 이루어지며, 반환 타입도 해당 시그니처에 따라 결정됩니다.

주의사항

구현부는 오버로드 시그니처보다 더 일반적인 타입을 가지는 것이 일반적입니다. 구현부는 오버로드된 모든 시그니처를 처리할 수 있어야 하기 때문입니다.
오버로드 시그니처는 구현부보다 위에 선언되어야 합니다.
함수 오버로드를 사용할 때는 세심한 주의가 필요합니다. 오버로드된 함수의 구현부에서 모든 가능한 매개변수 타입 조합을 올바르게 처리할 수 있도록 해야 합니다.
타입스크립트의 함수 오버로드는 타입 안전성을 제공하면서도 유연한 함수 설계를 가능하게 해줍니다. 이를 통해 개발자는 사용자에게 더 명확한 API를 제공할 수 있습니다.

커스텀 타입가드

타입스크립트에서 커스텀 타입 가드란, 특정 조건을 검사해 타입스크립트가 변수의 타입을 더 좁게 추론할 수 있도록 돕는 함수를 말합니다.
일반적으로 as 단언을 사용하면 타입스크립트는 단순히 "개발자가 강제로 지정한 타입"으로만 인식할 뿐, 이후 코드에서 자동으로 타입을 좁혀주지 않습니다. 따라서 if문이나 조건문 안에서도 여전히 유니언 타입 전체로 남게 됩니다
이를 해결하기 위해 함수의 반환 타입을 타입 술어 형태로 지정해야 합니다.

타입 술어 문법

: animal is Dog
타입 추론까지 제공하는 역할

정리

as 단언은 단순히 강제 형변환일 뿐, 타입을 좁혀주지 않는다.
animal is Dog 같은 타입 술어를 사용해야 조건문 안에서 자동으로 Dog 타입으로 추론된다.
커스텀 타입 가드는 유니언 타입에서 분기 처리를 할 때 매우 유용하다.

타입을 좁힐 떄 isDog라는 함수를 만들어 animal.isBark 이라는 dog 타입만 가지고 있는 함수를 사용하면 옵셔널 체이닝을 사용 하거나 오류가 뜨게 되는데 이때 그냥 animal as dog로 타입단언을 한 후 return을 하면 타입스크립트 에서 dog 타입을 반환을 안함. 그래서 함수에 : animal : is Dog 를 해주면 dog 타입을 반환하게됨.