TIL. TypeScript-함수 -10/4

예흠·2020년 10월 4일
0

TypeScript 정복기

목록 보기
3/4

함수 (Function)

TypeScript 함수는 JavaScript와 마찬가지로 기명 함수(named function)과 익명 함수(anonymous function)로 만들 수 있습니다.

예시

// 기명 함수
fucntion add(x, y) {
  return x + y;
}

// 익명 함수
let myAdd = function(x, y) { return x + y };

- 함수 타입 (Function Types)

1. 함수의 타이핑 (Typing the function)

예상하다시피한 예시를 봅시다.

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

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

이런식으로 각 파라미터와 함수 자신의 반환될 타입을 정해줄 수 있습니다.

2. 선택적 매개변수와 기본 매개변수 (Optional and Default Parameter)

JavaScript에서는 모든 매개변수가 선택적이고, 사용자는 적합하다고 생각하면 그대로 둘 수 있습니다.
그렇게 둔다면 그 값은 undefined가 됩니다.
TypeScript에서도 선택적 매개변수를 원한다면 매개변수 이름 끝에 ? 를 붙임으로써 해결할 수 있습니다.

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

let result1 = buildName("Bob");                  // 지금은 바르게 동작
let result2 = buildName("Bob", "Adams", "Sr.");  // 오류, 너무 많은 매개변수
let result3 = buildName("Bob", "Adams");         // 정확함

이런식으로 ?를 붙여서 해결을 할 수 있습니다.

3. 나머지 매개변수 (Rest Parameters)

파라미터를 2개로 설정했는데 3개이상의 argument들이 들어온다면 어떻게 될까요?
JavaScript에서는 모든 함수 내부에 위치한 arguments라는 변수를 사용해 직접 인자를 가지고 작업할 수 있습니다.
TypeScript에서는 이 인자들을 하나의 변수로 모을 수 있습니다.

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

// employeeName 은 "Joseph Samuel Lucas MacKinzie" 가 될것입니다.
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

4. 오버로드 (Overloads)

오버로드, 오버로딩라는 것은 정확하게 표현하는 것은 찾을 수 없었지만
문맥을 봤을때 함수에 각각 타입들을 알맞게 작성하여 제공하는 것을 의미하는 것 같습니다.
오버로드 목록은 컴파일러가 함수 호출들을 해결할 때 사용하는 것입니다.

배열안의 object형식으로 들어온다면

(a: {key: string; value: number;}[]): number

이런식으로 넣을수가 있겠죠?

profile
노래하는 개발자입니다.

0개의 댓글