Typescript - 09

함수 구현 기법

매개변수 기본값 지정하기

선택적 매개변수는 항상 값이 undefined로 고정되는 것과 달리 함수 호출 시 매개변수 인수를 전달하지 않아도 기본으로 어떤 특정한 값을 설정하고 싶을때 설정할 수 있는데 이를 디폴트 매개변수라고 한다.

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

export const makePerson = (name : string ,age : number = 15) : Person =>{
  const person = {name : name, age : age}
  return person
}
console.log(makePerson('Lee',23))
// 매개변수를 전달하지 않아도 기본값으로 잘 할당된다.
console.log(makePerson('Kim'))

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

자바스크립트 ECMA6 문법 처럼 key와 value가 동일한 이름을 가지면 속성값 부분을 생략할 수 있는 단축 구문을 제공한다.

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

export const makePerson = (name : string ,age : number = 15) : Person =>{
// 아래와 같이 단축 구문 사용이 가능하다.
  const person = {name, age}
  return person
}
console.log(makePerson('Lee',23))
console.log(makePerson('Kim'))

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

화살표 함수에서 객체를 반환 하고자 할때 주의 해야 할 점이 있다.
만약 객체를 반환하고자 할 때 다음과 같이 사용하면 오류가 발생한다.

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

이렇게 작성하게 되면 컴파일러는 중괄호를 객체가 아닌 복합 실행문으로 해석하여 원하는 값이 나오지 않거나 에러를 발생 시킨다. 따라서 객체임을 분명히 해주기 위해 괄호로 감싸준다.

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

매개변수에 비구조화 할당문 사용

함수의 매개변수는 비구조화 할당문을 적용할 수 있다.

export type Person = {name : string, age : number}
const printPerson = ({name, age} : Person): void => 
  console.log(`name : ${name}, age : ${age}`)
printPerson({name : 'Lee', age : 23})
// 비구조화를 적용시키기 위해서는 type의 객체와 동일해야 한다.

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

함수를 통하여 객체를 생성하고 싶으면 다음과 같이 사용한다.

const makeObject = (key, value) => ({[key] : value})
console.log(makeObject('name', 'Lee')) // {name : 'Lee'}

타입스크립트는 색인의 타입을 명시하는데 이를 색인 가능 타입이라고 한다.

type KeyType = {
 [key:string] : string
}

const makeObject = (key:string, value : string) :KeyType => ({[key] : value})

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