less than 1 minute read

첫번째로, 생각하지 못한 에러를 사전에 방지할 수 있다.

예를 들어,

person: {
  name: "NH",
  age: 30,
  address: {
    city: "cheonan",
    street: "seongjung-ro",
  },
};

위와 같은 객체 데이터가 있을 때,

JS에서는 person.address를 참조하게 되면

[object Object]가 화면에 그대로 나타나게 된다.

또는, person.addres 와 같이 스펠링의 오타가 생기면

undefined를 그대로 화면에 출력해버린다.

또는, person.addres.city와 같이 참조해 들어가는 객체 키 값의 오타가 생기면

완전히 빈 값을 출력, 그리고 그 다음의 코드들 역시 정상적으로 작동하지 않으며,

console에 오류 메시지를 띄우게 된다.

하지만 TS를 사용하게 되면, 화면에 [object Object]를 띄운다거나,

undefined를 띄운다거나, 빈 화면 또는 다음 script들도 먹통을 만드는 등의 상황을

사전에 캐치해 오류를 방지할 수 있다.

두번째로, 코드 가이드 및 자동완성의 편리성이다.

JS를 사용할 때는, 아래와 같이 내장 API들의 자동완성이 지원되지 않는다.

하지만, TS를 사용할 때는 아래와 같이 API의 자동완성이 지원되어

편리하게 코드를 작성할 수 있고, 오타 등으로 인한 오류를 방지할 수 있다.

Updated: