TypeScript 동작 원리와 생태계 이해하기

 

1. ECMA에서 이미 표준화한 JavaScript가 있는데 TypeScript가 필요한 이유는 무엇입니까?
2. 브라우저에서 TypeScript 실행 방법
3. 타입스크립트 동작 원리
4. 타입스크립트 생태계
   1. IDE
   2. 프론트엔드 프레임워크
   3. 라이브러리

 

---

 

ECMA에서 이미 표준화한 JavaScript가 있는데 TypeScript가 필요한 이유는 무엇입니까?

=> JavaScript는 동적으로 유형이 지정되는 언어 특성 런타임에 오류가 발생할 때까지 이를 허용하지 않고, 개발 중에 유형 불일치 오류가 발견하여 버그를 해결하기 위해

 

 

브라우저에서 TypeScript 실행 방법

• ECMAScript는 JavaScript 사양입니다. TypeScript도 ECMAScript를 준수한다.
• ECMAScript는 브라우저에서 호환하여 실행할 수 있게 만든 JavaScript 사양일뿐, 브라우저에서 실행하는 언어나 프로그램이 아니다.
• 브라우저 는 렌더링 엔진과 javaScript엔진만 가지고 있어서 HTML, CSS, JavaScript만 해석이 가능하기 때문에 TypeScript는 JavaScript 변환 후 브라우저는 JavaScript 엔진을 통해 을 ECMAScript 코드를 해석하고 직접 실행한다.

 

 

타입스크립트 동작 원리

• typescript는 브라우저에서 읽을 수 있는 코드가 아니다.

• typescript는 타입체크 역할만 하고, 실제 트랜스파일러가 동작할때 typescript코드를 javascript로 변환하여 사용한다.

• Typescript → AST(추상 문법 트리) → 타입 검사 → 검사 완료 → Javascript (코드 변환 완료)
  → 검사 실패 → 컴파일 종료
• Javascript → AST(추상 문법 트리) → 바이트 코드로 변환

• 바이트코드는 자바스크립트 엔진에 의해 실행된다.
  자바스크립트 엔진은 Node.js와 Browser에서 동작 하기 때문에 콘솔이나 크롬 등에서 파일을 실행할 수 있다.
• 참고자료 : https://pks2974.medium.com/v8-%EC%97%90%EC%84%9C-javascript-%EC%BD%94%EB%93%9C%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EC%A0%95%EB%A6%AC%ED%95%B4%EB%B3%B4%EA%B8%B0-25837f61f551

 

 

 

타입스크립트 생태계

IDE

• IDE(통합 개발 환경)을 포함한 다양한 도구에 타입 정보를 제공하여 추가적인 개발 생산성을 제공한다.
  • 예) visual Studio Code에서 typescript 관련 플러그인과 내장 프로그램 지원
  • https://hyundaiht.atlassian.net/wiki/spaces/~63d092c669f341de3f3c9f89/pages/435716329

프론트엔드 프레임워크

• React, Vue, Angular 등 프레임워크에서 개발 환경 지원한다.
  • 예) 타입스크립트와 리액트를 접목하여 jsx 문법에 타입 시스템 지원

const App: React.FC<AppProps> = ({}) => {}

라이브러리

• 다양한 라이브러리에서 지원
  • Webpack, Babel, jest, eslint 등

"@types/react": "^17.0.16",
"@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.8",
"@types/styled-components": "^5.1.12",
"@types/webpack": "4",
"@types/webpack-dev-server": "^3.11.5",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",