매개변수 기본값 지정하기

선택적 매개변수는 항상 그 값이 undefined로 고정됩니다. 만일, 함수 호출 시 인수를 전달하지 않더라도 매개변수에 어떤 값을 설정하고 싶다면 매개변수의 기본값을 지정할 수 있습니다. 이를 디폴트 매개변수라고 하고 다음과 같은 형태로 사용합니다.

export type Person = {name: string, age: number}

export const makePerson = (name: string, age: number = 10): Person => {
  const person = {name: name, age: age}
  return person
}
console.log(makePerson('Jack')) // { name: 'jack', age: 10 }

객체 생성 시 값 부분을 생략할 수 있는 타입스크립트 구문

타입스크립트는 다음처럼 매개변수의 이름과 똑같은 이름의 속성을 가진 객체를 만들 수 있습니다. 이때 속성값 부분을 생략할 수 있는 단축구문을 제공합니다.

const makePerson = (name: string, age: number) => {
  const person = {name, age}
}

객체를 반환하는 화살표 함수 만들기

화살표 함수에서 객체를 반환하고자 할 때는 중괄호{}를 소괄호()로 감싸줍니다.

export const makePerson = (name: string, age: number = 10): Person 
  => ({name, age})

색인 키와 값으로 객체 만들기

타입스크립트에서는 {[key]: value}형태의 타입을 '색인 가능 타입'이라고 하며, 다음과 같은 형태로 key와 value의 타입을 명시합니다.

export type KeyValueType = {
  [key: string]: string
}
export const makeObject = (key: string, value: string): KeyValueType
  => ({[key]: value})

console.log(makeObject('name', 'jack')) //{ name: 'jack' }

function 함수와 this 키워드

타입스크립트의 function 키원드로 만든 함수는 Fuction이란 클래스의 인스턴스, 즉 함수는 객체입니다. 객체지향 언어에서 인스턴스는 this 키원드를 사용할 수 있습니다. 타입스크립트에서는 function 키워드로 만든 함수에 this 키워드를 사용할 수 있습니다. 반면에 화살표 함수에는 this 키워드를 사용할 수 없습니다.

method란?

타입스크립트에서 메서드는 function으로 만든 함수 표현식을 담고 있는 속성입니다. 다음 코드에서 클래스 A는 value와 method라는 두 개의 속성을 가집니다. value에는 1이라는 값을 설정하지만, methosd는 () => void타입의 함수 표현식을 설정합니다. 여기서 method구현 내용 중 특이한 부분은 04행의 this.value부분입니다.

export class A{
  value: number = 1
  method: () => void = function(): void {
    console.log(`value: ${this.value}`)
  }
}

class method 구문

타입스크립트는 클래스 속성 중 함수 표현식을 담는 속성은 function 키워드를 생략할 수 있게 하는 단축 구문을 제공합니다.

export class B {
  constructor(public value: number = 1) {}
  method(): void {
    console.log(`value: ${this.value}`)
  }
}

static method

클래스의 속성은 static수정자를 속성 앞에 붙여서 정적으로 만들 수 있었습니다. 메서드 또한 속성이므로 이름 앞에 static수정자를 붙여 정적 메서드를 만들 수 있습니다.

method 체인

jQuery와 같은 라이브러리는 다음처럼 객체의 메서드를 이어서 계속 호출하는 방식을 코드를 작성할 수 있습니다. 이러한 방식을 메서드 체인이라고 합니다. 타입스크립트로 메서드 체인을 구현하려면 메서드가 항상 this를 반환하게 합니다.

class calculator {
  constructor(public value: number = 0) {}
  add(value: number) {
    this.balue += value
    return this
  }
  multiply(value: number) {
    this.value *= value
    return this
  }
}

let calc = new Calculator
let result = calc.add(1).add(2).multiply(3).multiply(4).value
console.log(result) // (0 + 1 + 2) * 3 * 4 = 36