2024. 4. 28. 13:35ㆍTypescript
1. tsconfig.json
tsc --init
// 초기화하면 tsconfig.json 타입스크립트 컴파일러 설정파일이 생성됨
기본적으로 저렇게 많은데 우리는 과감하게 삭제후, 필요한 옵션을 하나씩 설정해 보도록 하즈아 ~!
2. inclues 컴파일러 옵션
{
"include": ["src"]
}
tsc 만 터미널에서 작성해도 모든 ts > js 로 컴파일된다.
3. target
'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다.
es5로 셋팅해놓으면 es5 버전 자바스크립트로 컴파일(변환) 신버전을 원하면 es2016, esnext 적으면 된다.
{
"compilerOptions": {
"target": "ES5"
},
"include": ["src"]
}
4. module
자바스크립트의 모듈 시스템에는 ..
// common.js
const a = require(..)
module.export
// esmodule
import a from '...'
export default
5. outDir
ts 파일이랑 js 파일이 계속 같이 있는데 나중에 파일이 393개 있으면 ... omg !
그래서 따로 js 파일만 컴파일시에 모아둘 수 있도록 설정하는게 outDir
6. strict: true
얼마나 엄격하게 검사할건지
{
"compilerOptions": {
"target": "ES5",
"module": "ESNext",
"outDir": "dist",
"strict": true
},
"include": ["src"]
}
7. moduleDetection
필요한 상황
//a.ts
const num = 1;
//b.ts
const num = 1;
//이런게 불가능함!!
기본적으로 다른 파일들에서는 동일한 이름으로 변수를 잘 설정하는데..
그러기 위해서는 각 파일에 모듈 시스템 키워드 (export, import)를 하나 이상 사용해서 해당 파일을 전역 모듈이 아닌 로컬(독립) 모듈로 취급되도록 만들어줘야하는데 이를 해줄 수 있는 것이 바로 ModuleDetection 옵션이다.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"outDir": "dist",
"strict": true,
"moduleDetection": "force", // 각각의 파일이 로컬모듈로 취급되길 원할 때
"skipLibCheck": true //
},
"include": ["src"]
}
이렇게 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"
}
}
tsc 명령어 치면 계속 typeof import("undici-types") 에러가 나왔다.
23년 11월 이후 하나의 옵션을 더 추가해주어야한다.
@types 버전이 20버전 이상으로 업데이트 되면서 특정 라이브러리에 타입 검사 오류가 발생하고 있다.
따라서 tsconfig.json 에 compilerOption 내부에 skiLibCheck 옵션을 추가해 주어야한다.
8. tsconfig 수정 후 변경사항 적용됐는지 확인
vscode + Mac 기준
command + shift + p
webstorm + Mac 기준
command + shift + a > restart 치면 나옴
tsc 명령어로 컴파일 한뒤 js 파일 확인하면 자동으로 export {} 가 생성되어 있음!
참고
{
"compilerOptions": {
/* 기본 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"incremental": true, /* 증분 컴파일 활성화 */
"target": "es5", /* ECMAScript 목표 버전 설정: 'ES3'(기본), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "esnext", /* 생성될 모듈 코드 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"lib": ["dom", "dom.iterable", "esnext"], /* 컴파일 과정에 사용될 라이브러리 파일 설정 */
"allowJs": true, /* JavaScript 파일 컴파일 허용 */
"checkJs": true, /* .js 파일 오류 리포트 설정 */
"jsx": "react", /* 생성될 JSX 코드 설정: 'preserve', 'react-native', or 'react'. */
"declaration": true, /* '.d.ts' 파일 생성 설정 */
"declarationMap": true, /* 해당하는 각 '.d.ts'파일에 대한 소스 맵 생성 */
"sourceMap": true, /* 소스맵 '.map' 파일 생성 설정 */
"outFile": "./", /* 복수 파일을 묶어 하나의 파일로 출력 설정 */
"outDir": "./dist", /* 출력될 디렉토리 설정 */
"rootDir": "./", /* 입력 파일들의 루트 디렉토리 설정. --outDir 옵션을 사용해 출력 디렉토리 설정이 가능 */
"composite": true, /* 프로젝트 컴파일 활성화 */
"tsBuildInfoFile": "./", /* 증분 컴파일 정보를 저장할 파일 지정 */
"removeComments": true, /* 출력 시, 주석 제거 설정 */
"noEmit": true, /* 출력 방출(emit) 유무 설정 */
"importHelpers": true, /* 'tslib'로부터 헬퍼를 호출할 지 설정 */
"downlevelIteration": true, /* 'ES5' 혹은 'ES3' 타겟 설정 시 Iterables 'for-of', 'spread', 'destructuring' 완벽 지원 설정 */
"isolatedModules": true, /* 각 파일을 별도 모듈로 변환 ('ts.transpileModule'과 유사) */
/* 엄격한 유형 검사 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"strict": true, /* 모든 엄격한 유형 검사 옵션 활성화 */
"noImplicitAny": true, /* 명시적이지 않은 'any' 유형으로 표현식 및 선언 사용 시 오류 발생 */
"strictNullChecks": true, /* 엄격한 null 검사 사용 */
"strictFunctionTypes": true, /* 엄격한 함수 유형 검사 사용 */
"strictBindCallApply": true, /* 엄격한 'bind', 'call', 'apply' 함수 메서드 사용 */
"strictPropertyInitialization": true, /* 클래스에서 속성 초기화 엄격 검사 사용 */
"noImplicitThis": true, /* 명시적이지 않은 'any'유형으로 'this' 표현식 사용 시 오류 발생 */
"alwaysStrict": true, /* 엄격모드에서 구문 분석 후, 각 소스 파일에 "use strict" 코드를 출력 */
/* 추가 검사 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"noUnusedLocals": true, /* 사용되지 않은 로컬이 있을 경우, 오류로 보고 */
"noUnusedParameters": true, /* 사용되지 않은 매개변수가 있을 경우, 오류로 보고 */
"noImplicitReturns": true, /* 함수가 값을 반환하지 않을 경우, 오류로 보고 */
"noFallthroughCasesInSwitch": true, /* switch 문 오류 유형에 대한 오류 보고 */
"noUncheckedIndexedAccess": true, /* 인덱스 시그니처 결과에 'undefined' 포함 */
/* 모듈 분석 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"moduleResolution": "node", /* 모듈 분석 방법 설정: 'node' (Node.js) 또는 'classic' (TypeScript pre-1.6). */
"baseUrl": "./", /* 절대 경로 모듈이 아닌, 모듈이 기본적으로 위치한 디렉토리 설정 (예: './modules-name') */
"paths": {}, /* 'baseUrl'을 기준으로 상대 위치로 가져오기를 다시 매핑하는 항목 설정 */
"rootDirs": [], /* 런타임 시 프로젝트 구조를 나타내는 로트 디렉토리 목록 */
"typeRoots": [], /* 유형 정의를 포함할 디렉토리 목록 */
"types": [], /* 컴파일 시 포함될 유형 선언 파일 입력 */
"allowSyntheticDefaultImports": true, /* 기본 출력(default export)이 없는 모듈로부터 기본 호출을 허용 (이 코드는 단지 유형 검사만 수행) */
"esModuleInterop": true, /* 모든 가져오기에 대한 네임스페이스 객체 생성을 통해 CommonJS와 ES 모듈 간의 상호 운용성을 제공. 'allowSyntheticDefaultImports' 암시 */
"preserveSymlinks": true, /* symlinks 실제 경로로 결정하지 않음 */
"allowUmdGlobalAccess": true, /* 모듈에서 UMD 글로벌에 접근 허용 */
/* 소스맵 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"sourceRoot": "./", /* 디버거(debugger)가 소스 위치 대신 TypeScript 파일을 찾을 위치 설정 */
"mapRoot": "./", /* 디버거가 생성된 위치 대신 맵 파일을 찾을 위치 설정 */
"inlineSourceMap": true, /* 하나의 인라인 소스맵을 내보내도록 설정 */
"inlineSources": true, /* 하나의 파일 안에 소스와 소스 코드를 함께 내보내도록 설정. '--inlineSourceMap' 또는 '--sourceMap' 설정이 필요 */
/* 실험적인 기능 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"experimentalDecorators": true, /* ES7 데코레이터(decorators) 실험 기능 지원 설정 */
"emitDecoratorMetadata": true, /* 데코레이터를 위한 유형 메타데이터 방출 실험 기능 지원 설정 */
/* 고급 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"skipLibCheck": true, /* 선언 파일 유형 검사 스킵 */
"forceConsistentCasingInFileNames": true /* 동일한 파일에 대한 일관되지 않은 케이스 참조를 허용하지 않음 */
}
}
'Typescript' 카테고리의 다른 글
[TS] 2.기본 - 타입 별칭과 인덱스 시그니처 (0) | 2024.04.28 |
---|---|
[TS] 기본 - 객체 (0) | 2024.04.28 |
[TS] 기본 - 배열과 튜플 (0) | 2024.04.28 |
[TS] 기본 - 원시타입과 리터럴 타입 (0) | 2024.04.28 |
[TS] Hello TS World! (0) | 2024.04.28 |