[TypeScript] 타입스크립트 함수 타입

 

• 매개변수에 타입 지정하기
• 반환값에 타입 지정하기
• 옵셔널 파라미터
• 함수 오버로드

---

- 매개변수에 타입 지정하기

 

자바스크립트의 함수에는 인자, 인수(매개변수)가 있다.

function sum(a, b) {
    return a + b;
}

sum(10, 20)  // 10과 20은 인자

 

이러한 매개변수에 타입을 지정할 것이다.

function sum(a:number, b:number) {
    return a + b;
}

sum(10, 20);  // OK
sum('a', 'b');  // NOT OK

 

매개변수에 number라는 타입을 지정하였다.

 

sum 함수의 매개변수에 string 타입을 넣으면 오류가 발생한다.

 

---

- 반환값에 타입 지정하기

 

함수가 반환되는 값에도 타입을 지정할 수 있다.

function sum(a, b):number {
    return a + b;
}

 

:number를 통해 반환값이 반드시 숫자형이어야 한다고 명시한다.

 

---

- 옵셔널 파라미터

 

옵셔널 파라미터는 ? 기호로 표시한다.

 

? 기호로 표시하면 타입으로 지정한 매개 변수가 생략이 가능하게 한다. (생략이 되어도 괜찮다)

// 인자를 2개 작성하지 않아 오류가 남
function sum(a:number, b:number):number {
    return a + b;
}
sum(10);

// BUT,
// 옵셔널 파라미터를 통해 오류가 발생하지 않음
function sum(a:number, b?:number):number {
    return a + b;
}
sum(10);

 

두 번째 함수와 같이 ? 옵션을 붙여주면, 해당 매개변수는 옵셔널 파라미터가 되어 인자가 생략 가능하다.

 

---

- 함수 오버로드

 

함수 오버로드를 통해 입력 타입에 따라 반환 타입도 명확히 설정할 수 있다.

 

이는, 함수 호출 시 타입 검사와 자동 완성을 도와줄 수 있다.

function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: string | number, b: string | number): string | number {
    if (typeof a === "number" && typeof b === "number") {
        return a + b; // 숫자 덧셈
    }
    return `${a}${b}`; // 문자열 결합
}

const result1 = combine(10, 20); // number 반환
const result2 = combine("hello", "world"); // string 반환

 

---

참고 강의: https://www.sucoding.kr/