[TypeScript] 실행과 시작

타입스크립트 시작

개요

• 자바스크립트 + 타입 시스템을 추가한 언어
• TypeScript로 작성된 코드를 실행하려면,
  TypeScript 코드를 JavaScript 코드로 ‘변환’해주는 작업이 필요!

• TypeScript의 간단한 구동

  TS Playground - An online editor for exploring TypeScript and JavaScript

타입스크립트 설치

1. 작업용 폴더 하나 생성

2. npm 패키지 초기화
   -y 옵션: 별도의 설정을 묻는 과정 없이, 기본값으로 초기화

    npm init -y
   

   • 확인이미지

     

3. 개발모드로 타입스크립트 설치

    npm install typescript --save-dev
   

   • 확인이미지

     

     

4. 타입스크립트 초기화

    npx tsc --init
    node ./node_modules/typescript/bin/tsc --init # 다른 방식
   

   • 확인 이미지

     

5. ts 파일을 하나만들고 실행!

---

타입스크립트 기본

• index.ts 파일을 생성하고, 수행함.
• TypeScript는 기본적으로, 웹에서 실행할 수 없으므로 변환 과정 필요!

트랜스 컴파일

• TypeScript → JavaScript
• 트랜스 컴파일러
  • tsc: 트랜스 컴파일을 수행하는 도구
  • tsconfig.json 파일에 기반하여 컴파일 수행

• 트랜스 컴파일 방법

    npx tsc ts파일경로
  

  • 확인 이미지

    

  → TypeScript

    let num1: number = 10;
    console.log(num1);  
  

  → JavaScript

    var num1 = 10;
    console.log(num1);  
  

• 하위의 모든파일을 트랜스 컴파일
  → tsconfig.json의 include, exclude를 기반으로 컴파일

    npx tsc  
  

tsconfig.json

• 각각의 속성이 의미하는 바가 무엇인지 확인
• ctrl + space 로 완성시킬 값들을 확인할 수 있음.

target

• 컴파일된 JavaScript 코드가 호환될 ECMAScript의 버전을 지정
• “ESNext”: 최신 버전

  • 사용 예시

    target: ES2020로 설정하고, replaceAll()를 사용하면?

    

    replaceAll()은 ES2021 이후에 나와서 호환이 안됨!

outDir

• 컴파일된 JavaScript 파일이 출력될 폴더 지정

  • 확인 이미지

    

• [참고] 특정메서드가 호환되는지 확인

  “replaceAll”, Can I use… Support tables for HTML5, CSS3, etc

  

include

• 컴파일 대상 파일을 지정

exclude

• 컴파일에서 제외할 파일을 지정

---

타입스크립트 바로 실행

• 트랜스 컴파일의 과정을 거치지 않고,
  VSCode에서 바로 실행하는 방법에 대해 알아보자.
  1. 타입스크립트 패키지 설치

    npm i typescript
    npx tsc -v  # 버전 확인
  

1. 타입스크립트 노드 설치

    npm i ts-node
    npx ts-node -v # 버전 확인
   

2. [Extention] - Code Runner 설치

   

3. [설정] - settings.json에서 다음 코드 추가 후, 저장

   (1) 우측 위 버튼 클릭
   

   (2) “code-runner.executorMap”의 값 추가

   ...
   "code-runner.clearPreviousOutput": true, // 없으면 추가
   "code-runner.executorMap": {
        "typescript": "./learn-ts/node_modules/.bin/ts-node"
   },
   ...
      
   "code-runner.executorMap": {
        "typescript": "node -r ts-node/register"
   }, // 윈도우의 사용자 경우, 한글 깨짐 문제 발생시 사용  
   

4. 윈도우의 경우에는,
   타입스크립트와 관련된 패키지가 바로 담긴 위치에서 폴더를 열도록 함.

   

5. 실행 확인

   

---

타입스크립트 문법 종류

• 타입스크립트는 자바스크립트 + 타입 시스템을 추가한 언어
• 타입스크립트는 결국 값의 타입을 지정하는 것!
• 타입스크립트는 자바스크립트와 다르게, 정적 타입 시스템
• 종류

  • string, number, boolean, object, array, symbol,
    tuple, undefined, null, any, bigint

      {
        let name: string = "geoncoding";
        let age: number = 26;
        let bool: boolean = true;
            
        let obj: object = {};
        let arr: [] = []; // 배열을 지정하는 방법!
            
        let sym: symbol = Symbol("a");
        let und: undefined = undefined;
        let nul: null = null;
        let big: bigint = 100n;
      }
    

• 어렵다고 생각하는 이유?
  • 값의 타입을 지정하는 방법이 너무 많다!