[ 3D Web : Front&Back_Type Script ] 타입스크립트의 정의*동작원리*특징

 

 

 

[ 3D Web : Front&Back_Type Script ] 

타입스크립트의 정의*동작원리*특징

 

---

∇ 타입스크립트 :  정의  * 동작원리 * 특징

목  차

1. 타입스크립트(TypeScript)란?

2. 타입스크립트(TypeScript) 동작 과정.
    2-1. 타입스크립트 동작 과정 및 요약
    2-2. 타입스크립트 동작 과정에 대한 기타 참고사항
    
3. 타입스크립트 특징   
    3-1. 타입스크립트는 컴파일 언어이자, 정적인 타입(static Type)입니다.
    3-2. 객체지향 프로그래밍을 지원합니다
    3-3. 자바스크립틔 슈퍼셋

 

 

---

Ⅰ. 타입스크립트(TypeScript)란?

---

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

 

 

---

Ⅱ. 타입스크립트(TypeScript) 동작 과정.

---

 

타입스크립트 동작 과정

 

 

 

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

---

 

        1. 개발자가 '타입스크립트 코드'로 작성을 합니다.

        2. 작성한 타입스크립트 코드는 ' 타입스크립트 컴파일러(tsc)' 를 통해 파싱하여 

                        '타입스크립트 AST 코드' 로 반환됩니다.

        3. '타입 검사기(Typechecker)' 를 통하여 파싱 된 '타입스크립트 AST 코드'의 타입을 체크합니다.

        4. 타입스크립트 AST의 코드를 '자바스크립트 코드'로 변환합니다.

 

 

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

 

 

        5. 자바스크립트 코드를 '자바스크립트 AST 코드'로 파싱합니다.

        6. 자바스크립트 AST를 '바이트코드'로 변환됩니다.

        7. 런타임 환경에서 바이트 코드를 실행합니다.

 

 

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

 

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

      

 

---

 

 

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

---

 

    § 타입스크립트를 부라우저에서 실행시키려면,  '자바스크립트 코드'로 변환하여 수행되어야 합니다.

         [ 타입스크립트만으로는 실행이 불가능.]

 

    § 타입스크립트는 '컴파일 단계'에서 타입을 검사하여 사전에 오류 발견이 가능합니다.

         [ JS의 경우 인터프리터 언어로, '런타임' 단계에서 오류가 발견이 됩니다.]

 

    § 타입스크립트는인터프리터 언어가 아닌, '컴파일 언어' !

            - JS는 언어의 변환없는 인터프리터 언어이고,

            - TS는 컴파일러가 필요하며 변환이 필요한 컴파일 언어입니다.

 

 

    ▷ ++

 

               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 )

 

 

 

---

 

 

Ⅲ. 타입스크립트(TypeScript) 특징.

---

 

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

💡 자바스크립트에서는 어떤 타입을 반환하는지에 대해 명시하지 않는 동적 타입이였습니다.

이에 반해,

타입스크립트는 컴파일 단계에서 타입을 체크하며,
정적타입으로써 타입에 대해 명시를 하여 발생하는 오류에 대해서 사전에 줄여줍니다.

              

   ◎ 코드의 가독성을 높여줍니다.

   ◎ 자바스크립트의 단점인 "타입 안정성"을 커버해줍니다.

 

 

        ++타입이란?

              : 기존 자바스크립트 내에서 'var'로 동적 타입이 이루어지던 것에 대해,

                    타입스크립트에서는 자료형(string, number, object) 에 대해서 정적 타입을 사용합니다.

 

// 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 . 객체지향 프로그래밍을 지원합니다.

 

   ☆ 타입스크립트(TS)는 JS.ES6에서 새롭게 사용된 문법을 포함하고 있으며

          클래스,인터페이스,상속,모듈 등과 같은 객체지향 프로그래밍 패턴을 제공합니다.

 

 

---

Ⅲ - 3 .자바스크립트의 슈퍼셋 !

 

 

 

         ★  "슈퍼셋"은 상위 확장의 개념을 의미합니다.

                       == TS(타입스크립트)는 JS(자바스크립트)의 모든 기능을 사용 가능하며,

            이외에 타입스크립트만의  클래스 * 인터페이스 등 객체지향 프로그래밍 패턴이 모두 사용가능한 것을 의미합니다.

 

 

 

 

---