개념

Kaia·2023년 8월 2일

typescript

목록 보기

1/4

💡 js에서 ts가 파생된 이유와 ts의 구동 방식에 대해 알아보자.

[1] javascript 사용

ECMAScript
- TC39(자바스크립트 운영위원회)에서 만든 javascript의 기반이 되는 언어 사양
매년 ECMAScript의 새로운 버전을 출시하면서 다양한 환경에서 새로운 버전과 이전 버전의 호환성을 유지하고, 새로운 기능을 추가해왔다.

바닐라스크립트

언어 확장이나 프레임워크 없이 사용하는 순수 자바스크립트

[2] javascript 한계

낮은 안정성
- 코드를 구성하는 방법에 제한이 없음
유지 보수의 어려움
- 언어 사양에 구성 요소(함수, 변수 등)의 표준이 없음 → JSDoc 표준으로 채택 but 주석일 뿐 강제성 없음

/*
 * @param {string}  p1 - string 매개변수.
 * @param {string=} p2 - 선택적 매개변수 (클로저 구문)
 * @param {string} [p3] - 또다른 선택적 매개변수 (JSDoc 구문).
 * @param {string} [p4="test"] - 기본값과 선택적 매개변수
 * @return {string} 이것은 결과 값입니다
 */
function stringsStringStrings(p1, p2, p3, p4) {}

[3] typescript 등장

자바스크립트의 상위 집합 / 타입이 있는 자바스크립트
typescript 고유 구문이 포함된 언어

1. 특성

타입/인터페이스 지정을 통해 코드 구성에 제한을 둠
- 1) 다른 코드에 영향을 주는 것을 제한함으로서 안정성 증가
- 2) 코드를 구조화하는데 도움
- 3) 문서화 역할 -> 유지 보수 용이

interface Painter {
	finish(): boolean;
    ownMaterials: Material[];
    paint(painting: string, materials: Material[]): boolean;
}

function paintPainting(painter:Painter, paint:string): boolean { /.../ }

개발자 도구 향상
- js는 내장된 모든 함수 자동 완성 -> ts는 member 기반으로 자동 완성

member

객체 혹은 클래스 내부에 정의된 함수 또는 변수

2. 구동

💡 (1) ts구문을 입력하면 타입을 검사한 후 (2)작성된 코드에 해당하는 js를 내보낸다.

타입 검사기 실행
- 타입 시스템(*후술) 기반으로 타입을 검사
컴파일러 실행
- 타입스크립트를 자바스크립트로 변환
- ts compiler는 타입 오류와는 상관없이 입력 파일로부터 js생성됨
- 대다수의 운영 프레임워크는 타입스크립트 컴파일러 대신 바벨과 같은 변환기를 사용함

3. 실행

타입스크립트 설치 후 tsc명령어로 컴파일러 실행

tsconfig.json

타입스크립트가 코드를 분석할 때 사용하는 설정을 선언

ex) 옵션 설정, 빌드 범위 지정, 기타 타입스크립트 구동 옵션들

Q1. 타입스크립트가 자바스크립트보다 느리다?

아래는 타입스크립스 동작 과정이다.

Typescript코드 작성
Typescript코드를 TSC가 추상 구문 트리(AST)라는 것으로 변환 (이 과정에서 공백, 주석 등 불필요한 정보들은 제거됨)
타입 검사기가 Typescript코드의 타입들이 정상적으로 작성됐는지 안정성 검사를 진행
타입이 안정적으로 작성됐으면 Typescript AST가 Javascript코드로 변환
변환된 Javascript코드가 다시 Javascript AST로 변환
이후 Javascript AST가 바이트코드로 변환
프로그램 실행

즉,

런타임은 느리지 않음 (즉 프로그램이 실행 중인 때는 느리지 않음)
빌드 시에 ts -> js로 컴파일 하는 과정에서 시간이 소요된다.

Q2. 컴파일? 트랜스파일? 런타임? 빌드타임?

compile
- 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것을 통칭 (개발 언어를 기계어로 컴파일하는 것은 엄밀히 말하면 트랜스 파일링)
- 예를 들어,
  - Java -> bytecode
  - c -> assembly
transpile
- 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환
- 즉, 로우 레벨 언어로 변환하는 것이다.
- 예를 들어,
  - C ++ → C
  - ES6 → ES5 (Babel)
  - typescript / coffeescript → Javascript
  - js → 기계어 (Babel, tsc, ESBuild)
  - sass / scss → css
compile error
- 컴파일 과정 중 소스 코드에 에러가 발생한 경우
  - ex) syntax error, type check error
build time
- 최적화, 번들링
- 즉, 빌드파일 만드는 과정
run time
- 컴파일을 마치고, 클라이언트에 의해 프로그램이 실행되는 때
run time error
- 프로그램 실행 중, 예외 상황으로 인해 실행 중에 오류가 발생한 경우
  - ex) 0나누기 오류, null참조 오류, 메모리 부족 오류 등

Q3. 타입스크립트는 자바스크립트에 무엇을 추가했는가?

= 자바스크립트에서 무엇이 바뀌었나?

타입과 인터페이스를 지정해서 사용한다.
따라서 동작 과정이 다르다.
1. 타입 검사기를 통해 구문의 타입 적합성 체크
2. 빌드 과정에서 ts → js 컴파일 단계가 추가됨

Kaia

다음 포스트

개념