본문 바로가기

Frontend/Typescript

타입스크립트 개론

타입스크립트 강의도 듣고, 책도 읽었는데, 아직도 감이 안 잡힐 수도 있다.

내가 그랬다.

코드를 작성하긴 하는데, 왜 에러가 나는지 모르고, 왜 이게 잘 되는지도 모르는 신기한 언어이다.

그래서, 저번에 한 입 크기로 잘라먹는 리액트 강사님이 이번에 한 입 크기로 잘라먹는 타입스크립트라는 강의를 내셨다고 해서 바로 수강 신청해버렸다.

완강하고 나서 이 글을 쓰는데, 진짜 최고다.

다른 타입스크립트 강의를 들어보면, 타입을 쓰는 방법을 알려주고 왜 그렇게 쓰는지는 알려주지 않는다.

그래서 왜 타입을 그런 방식으로 써야 하는지 항상 의문이었다.

 

이 강의를 듣기 전, 이펙티브 타입스크립트 책을 읽어보게 되었다.

이 책은 심화적인 타입스크립트 공부를 하는 사람들에게 좋다고 한다.

근데 나한테는 맞지 않았다.

한 입 크기로 잘라먹는 타입스크립트와 비교해보자면, 이펙티브 타입스크립트 책은 타입을 쓰는 방법과 해당 타입을 왜 쓰는지에 대한 표면적인 이유를 알려주긴 하지만, 나에게는 부족한 설명이었다.

한 입 크기로 잘라먹는 타입스크립트와 이펙티브 타입스크립트는 비슷한 설명을 되게 다르게 풀어냈는데, 나에게는 한 입 크기로 잘라먹는 타입스크립트가 더 이해가 잘 됐다.

결론을 말하자면, 이 강의를 먼저 듣고 나서 이펙티브 타입스크립트 책을 읽으면 타입을 해석하는 관점 자체가 다를 것이라고 확신한다.

그래서 나도 아마 이펙티브 타입스크립트 책을 다시 읽고 블로그에 글을 올리지 않을까 싶다.

 

타입스크립트 개론

자바스크립트는 프로그래머가 쉽고 빠른 프로그램을 작성하기 위해 만들어진 언어이다.

자바스크립트의 특징으로는 유연한 문법, 자유로움 등이 있는데, 이로써 자바스크립트에서 버그 발생 가능성이 높아졌다.

 

타입스크립트는 자바스크립트에 타입을 정의하는 문법을 추가한 것이다.

타입스크립트는 자바스크립트의 한계를 극복하기 위해서 등장했다.

 

타입 시스템 

모든 프로그래밍 언어는 타입 시스템을 가지고 있다.

타입 시스템이란 값들을 어떤 기준으로 묶어서 타입을 규정할 것인지, 코드의 타입을 언제 검사할지, 어떻게 타입을 검사할지 등의 타입 관련된 문법 체계이다.

자바스크립트의 경우, 변수의 타입이 하나로만 고정되는 것이 아니라, 아무 타입의 값이나 자유롭게 담을 수 있다.

동적 타입 시스템을 따르는 언어에서 에러가 발생할 코드를 작성하면 실행 후에 에러가 났다는 것을 알려준다.

let a = 'hello';  // string
a = 10;  // number

a.toUpperCase();  // 코드 실행 후 Type Error 발생

 

하지만, 정적 타입 시스템을 따르는 언어들은 코드 실행 이전에 모든 변수의 타입을 결정한다.

따라서 모든 변수의 타입을 다 지정해주어야 한다.

정적 타입 시스템을 따르는 언어에서 에러가 발생할 코드를 작성하면 실행 이전에 에러를 보여준다.

 

타입스크립트의 타입 시스템

타입스크립트의 타입 시스템에 대해 알아보자.

타입스크립트의 타입 시스템은 조금 특이한데, 정적 타입 시스템동적 타입 시스템을 합친 것과 같다.

 

타입스크립트는 변수의 타입을 실행 전에 결정하고 타입 오류를 실행 전에 검사한다.

이는 동적 타입 시스템만을 따르는 언어의 불안정성을 해결한 것이다.

그리고, 이전에 보았던 정적 타입 시스템만을 따르는 언어와는 다르게, 모든 변수에 타입을 일일이 지정할 필요가 없다.

이는 타입스크립트가 알아서 타입을 추론하기 때문이다.

이를 점진적 타입 시스템이라고 한다.

 

 

타입스크립트의 동작 원리

대부분의 프로그래밍 언어의 동작 방식은 아래 사진과 같다.

 

자바스크립트의 컴파일 과정을 알아보자.

자바스크립트는 먼저 코드를 추상 문법 트리로, 그 다음에는 추상 문법 트리를 바이트 코드로 변환한다.

추상 문법 트리는 아래와 같다.

이번에는 타입스크립트의 컴파일 과정에 대해서도 알아보자.

타입스크립트컴파일하면 바이트코드가 만들어지는 것이 아니라 자바스크립트 코드가 생성된다.

이때 생성된 자바스크립트 코드는 타입 검사를 통과한 안전한 자바스크립트 코드이다.

타입스크립트 코드에 작성한 타입자바스크립트 코드로 변환 시 사라지기 때문에 프로그램 실행에 영향을 미치지 않는다.

'Frontend > Typescript' 카테고리의 다른 글

제네릭  (0) 2023.06.20
인터페이스와 클래스  (0) 2023.06.20
함수와 타입  (0) 2023.06.20
타입스크립트 이해하기  (0) 2023.06.20
타입스크립트 기본  (0) 2023.06.20