[TS] 타입스크립트(Typescript) 이해하기-1 (정의, 동작원리, 특징)

해당 글은 타입스크립트(Typescript)란 무엇이며, 어떻게 동작이 되고 어떠한 특징을 가지고 있는지에 대해 이해하기 위한 글입니다.

 

 

1) 타입스크립트(Typescript) 란?

---

💡 Microsoft에서 개발하고 유지/관리 되는 Apache 라이센스가 부여된 오픈 소스이다.
💡 타입스크립트는 자바스크립트의 슈퍼셋(Superset)이며, 자바스크립트에 '타입'을 부여한 언어를 의미한다.

 

2) 타입스크립트(Typescript) 동작 과정

---

1. 타입스크립트의 동작 과정 및 요약

---

1. 개발자가 '타입스크립트 코드'로 작성을 한다
2. 작성한 타입스크립트 코드는 '타입스크립트 컴파일러(tsc)'를 통해 파싱하여 '타입스크립트 AST 코드'로 변환된다.
3. '타입 검사기(Typechecker)'를 통하여 파싱 된 '타입스크립트 AST 코드'의 타입을 체크한다.
4. 타입스크립트 AST의 코드를 '자바스크립트 코드'로 변환한다.

-- 해당 과정까지는 '타입스크립트 컴파일러(tsc)'에 의해 수행이 된다.

5. 자바스크립트 코드를 '자바스크립트 AST 코드'로 파싱한다.
6. 자바스크립트 AST를 '바이트 코드'로 변환된다.
7. 런타임(runtime)이라는 실행환경에서 바이트 코드를 실행한다.

-- 해당 과정까지는 '자바스크립트 런타임(js 엔진, node.js)'에 의해 수행이 된다.

[ 요약 ] 
=> 자바스크립트 코드 -> (타입스크립트 컴파일러로 파싱) -> 타입스크립트 AST 코드 -> (타입 검사기로 체크) -> 자바스크립트 코드 -> (파싱) -> 자바스크립트 AST 코드 -> 바이트 코드 -> (런타임) -> 코드 실행

 

2. 타입스크립트 동작 과정에 대한 기타 참고사항

---

- 타입스크립트를 브라우져에서 실행 시키려면 '자바스크립트 코드' 로 변환하여 수행되어야 한다
(타입스크립트만으로는 실행이 불가능하다.)

- 타입스크립트는 '컴파일' 단계에서 타입을 검사하여 사전에 오류 발견이 가능하다
(자바스크립트 언어의 경우 인터프리티 언어로 ‘런타임' 단계에서 오류가 발견이 된다)

- 타입스크립트 IDE툴(VSCode, IntelliJ, ...)을 설치를 하면 미리 발생 가능한 오류에 대해서 확인이 가능하다.

- 타입스크립트는 인터프리터 언어가 아닌 컴파일 언어이다.
(자바스크립트는 언어의 변환없는 인터프리터 언어이고, 타입스크립트는 컴파일러가 필요하며 변환이 필요한 컴파일 언어이다)

 

[더 알아보기]
1. AST(Abstract Syntax tree) : 추상화 문법트리
- 프로그래밍 언어(고급언어)를 컴파일러를 통해 파싱하여서 AST의 자료 구조형태의 코드로 만들어진다.
- 참고 : 소스코드를 AST로 만드는 과정을 볼 수 있는 사이트 [ https://ts-ast-viewer.com/# ]

2.컴파일러(Complier)이란?
- 프로그래밍 언어(고급언어)를 컴퓨터가 이해 할 수 있는 기계어로 변환시키는 과정을 말한다.
ex) 소스코드 → 바이너리 코드으로 변환

3. 인터프리터(Interpreter)란?
- 프로그래밍 언어(고급언어)를 컴파일 변환 없이 바로 사용하는 언어를 말한다.
ex) 자바스크립트 . 

4.트랜스 파일러(Transplier)란?
- 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는것을 말한다 
ex) 바벨 (ES6+ 코드를 ES5로 트랜스 파일한다), Typescript(Type+Javascript -> javascript)

 

3) 타입스크립트 특징

---

1. 타입스크립트는 컴파일 언어이자  정적인 타입(Static Type)이다.

---

💡 자바스크립트에서는 어떤 타입을 반환하는지에 대해 명시하지 않는 동적 타입이였다. 이에 반해 타입스크립트는 컴파일 단계에서 타입을 체크하며, 정적타입으로써 타입에 대해 명시를 하여 발생하는 오류에 대해서 사전에 줄여준다.

• 코드의 가독성을 높여준다
• 자바스크립트의 단점인 타입 안정성을 보장해준다.

[ 더 알아보기 ]
타입 이란?
- 기존 자바스크립트 내에서 var로 동적 타입이 이루어지던 것에 대해, 타입스크립트에서는 자료형(string, number, object,....)에 대해서 정적 타입을 사용한다.

 

 

[예시] 동적 타입(js)과 정적 타입(ts)의 비교 예시 

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

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

sum(10, 20); // 30

 

2. 객체지향 프로그래밍을 지원한다

---

💡 타입스크립트는 ES6에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

 

 

3. 자바스크립트의 슈퍼셋이다.

---

💡 슈퍼셋은 상위 확장을 말하며, 타입스크립트는 자바스크립트의 모든 기능을 사용 가능하며 이외에 타입스크립트 만의 클래스, 인터페이스등 객체지향 프로그래밍 패턴이 모두 사용 가능한것을 의미한다

 

 

[참고] Typescript를 AST로 변환하는 과정을 알 수 있는 곳

TypeScript AST Viewer

 

 

[참고] typescriptlang - 타입스크립트를 자바스크립트로 변환과정을 알 수 있는곳

TS Playground - An online editor for exploring TypeScript and JavaScript

 

4) 오늘의 결론

---

💡 대부분의 회사에서 자바스크립트를 타입스크립트로 전환하는 작업을 많이 이루어지고 있다고 합니다.
그리고 stackoverflow에 관심 있는 언어로 꼽힌 타입스크립트에 대해서 주목해 볼 필요가 있다고 생각합니다.

 

오늘도 감사합니다😀