반응형
함수의 타입을 정의하는 방법
다음과 같은 자바스크립트 함수가 있을 때, 이 함수를 다른 사람에게 설명하는 가장 좋은 방법은 이 함수가 어떤 매개변수를 받고 어떤 값을 반환 하는지 이야기 하는 것 입니다.
// 함수를 설명하는 가장 좋은 방법
// 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 설명
function func(a, b) {
return a + b;
}
그럼 타입스크립트에서는 어떨까요? 자바스크립트에서 함수를 소개하는 방식과 비슷합니다. 대신 타입만 추가되면 됩니다. 어떤 타입의 매개변수를 받고, 어떤 타입의 값을 반환하는지 이야기 하면 됩니다.
function func(a: number, b: number): number {
return a + b;
}
참고로 함수의 반환값 타입은 자동으로 추론되기 때문에 다음과 같이 생략해도 됩니다.
function func(a: number, b: number) {
return a + b;
}
화살표 함수 타입 정의하기
화살표 함수의 타입 정의 방식은 다음과 같습니다. 함수 선언식과 동일하며, 반환값의 타입은 자동으로 추론됩니다.
const add = (a: number, b: number): number => a + b;
매개변수 기본값 설정하기
다음과 같이 함수의 매개변수에 기본값이 설정되어있으면 타입이 자동으로 추론됩니다. 이럴 경우 타입 정의를 생략해도 됩니다.
function introduce(name = "이정환") {
console.log(`name : ${name}`);
}
이때 당연히 기본값과 다른 타입으로 매개변수의 타입을 정의하면 오류가 발생합니다.
function introduce(name:number = "이정환") {
console.log(`name : ${name}`);
}
또 당연히 기본값과 다른 타입의 값을 인수로 전달해도 오류가 발생합니다.
function introduce(name = "이정환") {
console.log(`name : ${name}`);
}
introduce(1); // 오류
선택적 매개변수 설정하기
다음과 같이 매개변수의 이름뒤에 물음표(?)를 붙여주면 선택적 매개변수가 되어 생략이 가능합니다.
function introduce(name = "이정환", tall?: number) {
console.log(`name : ${name}`);
console.log(`tall : ${tall}`);
}
introduce("이정환", 156);
introduce("이정환");
위 코드의 tall 같은 선택적 매개변수의 타입은 자동으로 undefined와 유니온 된 타입으로 추론됩니다. 따라서 tall의 타입은 현재 number | undefined이 됩니다. 그러므로 이 값이 number 타입의 값일 거라고 기대하고 사용하려면 다음과 같이 타입 좁히기가 필요합니다.
function introduce(name = "이정환", tall?: number) {
console.log(`name : ${name}`);
if (typeof tall === "number") {
console.log(`tall : ${tall + 10}`);
}
}
또 한가지 주의할 점은 선택적 매개변수는 필수 매개변수 앞에 올 수 없습니다. 반드시 뒤에 배치해야 합니다.
function introduce(name = "이정환", tall?: number, age: number) {
// 오류!
console.log(`name : ${name}`);
if (typeof tall === "number") {
console.log(`tall : ${tall + 10}`);
}
}
나머지 매개변수
자바스크립트의 rest 파라미터(나머지 매개변수) 관련 내용입니다.
다음과 같이 여러개의 숫자를 인수로 받는 함수가 있다고 가정하겠습니다.
function getSum(...rest) {
let sum = 0;
rest.forEach((it) => (sum += it));
return sum;
}
getSum 함수는 나머지 매개변수 rest로 배열 형태로 number 타입의 인수들을 담은 배열을 전달받습니다.
이때 rest 파라미터의 타입은 다음과 같이 정의하면 됩니다.
function getSum(...rest: number[]) {
let sum = 0;
rest.forEach((it) => (sum += it));
return sum;
}
이때 만약 나머지 매개변수의 길이를 고정하고 싶다면 다음과 같이 튜플 타입을 이용해도 됩니다.
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) // ❌
반응형
'TypeScript' 카테고리의 다른 글
| TypeScript : 함수 타입의 호환성 (2) | 2024.08.08 |
|---|---|
| TypeScript : 함수 타입 표현식과 호출 시그니쳐 (0) | 2024.08.08 |
| TypeScript : 서로소 유니온 타입 (1) | 2024.08.08 |
| TypeScript : 타입 좁히기 (1) | 2024.08.08 |
| TypeScript : 타입 단언 (0) | 2024.08.07 |