TypeScript #15 | 블록체인 구현 - 초기 설정 튜토리얼 (1) (outDir, target, lib)

초기 설정

튜토리얼

1. $ npm init -y

   • package.json 객체 내의 "main" 쌍 삭제, "scripts" 수정

2. $ npm i -D typescript

3. src 폴더 생성

   • index.ts 파일 생성
   • index.ts 파일 내의 작은 함수 작성 const hello = () => "hi";

4. tsconfig.json 파일 생성

   • 이름은 변경될 수 없음
   • 해당 파일의 존재로 IDE 는 우리가 타입스크립트로 작업하는 것을 알게됌
   • 이제 자동완성 제공받을 수 있음, 우리가 타입스크립트로 작업하는 것을 IDE 가 알기 때문

5. tsconfig.json 파일 내용 작성

   1. 타입스크립트 파일 위치

   2. compilerOptions 지정 (객체)

      • "outDir" : "자바스크립트 파일이 생성될 디렉토리 지정" (키값 페어)
      • 타입스크립트 === 컴파일러, 타입스크립트 파일들을 이반적인 자바스크립트로 컴파일 시켜줍니다.

   3. package.json 의 scripts 작성 (객체)

      • "build": "tsc" (키값 페어)

   4. $ npm run build 현재까지의 설정 동작 확인

      • 컴파일된 파일 확인

        ~build/index.js
        
        var hello = function () { return "hi"; }

      • 타입스크립트가 코드를 낮은 버전의 자바스크립트로 컴파일 해준 결과

        • 어디서든 이해할 수 있는 더 호환성이 좋은 자바스크립트 코드로

      • 타입스크립트가 어떤 버전의 자바스크립트로 컴파일할지 설정 가능

        • compilerOtions 객체의 "target": "자바스크립트 버전" 키값 페어로
        • 'babel' 의 기능이 타입스크립트의 내장되어 있는 것과 비슷
          • 'babel' 의 기능 : 최신의 발전된 버전 코드를 작성후 브라우저 등과 호환되는 낮은 버전 코드로 변환

      • ES6 버전이 제일 이상적이다

        • 대부분의 nodeJS 와 브라우저가 ES6 지원하기 때문

   5. compilerOptions 객체의 "lib": [declaration files 런타입 환경 목록들] 설정

      • "lib": ["ES6", "DOM"]

개념

tsconfig.json 의 compilerOtions 객체

outDir

• 타입스크립트에서 자바스크립트로 컴파일되는 파일이 가는 폴더 지정

target

• 자바스크립트의 버전 지정

lib

• API 종류 등(JS API, DOM API, etc...) 어떤 환경에서 코드 실행하는지 지정
  • `"lib": ["ES6", "DOM"];
  • "lib" 설정을 따라서 ES6, DOM(localStorage, document, window, etc...) 등에 알맞게 자동완성 기능을 제공

참조 : 노마드코더 타입스크립트 강의