타입스크립트 베이직 - 주요 config option들

유키미아우·2023년 11월 10일
0
post-custom-banner

export default

enum은 export default enum ... 할 수 없음.
아래에 따로 작성해주자.

interface는 export default interface ... 표현 ok.

import할 때 확장자 생략

타입스크립트는 import할때 확장자 .ts를 생략가능.
import Product from "./Product";

target: 어떤 ECMAScript 버젼으로 변환할지.

너무 오래된 버젼이면 사용하지 못하는 문법들이 많을 것이고, 너무 최신 문법이면 브라우져 호환성 문제가 일어날 수 있을것이다. ES2016이 가장 무난할 것 같다.

outDir: build할 경로 설정

이대로 npm run build하면, .ts파일 옆에 .js파일들이 주르륵 생겨서 정리필요성이 생김.

따라서 예쁘게 한 폴더안에 모아서 .js파일들을 생성시키도록 하자.

tsconfig.json 파일을 열어서
아래의 옵션을 코멘트 해제하고
"outDir": "./",
이렇게 경로를 설정해주자.
"outDir": "./dist",

npm run build하면 dist폴더안에 빌드가 됨.

포함하거나 제외할 파일 설정법

{
	"compilerOptions": {
    	// ... 생략
    },
    "include": [], // 포함할 파일
	"exclude": [], // 제외할 파일
}

위와 같은 옵션을 추가로 작성하고 값으로 어떤 파일을 포함하거나 제외할 지 넣어줄 수 있다.

"include": ["src/*/"] => src경로 안의 모든 경로 모든 파일을 포함하겠다라는 뜻.
이를 블록패턴이라고 부른다.

rootDir: 최상위폴더 설정

타입스크립트 컴파일러가 처리할 타입스크립트 파일들의 최상위 폴더를 정하는 옵션
src 폴더를 최상위 폴더로 정하고 싶다면

/* Modules */
"module": "commonjs",
  "rootDir": "src", // 이렇게 작성

strict

noImplicitAny: 새로 시작하는 타입스크립트 프로젝트라면 반드시 켜고 작업시작. 기존에 자바스크립트로 만든 프로젝트를 타입스크립트로 옮기는 중이라면 이 옵션을 잠시 꺼두는 것도 좋다.

module: 임포트문법

Node.js 같은 데서 기본적으로 사용하는 CJS(CommonJS)

const express = require("express");

const app = express();

ES6부터 도입된 import/export 문법

import express from "express";

const app = express();

ESM을 적용하고 싶다면 es6,es2020 같이 es로 시작하는 값을 쓰면 되고,
CJS를 적용하고 싶다면 commonjs라고 쓰면 된다.

forceConsistentCasingInFileNames: 파일의 대소문자 구분하기

true설정이 좋다.

profile
능동적인 마음
post-custom-banner

0개의 댓글