TypeScript) tsconfig.json 설정 및 자동화

1. npm run build 명령어 설정하기

 npm run build

//TS 파일 위치 알려주기
{
    "include": ["src"], // src의 모든 파일 확인하기
    "compilerOptions": {
        "outDir": "build" // JS 파일이 생설될 폴더 지정
    }
}

• package.json에 scripts 수정하기

{
  "name": "typechain",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "typescript": "^5.6.2"
  }
}

• build 폴더 내의 index.js 파일 확인하기

• TS의 파일이 JS로 변환되어있음
• TS 파일

const hello = () => "hi";

• JS 파일
• TS가 자신의 코드를 컴파일해서 낮은 버전의 JS로 바꿔준 것



• 버전 설정
• ES3: const가 없고 var가 존재

//TS 파일 위치 알려주기
{
  "include": ["src"], // src의 모든 파일 확인하기
  "compilerOptions": {
      "outDir": "build", // JS 파일이 생설될 폴더 지정
      "target": "ES3" // TS가 바꿔줄 JS의 버전
  }
}

• ES6 : const, 화살표 함수가 존재

//TS 파일 위치 알려주기
{
  "include": ["src"], // src의 모든 파일 확인하기
  "compilerOptions": {
      "outDir": "build", // JS 파일이 생설될 폴더 지정
      "target": "ES6" // TS가 바꿔줄 JS의 버전
  }
}

• ES3 설정 후 확인하기

class Block {
    constructor(private data: string) {}
    static hello() {
        return "hi";
    }
}

2. lib

• ES6 : ES6를 지원하는 환경

• DOM : 브라우저 위에서 실행

//TS 파일 위치 알려주기
{
  "include": ["src"], // src의 모든 파일 확인하기
  "compilerOptions": {
      "outDir": "build", // JS 파일이 생설될 폴더 지정
      "target": "ES6", // TS가 바꿔줄 JS의 버전
      "lib": ["ES6", "DOM"] // JS가 어디에서 동작할지 설정
  }
}

• TS가 브라우저의 API와 타입들을 알고 있어서 자동 완성을 제공함

• ctrl + 클릭

3. 타입 정의를 써야하는 이유

• src내에 myPackage.js 만들기

export function init(config) {
    return true;
}
export function init(code) {
    return code+1;
}

• index.ts에서 사용해보기

import {init} from "myPackage";

{
  "include": ["src", "src/.myPackage.js"],
  "compilerOptions": {
      "outDir": "build", 
      "target": "ES6", 
      "lib": ["ES6", "DOM"],
      "strict": true, // 매우 보호해줌
  }
}

4. JS 허용하기

• myPackage.d.ts 삭제하기

{
  "include": ["src", "src/.myPackage.js"], 
  "compilerOptions": {
      "outDir": "build", 
      "target": "ES6",
      "lib": ["ES6", "DOM"], 
      "strict": true, // 매우 보호해줌
      "allowJs": true, // TS안에 JS 허용
  }
}

• JS 허용됨

import { init, exit } from "./myPackage";

5. JS Doc

• 코멘트로 이루어진 문법

• JS 허용하고 함수 바로위에 코멘트 달아주기

• TS가 코멘트를 읽고 타입을 확인해줌

//@ts-check

/**
 * @param {object} config
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns {void}
 */
export function init(config) {
    return true;
}
export function exit(code) {
    return code + 1;
}

//@ts-check

/**
 * @param {object} config
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns {Boolean}
 */
export function init(config) {
    return true;
}

/**
 * @param {number} code
 * @returns {number}
 */
export function exit(code) {
    return code + 1;
}

6. package.json에 설정 추가하기

• Node.js로 build/index/js 실행 설정

{
  "name": "typechain",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "start": "node build/index.js"
    },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "typescript": "^5.6.2"
  }
}

• 필요 없는 파일 삭제

7. 실행하기

• Windows나 PowerShell에서 사용하는 방식

•  ; 
• 두 명령을 순서대로 실행하지만, 첫 번째 명령의 성공 여부에 관계없이 두 번째 명령이 실행

npm run build; npm start

• and 
• 첫 번째 명령이 성공한 경우에만 두 번째 명령이 실행

npm run build -and npm start

• 별도의 명령 실행
• 각 명령을 개별적으로 실행

npm run build
npm start

• Linux나 macOS의 Bash 셸에서 사용하는 방식

• && 
• 첫 번째 명령이 성공적으로 실행된 경우에만 두 번째 명령이 실행

npm run build && npm start

• TS 코드 → build/index.js 파일 생성 → node build/index.js 실행 : 비효율적

8. ts-node 설치하기

• 개발 환경에서만 사용이 가능함

• build 없이 TS 실행 가능함 = 컴파일 안하고 TS 코드를 대신 실행해줌

• build없이 빠르게 새로고침이 가능함

npm i -D ts-node

9. dev 설정 추가하기

{
  "name": "typechain",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "dev" : "ts-node src/index.js",
    "start": "node build/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "ts-node": "^10.9.2",
    "typescript": "^5.6.2"
  }
}

10. nodemon 설치하기

• 자동으로 커맨드를 재실행 해줌

• 서버를 재시작할 필요가 없음

npm i nodemon 

• package.json에 nodemon 설정 추가하기

{
  "name": "typechain",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "dev" : "nodemon --exec ts-node src/index.ts",
    "start": "node build/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "ts-node": "^10.9.2",
    "typescript": "^5.6.2"
  }
}

• dev로 실행하기

npm run dev

• 이 에러가 뜨면 비교하고 수정해도 의미 없고 그냥 덮어쓰면 해결됨!

• 수정하고 저장하면 자동 실행

console.log("bye");