타입스크립트 -2 타입시스템과 타입스크립트 동작원리

Zn's Log·2023년 6월 16일
0

우당탕탕 TypeScript

목록 보기
2/3
post-thumbnail

자바스크립트의 한계

타입 시스템

타입시스템은 타입과 관련해서 지켜야 하는 규칙들을 모아둔 체계 이다.

예를 들어보자면
1. 여러 값들을 어떤 기준으로 묶어서 타입으로 정할지
2. 코드의 타입을 언제 검사할지
3. 코드의 타입을 어떻게 감사할지.. 등등

타입시스템은 변수의 타입을 결정하는 시기 에 따라서 정적 타입시스템과 동적 타입시스템 두가지로 나눌 수 있다.

정적 타입 시스템 : 코드 실행 이전 모든 변수의 타입을 고정적으로 결정. 아래 코드처럼 String, int 등으로 미리 고정.

동적 타입 시스템 : 코드를 실행하기 전에는 타입을 결정하지 않고 코드를 실행하고나서 유동적으로 변수의 타입을 결정하는 동적 타입 시스템이 있다.

자바스크립트는 동적 타입시스템으로, 미리 타입을 정의해 놓지 않아도 된다는 장점이 있다.

또 정의해둔 a를 문자로 바꿨다 숫자로 바꿨다 해도 문제가 생기지 않는다.

동적 타입 시스템을 쓸 때 생길 수 있는 오류

ppt를 보면 a는 문자였다가, 숫자로 바뀌게 된다. 하지만 문자열 함수인 toUpperCase()는 숫자에서 작동하지 않을 수 밖에 없다. 실행 전에 검사를 하지 못하면 나중에는 오류를 인지 못할 수도 있게된다.


사소한 오류때문에 잘 돌아가던게 갑자기 망가질수도 있다니... 개발자로서 상상만해도 무서운 이슈

이런 이슈는 정적타입 시스템이라면 코드 실행 전에 타입 오류를 보여줌으로써 잘못 사용했다는 것을 인지하게 해준다.

정적 타입 시스템의 단점

정적 타입 시스템은 말그대로 모든 변수에 타입을 정의해야한다면 코드의 양이 상당히 늘어나게 된다. (흠.. 하지만 자바 좋아하는 나에겐 딱히 단점은 아니고 체계적인 것 같아서 좋긴함.)

두둥 타입스크립트 등장

타입스크립트는 설계 당시 정적/동적과는 뭔가 다른듯한 특이한 타입시스템을 사용한다. 동적 타입 시스템과 정적 타입 시스템을 혼합한 듯한 타입시스템이라는데..


이와 같이 명시적으로 먼저 a의 타입을 정의할 수도 있고 -> 이런 경우 숫자타입에 없는 함수를 사용하면 에러를 띄워줌.


이와 같이 타입을 정의하지 않기도 한다 -> a가 숫자 타입이라고 인지해서 코드에 에러를 띄워준다.

이처럼 점진적으로 타입을 결정하는 시스템을 우리는 점진적 타입 시스템(Gradual Type System) 이라고 부르기로 했다.

타입스크립트 동작원리

일반적인 프로그래밍 언어의 동작 과정

사람이 일반적으로 작성하는 프로그래밍 언어는 컴파일러를 통해 바이트코드로 변환되는 과정(컴파일)을 거쳐 컴퓨터가 이해할 수 있게 만들어준다.

조금 더 구체적으로 말하자면 컴파일러는 작성한 코드를 바로 바이트코드로 변환해 주는 것은 아니고 그 전에 AST(추상 문법 트리) 라는 특별한 형태로 변환하긴 한다. 그 후에 다시 바이트코드로 변환이 가능한게 일반적인 프로그래밍 언어의 동작원리이다.

타입스크립트의 동작 과정

하지만 타입스크립트의 동작과정은 약간 다르게 흘러간다. 코드를 작성하면 추상문법트리까지 만들어지는 것은 똑같은데, 그 이후 이 AST를 보고 코드상에 타입 오류가 있는지를 검사하게된다.
검사를 하고 나서 오류가 없다면 AST를 JavaScript코드로 변환하게 된다.
wow! 딱 봐도 굉장히 독특하다. 정리해보자면

타입 스크립트 동작과정 정리

1. 타입스크립트 코드를 작성한다
2. 해당 코드를 바탕으로 AST로 변환된다.
3. AST를 바탕으로 타입을 검사한다.
4. 만약 타입 검사에 실패하면 그대로 컴파일을 종료시키고, 성공한다면 AST를 자바스크립트로 변환한다.
5. 변환된 자바스크립트는 다시 AST로 변환되고,
6. AST는 바이트코드로 변환되고
7. 바이트코드를 컴퓨터가 실행한다.

여기서 중요한 점!
타입스크립트는 자바스크립트로 변환되는 과정에서 타입 관련 문법들은 자동 삭제되고 우리가 보는 일반적인 자바스크립트 코드로 변경된다.

느낀 점

타입스크립트의 동작원리가 상당히 흥미로웠다. 오랫동안 인기가 많았던 자바스크립트를 아예 바꾸지 않고, 더 편리하게 사용하기 위해 고민한 흔적이 많이 보이는 것 같다.

Reference

0개의 댓글