반응형
선택적 매개변수와 기본 매개변수
객체와 튜플 타입에서처럼 함수에서도 ?를 이용해 선택적 매개변수를 지정할 수 있습니다.
함수의 매개변수를 선언할 때 필수 매개변수를 먼저 지정하고 선택적 매개변수를 뒤에 추가합니다.
function log(message: string, userName?: string){
let time = new Date().toLocaleTimeString()
console.log(time, message, userName || '뭐... 읎는데...')
}
log('페이지 로딩됨') // "17:07:22 PM 페이지 로딩됨 뭐... 읎는데..." 출력
log('유저 들어옴', 'cozyLinda') // "17:09:10 PM 유저 들어옴 cozyLind" 출력
JavaScript에서처럼 매개변수에 기본값을 지정할 수 있습니다.
의미상으론 호출자가 해당 매개변수에 값을 전달하지 않아도 되므로 매개변수를 선택적으로 만드는 것과 같습니다.
예시로 log를 아래처럼 다시 구현할 수 있습니다.
function log(message: string, userName = '뭐... 읎는데...'){
let time = new Date().toLocaleTimeString()
console.log(time, message, userName)
}
log('유저가 버튼 누름', 'cozyLinda')
log('유저 나감')
userName에 기본값을 제공하므로 선택형 마크(?)와 타입을 지정할 필요가 없어졌습니다.
TypeScript가 기본값으로 매개변수의 타입을 추론할 수 있기 때문이며, 이 덕분에 코드가 간결해지고 읽기도 쉬워집니다.
물론 일반 매개변수에 타입을 지정하듯이 기본 매개변수에도 타입을 명시할 수 있습니다.
type Context = {
appId?: string
userName?: string
}
function log(message: string, context: Context = {}) {
let time new Date().toISOString()
console.log(time, message, context.userName)
}
보통 실무에선 선택적 매개변수보단 기본 매개변수를 더 자주 사용하게 됩니다.
반응형
'👶 TypeScript' 카테고리의 다른 글
call, apply, bind (0) | 2023.01.11 |
---|---|
나머지 매개변수 (0) | 2023.01.10 |
함수 선언과 호출 (0) | 2023.01.10 |
열거형 (0) | 2023.01.10 |
유니온과 인터섹션 타입 (0) | 2023.01.10 |