[TypeScript] 타입스크립트 시작하기 - 설치 및 환경 설정 (ft. VSCode)

VSCode에서 타입 스크립트를 사용해보자.

우선 당연하게도 npm을 사용할 것이기 때문에 node.js가 있다고 가정하고, VSCode 역시 사용 중이라는 가정하에 진행한다.

일단 폴더를 하나 만들어주고 거기서 npm 환경을 만들어보자. (아래 블로그 참조)

https://mine-it-record.tistory.com/500

[VSCode] package.json 설정 - NodeJS를 사용한 npm 패키지관리

VSCode에서 프로젝트에 각종 확장 모듈등을 설치하고자 할때 NodeJS의 npm을 많이 사용하게 된다. 그리고 그러한 모듈들을 관리하고자 하는 역할을 하는 녀석인데 필요하기도하고 한번 정리하고 넘

mine-it-record.tistory.com

사실 글로벌로 설치하게되면 특정 폴더와 npm init 같은 설정은 딱히 필요가 없다.

어쨌거나 타입스크립트를 시작하는 단계로 글로벌 설치와 특정 폴더 package.json을 통해 관리하는 두 가지 방법에 대해 동시에 정리해두고자 한다.

우선 아래 명령어를 통해 typescript를 설치해주자.

// 글로벌(g) 설치
npm install -g typescript

// 해당 폴더(로컬) 설치
npm install typescript

블로그에서 지칭하기 쉽게 글로벌과 로컬로 지칭하도록 한다.

설치가 완료됐는지 그리고 버전이 몇인지 확인하기 위해 아래 명령어를 입력해보자.

// 글로벌
tsc -v

// 로컬
npx tsc -v

글로벌에 설치해뒀으면 바로바로 명령어로 접근을 해서 타입스크립트 명령어가 사용이 가능하지만,

그게 아니라 특정 폴더에 설치했으면 항상 앞에 npx를 붙여줘야한다.

여기서 npx는 다양한 역할이 존재하는데 그중에서도 해당 실행파일 위치를 자동으로 찾아가 실행시켜주는 역할이 있기 때문에 원래 ./node_module/.bin/... 까지 들어가서 실행시켜줘야 하는 행위를 저렇게 단축시켜서 제공해준다.

(한번 npm과 npx 차이와 역할에 대해 알아보는 시간을 갖는 것도 괜찮을 것 같다.)

자 이제 그다음으로 tsconfig.json이라는 파일을 만들어 줄 건데,

사실 그냥 파일을 만들어서 사용해도 좋지만 npm init처럼 자동으로 만들어 주는 명령어가 존재한다.

// 글로벌 (글로벌의 경우 해당 폴더로 가는 거 잊지 말자)
tsc --init

// 로컬
npx tsc --init

그런 이렇게 tsconfig.json이라는 파일이 자동으로 생기는 것을 볼 수 있는데,

그 안에 들어가 보면 어떤 설정을 할 수 있고 기본값이 어떻게 되어있는지 확인할 수 있다.

그 안의 내용을 우선 바꿔보도록 하자.

내용은 구글링 하면 흔하게 나오는 그 설정을 그대로 사용해보도록 한다.

{
    "compilerOptions": {
        "strict": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "lib": ["es2015","es2016","es2017","es2018","es2019","es2020"],
        "target": "ES5",
        "outDir": "./dist",
        "esModuleInterop": true
    },
    "exclude": ["node_modules"],
    "include": ["src/**/*"]
}

필요에 따라 설정을 바꿔도 좋다. 그냥 구글링에서 나오는 설정들을 가져다 쓴 것이기 때문에

이제 테스트로 타입 스크립트 파일을 생성해서 실행을 시켜보자.