https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlCfBV%2FbtrGJFIfA1Y%2FPRKYYW8W2DAJAvkJEPFG51%2Fimg.jpg

2**-1 타입스크립 프로젝트 만들기**

타입스크립트 개발은 노드제이에스 프로젝트를 만든 다음, 개발 언어를 타입스크립트로 설정하는 방식으로 진행. 노드제이에스 프로젝트는 디렉터리를 하나 만들고 여기에 package.json이란 이름의 파일을 만드는 것으로 시작한다.

package.json은 노드제이에스가 관리하는 패키지 관리 파일로서 프로젝트 정보와 관련 패키지가 기록된다. 즉, 필요한 패키지를 관리할 수 있다.

프로젝트 생성자 관점에서 패키지 설치하기

npm install 혹은 npm i 명령으로 설치가능하다. 이때 패키지 설치 명령은 두 가지 옵션을 줄 수 있다.

타입스크립트 프로젝트는 보통 -D 옵션으로 설치해 등록하는 것이 좋다. 이 프로젝트를 전달받아서 이용하는 다른 개발자의 컴퓨터에 패키지가 전역에 설치되어 있지 않을 수도 있기 때문이다.

타입스크립트는 기본적으로 ESNext 자바스크립트 문법을 포함하고 있지만, 자바스크립트와는 완전히 다른 언어이다. 즉, 자바스크립트 컴파일러는 a ⇒ a + 1 과 같은 코드를 동작시킬 수 있지만, 타입스크립트 컴파일러는 (a:number_: number ⇒ a + 1 처럼 타입이 명시적으로 설정되어 있어야만 코드가 문법에 맞게 작성되었는지를 검증해 코드를 동작시킨다.

타입스크립트는 또한 웹 브라우저나 노드제이에스가 기본으로 제공하는 타입들의 존재도 그냥은 알지 못한다. 예를 들어, Promise와 같은 타입을 사용하려면 @types/node라는 패키지를 설치해야한다.

npm i -D @types/node

tsconfig.json 파일 만들기

타입스크립트 프로젝트는 타입스크립트 컴파일러의 설정 파일인 tsconfig.json파일이 있어야 한다. 이 파일은 tsc —init 명령으로 만들 수 있다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

2-2 모듈 이해하기

타입스크립트에서는 index.ts와 같은 소스 파일을 모듈(module)이라고 한다. 보통은 코드 관리와 유지 보수를 편리하게 하려고 모듈마다 고유한 기능을 구현하는 방식으로 소스코드를 분할한다. 이러한 작업을 모듈화라고 한다.

하지만 이처럼 소스코드를 여러 개 모듈로 분할하면 어떤 모듈에 어떤 내용이 있는지를 서로 알게 해줘야 한다. 타입스크립트는 이를 위해 export와 import라는 키워드를 제공한다. export는 기능을 제공하는 쪽에서 사용하고 import는 다른 모듈의 기능을 이용하는 쪽에서 사용하는 키워드이다.

2-3 tsconfig.json 파일 살펴보기