본문 바로가기
스터디

[Typescript] 함수

by rious275 2023. 6. 10.

함수 타입 (Function Types)

함수의 타이핑

아래는 함수에 타입을 더한 예제이다.

function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y };

위 예제에서는 매개변수의 타입과 반환 타입을 정해주었다. 하지만 Typescript는 반환 문을 보고 반환 타입을 파악할 수 있으므로 반환 타입은 생략할 수 있다.

함수 타입 작성하기

let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };

함수의 타입은 매개변수의 타입과 반환 타입이 있다. 매개변수의 타입이 올바르게 나열되어 있으면 함수 타입에 다른 이름을 붙여도 유효하며,

만약 함수가 값을 반환하지 않는다면 void 타입을 사용한다.

타입의 추론

let myAdd: (baseValue: number, increment: number) => number =
    function(x, y) { return x + y; };

위처럼 한쪽에만 타입이 있어도 타입을 알아낼 수 있는 형태를 contextual typing이라 부른다.

선택적 매개변수와 기본 매개변수

Typescript에서는 모든 매개변수가 함수에 필요하다고 가정한다. 하지만 선택적으로 사용할 때는 아래와 같이 물음표 기호를 써 옵셔널하게 사용 가능하다.

function buildName(firstName: string, lastName?: string) {
    if (lastName) return firstName + " " + lastName;
    else return firstName;
}

let result1 = buildName("Bob");  // O
let result3 = buildName("Bob", "Adams");  // O

매개변수의 초기값을 설정해 놓아도 선택적 매개변수와 동일한 효과를 볼 수 있다.

나머지 매개변수 (Rest Parameters)

나머지 매개변수를 사용해 타입을 지정하게 되면, 해당 선택적 매개변수들의 수를 무한으로 취급한다.

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

오버로드 (Overloads)

전달되는 매개변수에 따라 다른 결과를 반환하는 함수가 있을 때는 타입을 아래처럼 지정할 수 있다.

function add(a: string, b?: string): string;
function add(a: number, b?: number): number;
function add(a: any, b: any) {
  if (b) return a + b;
  return a;
}

add(1, 3)  // 4
add("hello", "world")  // "hello world"

동일한 이름에 매개변수만 다른 여러 함수를 만드는 것을 함수의 오버로딩이라 한다.