최종 수정 : 2024-05-28
함수 타입 정의
함수를 설명하는 가장 좋은 방법이다.
어떤 매개변수를 받고, 어떤 결과값을 반환하는지 정의할 수 있다.
화살표 함수의 타입을 정의하는 방법
const add = (a: number, b: number) => a + b;
함수의 매개변수
옵셔널 파라미터(optional parameter)
매개변수의 맨 뒤에 작성하며 선택적으로 사용을 허용한다.그러나 지정한 타입과 undefined가 유니언 타입으로 타입이 설정되므로 타입가드를 통해 구분해줄 필요가 있다.
function introduce(name = 'yeongtaek', age: number, tall?: number) {
console.log(`name : ${name}`);
if (typeof tall === 'number') {
// 타입 가드를 통해, tall이 number임을 보장하여 덧셈 연산이 가능하도록 만든다.
console.log(`tall: ${tall + 10}`);
}
}
introduce('yeongtaek', 33, 177);
introduce('yeongtaek', 33); // tall이 옵셔널 파라미터이므로 가능
rest parameter
function getSum(...rest: [number, number, number]) {
let sum = 0;
rest.forEach((it) => (sum += it));
return sum;
}
getSum(1, 2, 3);
getSum(1, 2, 3, 4, 5); // 불가능 - 3개의 인수가 필요한데, 5개를 작성했다.
함수 타입 표현식과 호출 시그니처
함수 타입 표현식
타입 별칭을 통해서도 만들 수 있다.
호출 시그니처 or 함수 시그니처라고 부르지만 공식문서에서는 '함수 타입 표현식'이라 명명한다.
type Operation = (a: number, b: number) => number;
const add = (a: number, b: number): number => a + b;
==> 다음과 같이 간결하게 만들 수 있다.
const add: Add = (a, b) => a + b;
// 같은 표현
const add: (a: number, b: number) => number = (a, b) => a + b;
const sub: Operation = (a, b) => a - b;
const multiply: Operation = (a, b) => a * b;
const divide: Operation = (a, b) => a / b;
호출 시그니처(= 콜 시그니처)
함수 타입 표현식과 동일한 기능을 한다. 함수의 타입을 표현하는데, 마치 객체 타입을 정의하듯이 하는 이유는 함수도 객체이기 때문에 가능하다. 또한, 하이브리드 타입이라고 하여, 프로퍼티를 추가할 수 있다. 이것 역시 객체이기 때문에 가능하다. 따라서 함수로도 사용할 수 있고, 객체처럼 점표기법으로 프로퍼티에 접근할 수 있다.
type Operation = {
(a: number, b: number): number;
name: string; // 하이브리드 타입
};
const add: Operation = (a, b) => a + b;
const sub: Operation = (a, b) => a - b;
const multiply: Operation = (a, b) => a * b;
const divide: Operation = (a, b) => a / b;
add.name;
'프론트엔드 > TS 공부' 카테고리의 다른 글
함수 오버로딩 (0) | 2024.05.28 |
---|---|
함수 타입의 호환성 (0) | 2024.05.28 |
타입 좁히기 - 타입 가드의 종류 (0) | 2024.05.28 |
타입 단언 (0) | 2024.05.28 |
타입 추론 (0) | 2024.05.28 |
댓글