[220609] 타입스크립트 개발환경 만들기

라이브러리 설치

언제나 그랬듯 새로운 기능을 위해 라이브러리를 설치해주자.

$ npm init -y
$ npm install -D typescript ts-node @types/node

 

 

이제 해야할것

자바스크립트는 해석해주는 프로그램이 브라우저, nodejs가 있지만

타입스크립트를 해석해주는 프로그램이 없어서 런타임이 없다.

리액트는 웹팩을 통해 번들링을 해서 나온 자바스크립트 파일로 브라우저가 실행해주는것처럼,

타입스크립트도 번들링이라는 작업을 해서 자바스크립트로 바꿔줘야함.

 

 

 

타입스크립트 실행하기

ts-node는 타입스크립트를 알아듣는 실행기. 개발용이라서 배포는 안됨.

-D는 디렉토리 내에서 선언. -g는 전역적으로 선언.

npx는 패키지를 임시 설치해서 실행하는 npm 소속 도구.

$ npx ts-node index.ts

 

 

번들파일을 생성해주는 tsconfig.json

웹팩에서 번들을 진행할때를 생각하자
웹팩이 여러 파일들을 모아서 하나의 번들 파일로 만들어줬었다.
(변환전) index.js -> webpack.config.js -> (변환후) /dist/app.js
tsconfig.json도 같은 역할

필요할때마다 검색해서 찾아서 사용하는걸로 충분.

//tsconfig.json

{
  "compilerOptions": {
    
    //현재 디렉토리 안에 번들파일 만들래
    "outDir": "./dist/",

    // import React from 'react'
    // -> const React = require('react').default
    // default 문법 생략하고 import 문법을 사용할 수 있게함
    "esModuleInterop":true,

    // 공홈에서는 엄격한 유형검사를 한다고함.
    // 업데이트하면 새로운 부분에서도 유형검사오류가 생길 수 있음
    "strict": true,

    // json 파일이 있는곳 기준으로 잡음
    "baseUrl": ".",

    // type형태는 어딜 바라볼거니 & 내가 쓰고 싶은 곳 지정
    "typeRoots":["./node_modules/@types","./@types"],

    // 어느 디렉토리부터 시작할거니
    // src안에 있는 모든 파일을 볼게
    // 리액트랑 사용할때는 주의해야함
    // 번들하기전엔 알아듣는데 번들한 후에는 웹팩이 못 알아들음
    // 웹팩에서도 설정해줘야함
    "paths": {
      "@core/*": ["src/core/*"],
      "*":["@types/*"] //typeRoot 설정한 후에 여기도 지정해줘야함
    },

    // 얘도 모듈 해결
    // 'node'Node.js의 CommonJS 구현을 위해 사용
    "moduleResolution": "node",

    // json 모듈 해결
    //'.json' 확장자를 가진 모듈을 가져올 수 있다.
    "resolveJsonModule": true
  }
}

이제 build해서 번들파일을 만들어주자

tsconfig.json파일이 없으면 build가 불가능하다.

$ npx tsc --build

 

 

경로를 인식하는 tsconfig-paths

엄. 실행이 안된다. paths를 번들하고난 후는 인식을 못하는것 같다.

tsconfig-paths 라이브러리를 설치해보았다.

설치한 후 라이브러리를 사용하면 무사히 파일이 실행됨

$ npm install -D tsconfig-paths

// $ npx ts-node -r tsconfig-paths/register [파일명]
$ npx ts-node -r tsconfig-paths/register ./src/core/index.ts

저 긴 코드를 매번 적기 귀찮으니까 package.json에 등록해서 단축어로 사용하자

$ npm run dev:ts ./src/core/index

 

 

외부라이브러리 타입스크립트에 설치하기

유명한 라이브러리들( 예: express ) 빼고는 구현이 안 되어있음.

유명한 라이브러리들은 오류메세지를 읽다보면 대신해서 설치하는 방법을 알려준다.

 

@types를 사용한 라이브러리들은 디렉토리를 따로 만들어서 관리하는 편이 좋다.

d는 declare의 약자.

declare은 선언하다-라는 뜻답게, 전역적으로 사용할 수 있게 설정해준다.

declare module "hex-to-binary";

// IBlock이란 인터페이스를 전역적으로 사용할 수 있게 된다
declare interface IBlock {}