반응형
📌 TypeScript로 기본 함수 형성하기
function add(num1:number, num2:number): void { // 반환값 타입: 없음
console.log(num1 + num2);
}
function isAdult(age: number):boolean { // 반환값 타입: boolean
return age > 19;
}
함수를 형성할 때 매개변수의 타입과 반환값의 타입을 지정해야 합니다.
📌 선택적 매개변수
function hello(name?: string) {
return `Hello, ${name || "world"}`; // name이 없을 땐 world를.
}
const hel = hello(); // 가능
const hel2 = hello('Sara'); // 가능
?:의 의미는 해당 매개변수가 있어도 되고 또는 없어도 된다는 의미를 나타냅니다.
API의 타입을 정의할 때 사용하지 않는 값에 ?:를 활용하기도 합니다.
📌 선택적 매개변수와 필수 매개변수 위치에 따른 문제
function hello3(name: string, age?: number): string {
if(age !== undefined) {
return `${name}'s age -> ${age}`;
} else {
return `${name}'s age -> ??`;
}
} // 가능
function hello3(age?: number, name: string): string {
if(age !== undefined) {
return `${name}'s age -> ${age}`;
} else {
return `${name}'s age -> ??`;
}
} // 불가능
함수를 호출할 때 매개변수 타입과 수에 맞게 사용해야 하는데
선택적 매개변수(?:)는 있어도 되고 없어도 되기 때문에 마지막에 위치하지 않으면 오류가 발생합니다.
📌 매개변수 값 초기화
function hello2(name = 'world') {
return `Hello, ${name}`;
}
const hel = hello(); // 가능
const hel2 = hello('Sara'); // 가능
초기화된 매개변수를 활용하면 선택적 매개변수와 동일하게 활용할 수 있습니다.
📌 매개변수 개수가 유동적일 때
function sum(...nums: number[]) {
return nums.reduce((result, num) => result + num, 0);
}
sum(1, 2, 3); // 6
sum(10, 11, 12, 13, 14, 15, 20); // 95
...은 JS에서 배열이 아닌 값들을 []를 제거한 배열로 변환해주는 Spread Operator(펼침 연산자)입니다.
따라서 해당 매개변수의 타입은 배열로 지정해줘야 합니다.
728x90
'TypeScript' 카테고리의 다른 글
React에서 props의 타입 정의하기 (0) | 2023.09.05 |
---|---|
React에 TypeScript 적용하기 (0) | 2023.08.30 |
서울 음식점 API의 Type 정의하기 (0) | 2023.08.29 |
TypeScript 2일차 (변수 생성 방법) (0) | 2023.08.21 |
TypeScript 1일차 (사용하는 이유와 장점) (0) | 2023.08.19 |