Typescript 왜쓰나?
1. 기존 JavaScript의 문제점들
- JavaScript의 동일 연산자는 (==) 인수를 강제로 변환하여(coerces), 예기치 않은 동작을 유발함.
if ("" == 0) {
// 결과값 true 로 반환
}
if (1 < x < 3) {
// *어떤* x 값이던 결과값은 true 로 반환
}- JavaScript는 또한 존재하지 않는 프로퍼티의 접근을 허용함.
const obj = { width: 10, height: 15 };
// 왜 이게 NaN일까?
const area = obj.width * obj.heigth;TypeScript = A Static Type Checker(정적 타입 감시자)
프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것을 정적 검사라고 하는데, 어떤 것이 오류인지와 어떤 것이 연산 되는 값에 기인하지 않음을 정하는 것이 정적 타입 검사라고 한다.
TypeScript 는 프로그램을 실행시키기 전에 값의 종류를 기반으로 프로그램의 오류를 찾는다. 예를 들어, 위의 마지막 예시에 오류가 있는 이유는 obj의 타입 때문이다.
- TypeScript 에서 위의 코드를 사용했을때 결과 -> error 가 표시된다.
// @errors: 2551
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;또한 TypeScript는 컴파일언어 이다. 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환된다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있으나, 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다.
2. JavaScript 와 TypeScript의 관계
: 타입이 있는 JavaScript의 상위 집합 (A Typed Superset of JavaScript)
TypeScript는 JS의 구문이 허용되는, JavaScript의 상위 집합 언어이다.
- 객체 지향 프로그래밍 지원
타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.
결론은 JavaScript 에 대한 어느정도의 이해도가 있어야 TypeScript를 사용할수 있다는것.
Frontend Developer