목차
TypeScript란
-
타입스크립트(TypeScript)는 Microsoft에서 개발한 프로그래밍 언어로, 자바스크립트의 확장된 버전입니다. 타입스크립트는 정적 타입을 지원하며, 이를 통해 코드의 안정성과 가독성을 향상시킬 수 있습니다.
-
즉 자바스크립트의 코드에 타입 안정성을 더한 언어라고 볼 수 있습니다.
타입 안정성 : 타입을 이용해 프로그램이 유효하지 않은 작업을 수행하지 않도록 방지한다.
TypeScript를 사용하는 이유
- 자바스크립트에 안정성을 더한다?? 코드를 보며 typescript의 중요성에 대해 알아보겠습니다.
자바스크립트
-
숫자 3과 []를 더하면 문자열 "3"이 나옵니다. -
"hello" 문자열을 2로 나누면 별다른 에러가 나타나지 않고 NaN가 나타납니다.
-
위의 결과처럼
자바스크립트는 잘못된 동작임에도 예외를 던지지 않고 최선을 다해 결과를 도출합니다.물론 이게 도움이 되는 경우도 있지만, 나중에 버그가 발생했을 때 어떻게 찾을 수 있을까요?? 아마 버그를 찾는 데만 엄청난 시간을 써야 할것입니다.
타입스크립트
-
자바스크립트와 다르게 아래의 사진과 같이 에러가 발생하여, 즉시 문제를 바로잡을 수 있습니다.
-
타입스크립트를 통해 버그를 미리 발견하여 코드의 안정성을 유지하고, 유지보수도 쉽고, 코드의 가독성도 향상되기 때문에 개발 시간을 단축하는 데 많은 도움을 줄 수 있기 때문에 많은 기업이 타입스크립트를 사용하는 것 같습니다.
Typescript Compiler에 대해
- 약간의 차이가 있겠지만 대부분의 언어들은 아래의 3가지 단계로 컴파일 진행이 됩니다.
- 프로그램이 AST로 파싱된다.
- AST가 바이트코드로 컴파일된다.
- 런타임이 바이트코드를 평가한다.
-
하지만
타입스크립트는 컴파일러가 바이트코드로 변환하는 대신 자바스크립트 코드로 변환시킵니다. -
좀 더 자세히 확인해보자면 아래의 6단계를 거칩니다.
- 타입스크립트코드 -> 타입스크립트 AST로 파싱된다.
- 타입 검사기가 AST를 확인한다.
- 타입스크립트 AST -> 자바스크립트 코드로 변환
- 자바스크립트 코드 -> 자바스크립트 AST로 파싱된다.
- 자바스크립트 AST -> 바이트코드로 컴파일된다.
- 런타임이 바이트코드를 평가한다.
타입검사기 : 코드의 타입 안정성을 검증하는 프로그램
-
타입스크립트에서 사용하는 Type은 1, 2단계에서 사용하며 그 이후엔 사용하지 않습니다.
즉 타입 검사기가 2단계에서 타입을 확인하여 문제가 발생 시 에러를 나타냅니다. -
3단계 이후에는 타입을 사용하지 않기 때문에 타입 관련된 코드는 3단계 이후에 찾아볼 수 없습니다. 아래의 사진은 ts 파일을 js파일로 컴파일한 것인데 type 관련 작성한 부분은 보이지 않는 걸 알 수 있습니다.
Typescript와 Javascript의 차이
타입결정 방식
동적 타입
-
동적 타입 바인딩이란 프로그램을 실행해야만 특정 데이터 타입을 알 수 있음을 의미합니다.
-
즉 자바스크립트는 프로그램을 실행하기 전에는 타입을 알 수 없습니다.
-
장점
- 런타임까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 유연성이 높습니다.
- 컴파일시 타입을 명시해주지 않아도 되기 때문에 빠르게 코드를 작성할 수 있습니다.
-
단점
- 실행 도중에 변수에 예상치 못한 타입이 들어와 타입에러가 발생할 수 있습니다.
정적 타입
-
컴파일 시 변수의 타입이 결정되는 언어를 의미합니다.
-
변수에 들어갈 값의 형태에 따라 직접 변수의 타입을 명시해 줘야 합니다.
-
장점
- 타입 에러로 인한 문제점을 미리 발견할 수 있어 타입의 안정성이 높습니다.
- 컴파일 시에 미리 타입을 결정하기 때문에 실행속도가 빠릅니다.
-
단점
- 매번 코드 작성 시 타입을 결정해줘야 하는 번거로움이 있습니다.
-
하지만 타입스크립트는 명시적으로 타입을 선언해 줘야 할 때도 있지만, 자동으로 타입을 추론하는 경우도 있습니다.
-
타입을 명시적으로 선언하는 경우 타입 어노테이션이라고 하며
value : type의 형태로 사용하며 타입스크립트가 추론하도록 코드를 작성하는 것이 좋다고 합니다.
타입 자동변환
- 자바스크립트는 타입을 자동으로 변환하지만, 타입스크립트는 이 경우 에러를 발생시킵니다.
타입 확인 시점
-
앞에서 말했지만 타입스크립트는 컴파일 2단계에서 코드의 타입을 확인합니다.(컴파일 단계에서 타입을 확인) 따라서 미리 문제를 확인할 수 있고, 타입스크립트를 사용하는 큰 이유 중 하나입니다.
-
반면에 자바스크립트는 프로그램을 실행하는 시점. 즉 런타임 시점에서 코드의 타입을 확인합니다.
에러 검출 시점
-
타입스크립트는 컴파일 시점에 문법 에러와 타입 관련 에러를 모두 검출합니다.
-
반면에 자바스크립트는 런타임에 예외를 던지거나, 암묵적 형변환을 수행합니다. 즉 프로그램을 실행해야만 문제가 있는지 확인할 수 있습니다. (장단점이 있지만 단점이 더 큰듯)
정리
-
자바스크립트와 타입스크립트를 비교하며 공부하다 보니 타입스크립트를 많은 사람이 왜 사용했는지 알게 되었고, 타입스크립트가 어떻게 동작하는지 시스템에 대해 알게 되었습니다.
-
비록 이제 시작했지만, 프로젝트에 타입스크립트를 적용할 때 확실히 이해하고 적절한 타입을 사용할 수 있도록 타입스크립트에 대한 기본을 잘 쌓아야겠습니다.
참고
