[Typescript] 타입스크립트의 동작 원리

타입스크립트는 기존의 자바스크립트에 타입 개념을 추가한 언어로, 개발자가 코드를 더욱 예측 가능하고 유지보수하기 쉽게 도와줍니다.

 

타입스크립트가 동작하는 원리는 다음과 같습니다.

타입스크립트 코드 작성 -> 타입 검사/추론 -> 자바스크립트 코드로 변환 -> 실행

아래에서 자세히 살펴보겠습니다.

 

---

🌀 동작 과정

1. 타입스크립트로 코드 작성

• '.ts', '.tsx'와 같은 확장자를 가진 파일에 작성합니다.
• 파일 안의 변수, 함수 등은 각자의 타입과 함께 정의되어 있습니다.

 

2. 타입 검사

• 타입스크립트로 작성된 코드는 브라우저나 Node.js에서 실행할 수 없기 때문에 자바스크립트로 변환됩니다.
• 이때 자바스크립트로 변환하기 전에 타입스크립트 컴파일러(tsc, typescript compiler)는 타입 검사를 수행합니다.
• 파일 내에 존재하는 변수나 함수, 반환값이 올바른 타입을 가지고 있는지 확인합니다.

 

3. 타입 추론

• 타입스크립트는 타입을 명시적으로 지정해주지 않아도 초기화된 값을 기반으로 해당 값의 타입을 추론합니다.
• 그러나 의도하지 않은 타입이나 단순히 any와 같은 타입으로 추론될 수 있기 때문에 직접적인 확인 또한 필요합니다. 

 

4. 자바스크립트 코드로 변환(transpilation)

• 타입 검사 및 추론이 완료된 타입스크립트 코드를, 타입스크립트 컴파일러가 자바스크립트로 변환합니다.
• 이 과정을 통해 타입과 관련된 정보는 모두 제거되고 순수 자바스크립트 코드만 남게 됩니다.
• 이렇게 모든 단계를 통과하고 자바스크립트 코드로 변환되어, 최종적으로 기계어로 변환되는 과정을 컴파일이라고 합니다.

 

5. 코드 실행

• 위의 과정을 거친 코드가 브라우저나 Node.js와 같은 환경에서 실행됩니다.
• 이렇게 코드가 실행되는 때를 런타임이라고 합니다.

 

---

그림과 함께 설명을 보고 싶다면 다음 링크를 참고해주세요

 

---

읽어주셔서 감사합니다:)