타입스크립트란?
자바스크립트를 기반으로 만들어진 언어이자 자바스크립트의 여러 문제를 해결하고 단점을 보완한 언어이다. (자바스크립트와 문법이 똑같다.)
타입스크립트는 JS와는 달리 타입안정성면에서 자바나 C# 과 같은 안정성을 갖게된다.
자바스크립트가 타입안정성이 없는 언어인 이유를 자세히 살펴보자.
1.
> [1, 2, 3, 4] + false
< '1,2,3,4false'
JavaScript
복사
이런식으로 배열과 불린의 덧셈에서 마지막 불린타입인 false가 string으로 바뀌어버렸다.
다른 언어는 이를 허용하지 않는다!!
이상적으로는 오류를 통해 잘못됐음을 알려줘야한다.
2.
function divide(a, b) {
return a / b;
}
divide(2, 3) //정상적으로 작동
divide("xxxx") //NaN
JavaScript
복사
위에서 만든 divide 함수는 매개변수가 두개이고 숫자일 때만 작동하는 것을 기대한다.
하지만 자바스크립트는 함수가 올바르게 사용되도록 강제하지 않는다. (매개변수가 하나여도, 숫자가 아니어도 어쨌든 일단 작동된다.)
문제는 divide 함수가 전달 받는 매개변수의 타입을 컴퓨터가 모르고 있다는것이다!
3.
런타임에러
콘솔창에서 일어나는 에러
const nico = { name : "nico" }
nico.hello();
JavaScript
복사
객체에 없는 값을 호출했다.
다른 언어라면 코드 실행전 컴파일 할때 오류가 났을 것이다.
하지만 자바스크립트는 코드 실행 시 오류가 난다. (코드 실행 전까지 오류가 있음을 모른다.)
다른 사용자들에게도 개발자들에게도 코드에 오류가 있음을 모두에게 공개~~할수있다;;;;
이상적으로는 코드 실행 전에 이러한 오류를 잡는게 좋음 ⇒ 개발자들이 js에서 타입스크립트로 넘어오는 이유
타입 스크립트는 개발자가 코드를 작성하면 자바스크립트로 변환 시킨다.
이유는 브라우저가 타입 스크립트가 아닌 자바스크립트를 이해하기 때문이다. (참고로 Node.js는 타입 스크립트와 자바스크립트 둘 다 이해한다.)
타입 스크립트가 자바스크립트로 “단순히 변환”만 하면서 어떻게 “개발자를 보호”해 주는지 알아보자.
아까와 똑같이 코드를 작성한다.
const sun = { name : "sunyoung" }
sun.hello(); // 타입스크립트에서는 오류가 뜬다
JavaScript
복사
[1, 2, 3, 4] + false // 빨간줄로 오류를 즉시 알려줌
TypeScript
복사
숫자배열에 boolean을 더할수 없다는 오류
정리
1. TypeScript는 JavaScript에 추가적인 구문을 추가하여 editor와의 단단한 통합을 지원합니다. editor에서 초기에 오류를 잡을 수 있습니다.
2. TypeScript 코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환될 수 있습니다.
3. TypeScript는 JavaScript를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다.
