기명 함수와 익명 함수

// 기명 함수 : 함수 선언식
function add(x: number, y:number): number{
  return x + y;
}

// 익명 함수 : 함수 표현식
let myAdd= function(x: number, y: number): number {return x + y}

함수의 파라미터와 함수 자신의 반환 타입을 정해줄 수 있다.

화살표 표기

함수의 반환 타입을 분명하게 명시할 수 있는 표기법이다.

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

위의 함수는 number x와 number y를 인자로 받아서 number의 값을 리턴하는 함수이다. 이렇게 화살표 표기를 사용하는 이유는 전체적으로 =를 기준으로 양 쪽에 모두 타입을 명시해 주어야 할 때, myAdd라는 변수가 사실은 함수이고, 이 함수의 매개변수와 리턴값을 표시할 때 : 를 한 번 더 써서 헷갈리는 경우를 방지하기 위해서이다.

타입 추론

위에서 =를 중심으로 양쪽 모두 타입을 작성해 주었다고 했는데, 한 쪽에만 작성해도 이상이 없다. 이는 방정식의 한 쪽에만 타입이 있으면 반대쪽의 타입 역시 추론해주기 때문이다. 이를 contextual typing이라 한다.

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

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

Optional Parameter and Default Parameter

타입스크립트에서는 함수에게 주어진 인자의 수가 매개변수의 수와 일치해야 한다.

function buildName(firstName: string, lastName: string) {
  return firstName + lastName
}

let result1 = buildName("Kim")  // 오류, 매개변수 너무 적음
let result2 = buildName("Kim", "Dokyung", 'Mr.')  // 오류, 매개변수 너무 많음
let result3 = buildName("Kim", "Dokyung")  // 정확

하지만 자바스크립트에서는 매개변수를 모두 다 사용할 필요가 없이 선택적이다. 만약 사용자가 해당 매개변수를 사용하지 않는다면 undefined가 된다. 이와 같이, 타입스크립트에서도 optional parameter를 사용한다면 선택적으로 해당 매개변수를 사용할 수 있다.

function buildName(firstName: string, **lastName?: string**) {
  return firstName + lastName
}

let result1 = buildName("Kim")  **// 지금은 바르게 동작**
let result2 = buildName("Kim", "Dokyung", 'Mr.')  // 오류, 매개변수 너무 많음
let result3 = buildName("Kim", "Dokyung")  // 정확

혹은 default parameter라 해서 유저가 값을 제공하지 않거나 undefined로 했을 때 해당 값이 나오도록 표시해 줄 수도 있다.

function buildName(firstName: string, **lastName = "Kim"**) {
  return firstName + lastName
}

let result1 = buildName("Kim")  **// 지금은 바르게 동작**
let result2 = buildName("Kim", **undefined**)  **// 그래도 동작함**
let result3 = buildName("Kim", "Dokyung", 'Mr.')  // 오류, 매개변수 너무 많음
let result4 = buildName("Kim", "Dokyung")  // 정확