[TypeScript] 타입 어노테이션과 추론

타입 어노테이션과 타입 추론

1) 타입 어노테이션

사용하려는 변수, 함수 등 옆에 : 기호와 함께 우리가 배운 선언 가능한 타입을 넣어주는 것

어떤 값이 어떤 타입을 참조하고있는지 개발자가 ts에게 알려주는 행동

 

2) 타입 추론

ts는 코드에서 타입을 명시하지 않아도, 컴파일러가 코드의 문맥을 통해 타입을 자동으로 추론한다.

 

 

타입 어노테이션의 필요성

우리가 명시하지 않아도 ts는 타입을 추론할 수 있는데 왜 타입 어노테이션을 해야 할까?

 

const subtract = (a: number, b: number) => {
  a - b;
};

 

위 함수는 아무것도 반환하지 않고, ts도 타입 추론을 통해 반환값이 void라는 것을 추론할 수 있다.

하지만 아마도! 원하는 동작이 아닐 것이다. 우리는 a - b가 반환되길 바라는데, 실수로 return 을 빼먹는 경우가 종종 있다.

이런 실수를 방지하기 위해 타입 어노테이션을 활용하는 것이 필요하다.

 

함수가 any 타입을 리턴하고 이 값을 명확하게 해야할 때

const json = '{"a": 1, "b": 2}';
const object = JSON.parse(json);  // any 타입으로 인식 -> 어노테이션 피룡

object.aselfkje;  // 에러나지 않음

// 이렇게했을 때는 object에 존재하지 않는 키값으로 접근하는 경우 찾을 수 없다는 에러 발생
const object: { a: number, b: number } = JSON.parse(json);

 

어떤 변수를 선언한 이후에 다른 라인에서 초기화를 할 때

const colors = ['red', 'blue', 'green'];
let foundColor;  // 암묵적으로 any 타입을 가짐 -> 얘를 타입 어노테이션하자

for(let i = 0; i < colors.length; i++) {
  if(colors[i] === 'blue') foundColor = true;
}

 

추론할 수 없는 타입을 변수가 가지게 하려 할 때

let numbers = [-10, -5, 10];
let numberAboveZero = false;  // boolean 타입으로 추론됨

for(let i = 0; i < colors.length; i++) {
  if(numbers[i] > 0 numberAboveZero = numbers[i];  // ts가 추론한 boolean이 아니므로 에러 발생
}

// 이렇게 해주면 위와같은 경우를 의도에 맞게 사용할 수 있음
let numberAboveZero: boolean | number = false;