[TypeScript] 고급 타입2

1. 인덱스 속성(Index Property)

인덱스 속성은 이름이 안정해진 속성의 타입을 정의한다.

 

//typescript

//오류가 나는 경우
interface Animal {
    [props: number]: string
}
const sparrow: Animal = {
    name: '참새'
}

//정상적으로 작동하는 경우
interface Animal {
    [props: string]: string
}
const chicken: Animal {
    name: "꼬꼬"
}

 

위의 코드에서 sparrow 값 할당 할 때 오류가 발생한다.

 

sparrow의 속성인 name은 string이지만, Animal 인터페이스에 정의 된 것은 숫자이다.

 

그러므로 숫자 속성으로 밖에 못 쓴다.

 

2. 함수 오버로드(Function Overload)

함수 오버로드는 함수 재정의이다.

 

타입스크립트는 굉장히 타입에 민감한데,

코드를 작성하다보면, 정말 다양한 타입으로 결과가 나올 수도 있다.

 

다양한 타입으로 나오는 것 때문에, 일부로 클래스를 이용해서 

상속하면서 함수를 재정의하는 것은 낭비일지도 모른다.

 

//typescript

//틀린 예시
type Combinable = string | number;

function add(a: Combinable, b: Combinable) {
    if(typeof a === "string" || typeof b === "string"){
        return a.toString() + b.toString();
    }
    return a + b;
}

const result = add("a", "b");
//오류!!
result.split(" ");
/* 
---- 오류 메시지 ------
'string | number' 형식에 'split' 속성이 없습니다.
  'number' 형식에 'split' 속성이 없습니다.
  -----------------------
*/

 

여기서 오류가 발생하는 이유는 return 값이 2개이기 때문에

타입스크립트에서는 변수 result의 타입이 확신이 안든다.

 

이러한 오류를 막기 위해서는 인수가 어떤 타입인지 확실하게 정의가 되어야 한다.

 

그리고 return 타입은 정확히 무엇인지도 알려줘야 한다.

 

그래서 함수 오버로드를 사용한다.

 

//typescript

//좋은 예시: function overload 사용
function add(a: number, b: number): number;
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;
}

const result = add("a", "b");
result.split(" ");

 

 

3. 선택적 연결(Optional Chaining)

선택적 연결은 ' ? ' 키워드를 사용한다.

 

해당 변수의 속성이 있는 지 없는 지 모를 때 ' ? '키워드를 사용해서

   속성이 있다면 그 속성까지 들여다 보고, 없다면 해당 변수까지만 읽는 문법이다.

 

const fetchedUserData = {
  id: "u1",
  name: "gunbro",
  job: {
    title: "FE Developer",
    description: "I am currently a college student. ",
  },
};
console.log(fetchedUserData?.job?.title);
// => console.log(fetchedUserData.job && fetchedUserData.job.title );

 

 

4. 널 병합 연산자(Nullish Coalescing Operator)

널 병합 연산자는 null이나 undefined가 나오면 저절로 디폴트 값으로 설정해주는 문법이다.

 

사실 이 문법은 자바스크립트에도 생겼다.

 

const userInput = null;

const storedData = userInput ?? "DEFAULT";

console.log(storedData);
// DEFAULT