[TS] 1. 타입스크립트 개론

타입스크립트의 탄생

2012년 덴마크 출신 MS 개발자 앤더스 하일스버그가 만듦

C#을 만든 사람이라 TS와 C#이 유사한 점이 꽤 있다.

 

 

타입스크립트는 자바스크립트의 확장판

오른쪽 TS에는 변수의 이름 뒤 콜론과 함께 변수의 타입을 정의 → 변수의 타입 고정

 

 

 

TS의 등장 배경

 

그런데 NodeJS 의 등장으로 웹 브라우저에서만 실행할 수 있었던 자바스크립트를 어디서든 실행가능하게 됨

 

 

 

→ 복잡한 대규모 애플리케이션을 JS로 개발하다보니, 유연성 → 버그 발생 증가, 프로그램 안정성 떨어짐

 

그래서 js의 기존 문법은 유지한 채 안정성만 추가 확보

 

 

 

JS의 단점과 TS의 장점

타입시스템

프로그램 안의 값과 표현식이 어떤 종류의 테이터(타입)인지 구분하고, 그 타입이 올바르게 사용되는지 검사하는 규칙의 모음

 

타입 시스템의 종류

• 정적 타입 시스템
• 동적 타입 시스템

 

동적 타입 시스템

변수의 타입을 코드가 실행되는 도중에 결정

 

장점

• 코드 작성이 빠르고 유연
• 초기 개발 진입 장벽이 낮음
• 상황에 따라 타입 자유롭게 변경 가능
• 리팩토링이나 스크립팅에 강함
  • 코드가 고정된 타입에 묶이지 않아서
  • 빠른 실험, 수정, 디버깅이 가능
  • 그래서 데이터 분석, 자동화 스크립트, 웹 크롤러 같은
  • 빠른 개발 주기가 필요한 작업에서 자주 쓰임
• 함수형/메타 프로그래밍에 유연
  • 실행 중에 새로운 속성이나 메서드를 추가할 수 있음

 

단점

• 런타임 에러가 많이 난다
• 실행은 되는데 오류가 남 → 코드 실행 전에 오류 발견 어려움

 

• 프로젝트가 커질수록 유지보수가 어려워진다
  • 변수 타입이 코드 중간중간 바뀔 수 있어서 변수 추적에 어려움
• 성능이 느림
  • 실행할 때마다 파이썬 인터프리터가 변수 타입을 계속 확인 → 정적 타입 언어보다 느림

 

정적 타입 시스템

 

→ 에디터 상에서 바로 빨간줄로 오류를 발견할 수 있음

정적 타입 시스템의 단점

• 코드 작성이 번거롭고
• 유연성이 떨어진다
• 개발 초기 속도가 느리고
• 복잡한 타입 설계 필요

타입스크립트와 점진적 타이핑

 

자바스크립트의 동적 타입 시스템 + 자바의 정적 타입 시스템 혼합

 

자바의 정적 타입 시스템 처럼	자바스크립트의 동적 타임 시스템 처럼
사전에 오류 보여줌	모든 변수에 일일이 직접 타입 명시 안해도 됨 → 변수의 타입을 직접 정의하지 않아도 변수에 담기는 초기값을 기준으로 자동으로 타입 추론

 

⇒ 점진적으로 타입을 결정한다 ⇒ 점진적 타입 시스템

 

타입스크립트의 동작원리

일반 프로그래밍 동작원리

 

일반적으로는 컴퓨터가 알아들을 수 있게 컴파일러가 코드를 바이트코드로 변환한다.

 

 

이 과정에서 먼저 AST 라는 추상문법트리로 변환한다.

 

 

이런식으로 AST 로 변환

 

그 후 이 AST 트리를 바이트 코드로 변환 후에 종료된다.

 

function add(a, b) {
	return a + b;
}

 

를 AST로 만들면

FunctionDeclaration
├── Identifier: "add"
├── Parameters: [a, b]
└── BlockStatement
    └── ReturnStatement
        └── BinaryExpression (+)
            ├── Identifier: a
            └── Identifier: b

// 어떤 JavaScript 연산자든 BinaryExpression으로 표현
const expr1 = a + b;        // BinaryExpression (+)
const expr2 = a - b;        // BinaryExpression (-)
const expr3 = a * b;        // BinaryExpression (*)
const expr4 = a ** b;       // BinaryExpression (**)
const expr5 = a % b;        // BinaryExpression (%)
const expr6 = a == b;       // BinaryExpression (==)
const expr7 = a === b;      // BinaryExpression (===)
const expr8 = a instanceof b; // BinaryExpression (instanceof)
const expr9 = a in b;       // BinaryExpression (in)

 

아래 그림처럼 AST 가 완성된다.

 

 

타입스크립트의 동작원리

1. 타입스크립트 코드를 AST 트리로 변환
2. 원래는 그 다음 AST → 바이트 코드로 변환하는데, TS는 이 AST를 보고 코드 상에 오류가 없는지 검사하는 타입 검사가 수행

 

만약 타입 검사 시 타입 오류가 있다면 컴파일이 중단

 

정상적인 코드라면 타입 검사를 성공적으로 통과하고, 그 다음에 AST → 자바스크립트 코드로 변환 (바이트 코드가 아님)

 

 

이후 다시 자바스크립트 코드로 AST를 만든 후 바이트 코드로 변환

 

타입 검사가 완료된 후 변환된 자바스크립트에는 타입 관련 코드가 모두 사라짐

 

 

결국 타입스크립트로 작성한

 

타입 관련 코드들은 결국 자바스크립트로 변환될 때 사라지게 되어 프로그램 실행에 영향 X

 

 

 

 

 

 

참고

타입스크립트를 소개합니다 - 타입스크립트 개론