타입스크립트 시작하기
오늘은 타입스크립트를 실제로 사용하기 위해 간단한 설정들을 해보자.
기본적으로 Node.js와 VisualStudio Code 설치를 해줘야한다.
많은 블로그들에서 잘 설명하고 있으니 꼭 설치해줄 것!
VS code에서 폴더 열기
실습 코드를 작성할 폴더를 하나 만들어준다.
이미 폴더를 만들어뒀다면 Add Folder to Workspace를 눌러서 폴더를 워크스페이스에 올려주면 된다.
Node.js 패키지 초기화
Terminal을 열어서 Node.js 패키지 초기화를 해주자.
$ npm init@types/node 설치
타입스크립트 프로젝트를 시작하기 위해서는 Node.js 내장 기능들의 타입 정보를 담고 있는 @types/node 패키지를 설치해줘야 한다.
$ npm i @types/node@types/node : Node.js가 제공하는 기본기능에 대한 타입정보를 가지고 있음.
🤗 이 패키지를 꼭 설치해야하는 이유!
- 타입스크립트 - 2 타입시스템과 타입스크립트 동작원리 에서 봤던 것처럼 타입스크립트는 코드 실행전에 '타입 검사' 과정을 거치게 된다. 이 과정에서 타입이 선언되지 않은 코드를 만나게 되면 타입스크립트는 타입이 올바르게 사용 되지 않았다고 생각해 오류를 발생시킨다. 그렇기 때문에 기본기능들을 위한 타입을 별도로 선언하기 위해 @types/node 패키지는 꼭 필요!!!!!!
타입스크립트 컴파일러 설치
//window일 경우
$ npm i -g typescript
//macOS 일 경우
sudo npm i -g typescript-g : 글로벌 옵션. 해당 옵션을 사용하면 전역으로 설치됨.
설치가 되고나면 버전확인을 통해 설치가 잘 되었는지 확인하자.
$ tsc -v
Version 4.9.5버전에 대한 정보가 잘 나오면 설치가 잘 된것이다.
타입스크립트 실행
원하는 폴더 아래 ( 나의 경우 강의를 따라가고 있으므로 typescriptPractice/section1이라는 폴더에서 진행 중) src 폴더를 생성하고 -> src 안에 index.ts 파일을 생성해준다.
타입스크립트 파일 작성
// src/index.ts
console.log("Hello TypeScript);
const a: number = 1;tsc로 컴파일하고 실행하기
$ tsc src/index.ts컴파일이 완료되면 다음과 같이 index.js 파일이 생성된다.
node를 이용해 실행해보면?
$ node src/index.js
Hello TypeScript하지만 이 과정은 tsc로 컴파일 하고, node로 실행해야하다보니 조금 번거롭다. 이번엔 다른 방법으로해보자.
ts-node로 실행하기
먼저 ts-node를 설치해준다.
//window
$ npm i -g ts-node
//macOS
sudo npm i -g ts-nodets-node 버전 확인
$ ts-node -v
v10.9.1ts-node로 실행
$ ts-node src/index.ts
Hello TypeScriptts-node를 사용하면 자바스크립트 파일을 생성하지 않고 타입스크립트 파일을 실행시킬수 있다.
언제 tsc를 사용하고 ts-node를 사용하는지에 대해서는 이후에 다뤄보자.
타입스크립트 컴파일러 옵션
컴파일러 옵션은 컴파일 과정에 세부적인 사항들을 결정할 수 있는 옵션입니다.
타입스크립트는 컴파일러 옵션을 비교적 자유롭고 쉽게 설정할 수 있는데 타입스크립트에 어떤 컴파일러 옵션이 있는지 중요한 거 몇가지를 알아보도록 하자.
컴파일러 옵션 자동 생성하기
컴파일러 옵션을 설정하는 가장 쉽고 빠른 방법은 자동생성 도구를 이용하는 것이다.
tsc를 이용해 기본옵션이 설정된 컴파일러 옵션 파일을 자동 생성할 수 있다.
tsc --init해당 명령어를 입력하면 tsconfig.json파일이 자동으로 생성된다.
엄청 많은 옵션이 존재하고, 각각의 설명이 적혀있다.
원하는 옵션의 주석을 해제해서 사용하면 될 것 같다!
컴파일러 옵션 직접 설정하기
include 옵션
필요한 상황 : 수많은 ts 파일이 있을 때, 일일히 tsc를 작성하는게 너무 번거로울 때
해당 옵션을 사용하면 tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려준다.
{
"include":["src"] //src 폴더 아래 모든 타입스크립트 파일이 동시에 컴파일 된다.
}target 옵션
필요한 상황 : 어떤 이유로 인해서 자바스크립트 코드 버전을 지정해주어야 할 때. (ES5로 지정해줘야한다던가)
해당 옵션을 사용하면 컴파일 결과 생성되는 자바스크립트 코드의 버전을 설정할 수 있다.
{
"compilerOptions":{
"target":"ES5",
},
"include":["src"]
}
module 옵션
필요한 상황 : 자바스크립트 코드의 모듈 시스템의 설정을 변경해주고 싶을 때
{
"compilerOptions":{
"module":"CommonJS", //CommonJs말고 ESNext를 쓰면 export/import 사용
},
"include":["src"]
}
outDir 옵션
필요한 상황 : 자바스크립트가 같은 src 폴더 안에 생성되는데 보기 불편할 때
{
"compilerOptions":{
"outDir":"dist", //dist 폴더에 자바스크립트 파일 생성
},
"include":["src"]
}
strict 옵션
필요한 상황 : 타입스크립트가 타입검사를 얼마나 엄격하게 할지 정해주고 싶을 때
{
"compilerOptions":{
"strict":true, // 타입검사를 엄격하게 시켜주고 싶을 때
},
}
ModuleDetection 옵션과 ts-node 옵션
필요한 상황 :
타입스크립트는 원래 모든 파일을 기본적으로 전역 파일(모듈)로 취급합니다. 다시말해서 a.ts와 b.ts에 같은 이름의 변수 num을 선언하면 오류가 발생하게 됩니다.
//a.ts
const num = 1;
//b.ts
const num = 1;
//이런게 불가능함!!기본적으로 다른 파일들에서는 동일한 이름으로 변수를 잘 설정하는데..
그러기 위해서는 각 파일에 모듈 시스템 키워드 (export, import)를 하나 이상 사용해서 해당 파일을 전역 모듈이 아닌 로컬(독립) 모듈로 취급되도록 만들어줘야하는데 이를 해줄 수 있는 것이 바로 ModuleDetection 옵션이다.
{
"compilerOptions":{
"moduleDetection":"force", // 각각의 파일이 로컬모듈로 취급되길 원할 때
},
}
이렇게 moduleDetection을 활성화하면 ts-node 실행시 오류가 발생한다.
이걸 해결하기 위해 tsconfig.json에 ts-node옵션에서 esmodule로 설정해주고
{
"compilerOptions":{
"moduleDetection":"force", // 각각의 파일이 로컬모듈로 취급되길 원할 때
},
"ts-node": {
"esm":true //ts-node 실행 오류 해결.
},
}
package.json파일에서 type 설정을 해주면 해결 가능!
{
"name": "section1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module", //이것도 해주기.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"@types/node": "^20.3.1"
}
}컴파일러 옵션 정리
{
"include": ["src"], //src 경로 아래에있는 모든 ts를 포함해서 컴파일해라
"compilerOptions": {
"target": "ES5", //js 변환
"module": "ESNext", // 최신버전인 ES모듈로 호출, 내보내기
"outDir": "dist", //ts 컴파일시 js파일이 생성되는데 이걸 저장할 위치.
"strict": false, //타입 검사를 얼마나 엄격하게 할지 true가 강함.
// "strictNullChecks": false, //엄격한 null 검사
"moduleDetection": "force" //전역모듈 대신 파일별로 개별 모듈이 되게 해줌.
},
"ts-node": {
"esm": true
},
}느낀 점
아직은 완전 초반이긴 하지만 타입을 작성할 수 있다는 점에서 더 맘에든다. 이렇게 옵션에 대해서 공부해본 적은 없었는데 기반부터 알고있는게 중요하다는 걸 깨달았다. 리액트와 자바스크립트도 기본부터 탄탄하게 공부해야지
