유니온 타입을 매개변수로 받아서 반환 값도 매개변수에 따라 달라질 수 있다면, 오버로드를 통해서 매개변수 케이스와 반환값을 명시해줘서, 컴파일러가 함수의 반환값이 뭔지 알게 한다
function 함수이름(매개변수 타입): 반환타입
함수 이름 위에 명시한다. 매개변수 조합의 경우의 수만큼 작성할 수 있다
각 오버로드는 세미콜론으로 구분해주면 좋다
type Combinable = string | number
function add(a: number, b:number): number; //오버로드 네개
function add(a: string, b:number): string;
function add(a: number, b:string): string;
function add(a: string, b:string): string;
function add(a: Combinable, b:Combinable) { // 오버로드로 반환 값의 타입이 명확해진다
if (typeof a === 'string' || typeof b ==='string) {
return a.toString() + b.toString()
}
return a+b //a, b가 모두 숫자일 때
}
const result = add(1, 2) //컴파일러는 result가 number타입인걸 안다
const result2 = add('ab', 'cd') //컴파일러는 result2가 string타입인걸 안다
//오버로드를 하지 않았다면 add의 결과는 string|number 인거 까지만 알 것이다(그래ㅓㅅ 특정 타입의 메서드를 쓰면 에러가 남)
옵셔널 체이닝
객체에 특정 속성이 있을지 없을지 모를 때 ?.로 속성에 접근할 수 있다
타입스크립트에서 객체를 명시했을 땐 컴파일러가 속성 존재 여부를 알지만, 그 외의 방법(http 통신으로 객체 데이터를 가져오기, dom객체 등)으로 가져온 객체는 어떻게 생겼는지 모름. 따라서 없는 속성에 접근하면 컴파일러는 알지 못하고 런타임에서 오류가 나서 알 수 있다
이럴 때 옵셔널 체이닝으로 해당 속성이 있다면 접근, 없다면 그냥 undefined를 반환
앞에 있는 옵셔널 체이닝이 undefined라면, 그 이후에 연달아 있는 속성들의 접근은 실행하지 않아서 뒤에 또 다른 옵셔널 체이닝도 실행되지x
const data = fetch('http~')
console.log(data?.post) //data에 post라는 속성이 있다면 그 값을 반환, 없다면 undefined
Null 병합
??
값이 null이거나 undefined일 때 ?? 뒤에 기본값을 줘서 해당 값으로 대응할 수 있다
그 외에 빈 문자열이나 false, 0 등은 해당되지 않는다. (값을 그대로 씀)
(참고) ||는 false, '', 0도 뒤에 값을 씀
const userInput = undefined
const storedData = userInput ?? 'Default' //storedData의 값은 Default
const userInput2 = false
const storedData2 = userInput2 ?? 'Default' // storedData2의 값은 false 그대로
//참고
const storedData3 = userInput2 || 'Default' // ||는 false, '', 0 모두 뒤에 값을 씀