[TypeScript] TypeScript ?

 

TypeScript란?

 

• JS 기반의 정적 타입 문법을 추가한 언어
• TS는 상위 확장자 (슈퍼셋) JS 엔진을 사용
• 자신이 원하는 변수의 타입을 직접 정의하고 프로그래밍하면 JS로 컴파일되며 실행

컴파일? 
쉽게 말해 사람의 언어를 컴퓨터가 이해할 수 있는 언어로 바꿔주는 과정
TS는 JS와 달리 브라우저에서 실행하기 위해 이런 변환 과정이 필요

 

 

TypeScript 동작 과정

1. TS 언어로 코드를 작성
2. 작성한 코드는 타입 스크립트 컴파일러인 tsc를 통해 파싱 과정을 거쳐 타입 스크립트 AST 코드로 변환
3. 파싱 된 코드에서 타입을 체크하는 과정을 거침
4. TS AST 코드를 JS 코드로 변환
5. JS 코드를 JS AST 코드로 파싱
6. JS AST를 바이트 코드로 변환
7. 런타임 실행 환경에서 바이트 코드 실행

이 떄, 1~4 과정은 타입 스크립트 컴파일러에서,

5~7 과정은 JS 런타임에 의해 수행

 

AST (Abstract Syntax tree)
추상화 문법트리
- 프로그래밍 언어를 컴파일러를 통해 파싱 한 뒤, AST의 자료 구조 형태의 코드로 만들어짐

 

 

 

장단점

장점

🔹 타입 명시 및 검사 과정을 통한 컴파일 단계에서의 오류 감지

🔹 코드 가독성 향상 및 유지보수 용이

🔹 코드 품질 향상

 

단점

🔹 타입 정의에 대한 추가 작업 필요

🔹 초기 세팅의 어려움

 

 

 

 

 

TypeScript와 JavaScript 차이

✔️ 정적 vs 동적 타입 언어

TypeScript	JavaScript
🔹 JavaScript 의 단점 중 하나인 동적으로 타입을 지정(변수의 타입이 실행 시간에 결정)하는 특징을 보완하며 등장 🔹 변수의 타입을 명시적으로 지정해 사용하는 정적 타입 언어 🔹 컴파일 단계에서 타입을 확인 > 코드 작성 중 타입 오류를 방지하는 기능인 'Type Annotation'을 활용해 에러 발견에 도움	🔸변수의 타입이 실행 시간에 결정되는 동적 타입 언어 🔸유연하고 배우기 쉬운 장점 🔸런타임 에러 발생 가능성 ↑

 

예시코드

// Javascript (동적타입)
const sum = (a, b) => {
    return a + b;
}
sum('10', '20');  // 1020
sum(10, 20); // 30 

// Typescript(정적타입)
const sum = (a: number, b: number) => {
    return a + b;
}

sum(10, 20); // 30

 

 

✔️ 컴파일 언어 VS 인터프리터 언어

TypeScript	JavaScript
🔹 컴파일 언어 🔹 코드 전체를 컴퓨터가 이해할 수 있는 언어로 변환하는 과정 → 인터프리터 언어에 비해 시간 소요 🔹 런타임 상황에서는 변환 필요 X → 빠름	🔸인터프리터 언어 🔸코드를 한 줄씩 읽어가며 명령을 처리 🔸코드가 즉시 실행되기 때문에 컴파일 언어에 비해 빠름

 

 

✔️ 학습 난이도

TypeScript	JavaScript
🔹 타입의 제한을 받아 자료형을 비롯한 TS의 기능들을 익힐 필요성 존재 🔹 빠르게 데이터 구조를 파악하기에 용이	🔸타입에 제한이 없어 유연한 언어 🔸TS에 비해 난이도가 낮지만, 데이터의 자료를 찾아내기 위한 시간 소요

 

 

 

 

 

 

https://typescript-kr.github.io/

TypeScript 한글 문서