[TS] 타입스크립트 모듈 사용, 옵션 설정 & tsconfig/bases

 

 

💡 타입스크립트에서 모듈을 사용해보자 ~

 

 

요기서 src 폴더, Product.ts, Size.ts, main.ts 를 만들자!

 

Product.ts

interface Product { // interface 생성
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
  sizes?: string[];
}

 

Size.ts

enum Size { // enum 생성
  S = 'S',
  M = 'M',
  L = 'L',
  XL = 'XL',
}

 

main.ts

const product1 = { // 객체 만들고
  id: 'c001',
  name: '주전자',
  price: 129000,
  membersOnly: true,
  sizes: ['S', 'M'],
};

const product2 = {
  id: 'd001',
  name: '커피포트',
  price: 25000,
};

console.log(product1); // 콘솔 출력
console.log(product2);

 

enum Size 를 Product.js 에 불러와보자.

 

Size.ts 에 이렇게 추가하고,

export default Size; // const 처럼 enum 앞에 쓰지 못해서, 코드 아래 적어줬다.

 

Product.ts 에서 import 해온다. 그리고 interface 도 export !

import Size from "./Size"; // 확장자를 적지 않아도 된다.

export default interface Product { // interface 는 앞에 적기 가능
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
  sizes?: Size[]; // 불러온 사이즈로 바꿨다.
}

 

이제 main.ts 에서 받아온다.

import Product from './Product';
import Size from './Size'; // 둘 다 받아오고

const product1: Product = { // 타입을 정해준다.
  id: 'c001',
  name: '주전자',
  price: 129000,
  membersOnly: true,
  sizes: [Size.S, Size.M], // 사이즈도 지정
};

const product2: Product = {
  id: 'd001',
  name: '커피포트',
  price: 25000,
};

console.log(product1);
console.log(product2);

 

npm run build 를 하면 js 파일이 생긴다.

Common Js 모듈 분법으로 바뀜 ! 모듈 설정은 tsconfig 에서 변경 가능하다.

 

❗️outDir : "./idst"

빌드된 파일들을 따로 보관하고 싶다면 tsconfig.json 에서 설정할 수 있다.

 

tsconfig.json

{
  "compilerOptions": {
	// ...
	// "outDir": "./",  // 기본 경로, 소스 코드와 트랜스파일된 결과물이 같은 위치에 만들어짐
  
   "outDir": "./dist", // 주석을 해제하고 경로를 설정해 준다.

 

 

js 파일을 지우고 다시 빌드해보면 폴더에 잘 생성된다.

 

❗️ include & exclude

설정을 좀 더 정교하게 ! 포함, 제외 파일을 정해보자.

 

tsconfig.json

include, exclude 는 타입스크립트를 처리할 때 어떤 파일을 포함할지 제외할지 설정해준다.

{
  "compilerOptions": {
   },
  "include": ["src/**/*"], // src 폴더 내 모든 경로의 모든 파일을 포함, 이런 경로 패턴을 Glob 패턴이라 한다!
  "exclude": [],
}

 

잘 되는지 확인해 보자.

src 밖에 test.ts 안에 test2.ts 를 만들고 exclude 설정을 바꿔줬다.

  "include": ["src/**/*"],
  "exclude": ["src/test2.ts"],

 

dist 폴더 지우고 다시 npm run build ~

 

test 는 include 되지 않아서 빌드가 안됐고,

test2 는 exclude 되어서 빌드가 안됐다!

 

❗️ rootDir: "src"

 

tsconfig.json

    // "rootDir": "./", // 기본값

 

src 에 types 폴더를 만들어 두 파일을 넣어놓고

빌드해보니 똑같은 구조로 폴더가 만들어져있다.

 

😲 rootDir 는 컴파일하는 파일들의 공통된 조상 폴더를 찾아

그 경로를 기본값으로 하는데 지금은 그 폴더가 src !

 

 

주석을 풀어둔다면 tsconfig.json 이 있는 폴더를 최상위로 해

그대로 폴더 구조를 dist 에 옮겨 놓는다.

  "rootDir": "./",

src 폴더까지 생겼다 ~

 

 

지금은 src 폴더까진 없어도 되니 경로를 src 로 정해두자.

  "rootDir": "src"

 

dist 폴더를 지우고 다시 빌드해보면 원하는대로 잘 생성이 되어있다.

 

❗️ strictNullChecks: true

값이 null 이 될 가능성이 있다면, 반드시 처리하도록 하는 옵션

예상치 못한 변수에 null 값이 들어가 런타임 오류가 나는 것을 방지한다.

 

❗️ skipLipCheck: true

node_modules 폴더에 설치된 패키지들의 타입 검사를 하지 않는 옵션

패키지 개발 과정에서 대부분 타입 검사가 이뤄지니, 중복으로 하지 않아도 된다. 그러니 켜두자!

 

 

✳️   "extends": "<설정 파일 경로>"

매번 옵션 설정을 하기 귀찮을 때! 패키지를 설치해 옵션을 설정하자!

 

 

npm install --save-dev @tsconfig/recommended ~ 

🔗 https://github.com/tsconfig/bases

⬆️ 참고용, 내가 만든 패키지를 불러올 수 도 있다.

 

tsconfig.json 기존에 쓰던 옵션은 전부 지웠다.

{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
  }
}

 

bases/recommended.json 파일을 살펴보면 아래와 같은 옵션 사용 중!

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Recommended"
}

 

설정을 바꾸고 싶다면 내 파일에서 덮어쓰면 된다!

tsconfig.json

{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
    "target": "ES2016"
  }
}