Type의 불확실성 제거
Javascript를 사용해봤다면 아래와 같은 문제를 만난 적이 있을 것이다.
1
2
3
message.toLowerCase();
message();
방대한 소스코드에서 저 부분만을 딱 잘라서 보여줬다고 가정할 때 위 코드를 실행하면 어떤 결과가 나올 것 같은가?
그건 아무도 모른다. 왜나하면 message가 프로그램 내부에서 어떻게 정의 되고 변경 되는지 알 수가 없기 때문이다. javascript에서 위 코드를 안정적으로 실행하기 위해서는 다음과 같은 확인 사항이 있다.
-
message라는 값이 있긴 한가? -
message안에toLowerCase라는 메소드가 있는가? -
message는function의 역할도 수행할 수 있는가?
하지만 Javascript는 기본적으로 위 궁금증들을 해결해주지 않는다. Type은 애초에 변수 정의 할 때 조차 확정되지 않으며 추후 값을 없애거나 Type을 변경하는 것도 가능하기 때문이다.
message에 만약에 Hello world가 들어가있다고 가정해보면 message.toLowerCase()는 정상 실행이 될 것임을 짐작할 수 있다.
다만 아래쪽은 TypeError: message is not a function 이라는 에러가 표시 될 뿐이다.
만약 저 message가 function이 맞다고 하더라도 저기서 반환 되어 나오는 값이 어떤 Type을 갖고있는지 전혀 모르기 때문에 추후 로직 구성에도 많은 예외 처리가 필요하다.
Typescript는 위 이슈에 대해서도 아주 깔끔한 경고문을 보여준다.
1
2
3
4
5
const message = "hello!";
message();
This expression is not callable.
Type 'String' has no call signatures.
비예외 실패
1
2
3
4
5
const user = {
name: "Daniel",
age: 26,
};
user.location;
Javascript에서는 user.location을 참조해봤자 undefined 한줄 띡 뱉어놓고 끝난 다는 것을 모두 알 것이다. 그 어떤 Exception조차 반환하지 않는다.
반면에 Typescript는
1
2
3
4
5
6
7
const user = {
name: "Daniel",
age: 26,
};
user.location;
// Property 'location' does not exist on type '{ name: string; age: number; }'.
선언 당시에 존재하지 않은 Property에 대해서 참조하려고 하면 Type Error가 표시된다.
오타 보정
1
2
3
4
5
6
7
8
const announcement = "Hello World!";
// How quickly can you spot the typos?
announcement.toLocaleLowercase();
announcement.toLocalLowerCase();
// We probably meant to write this...
announcement.toLocaleLowerCase();
Typescript는 위처럼 대소문자 이슈에 대해서도 오타를 바로잡아준다.