tsconfig.json에 추가 하면 좋을거 + 해볼만한거

 

TypeScript 컴파일러가 컴파일할 파일 또는 디렉토리를 지정

 "include" : ["src/**/*.ts],  >> tsc >> 컴파일할때 포함하고 싶은 것들 

 

 

TypeScript 컴파일러가 컴파일하지 않을 파일 또는 디렉토리

 'exclude" : ["node_modules", "test/**"] >> 컴파일할때 포함하기 싫은것들

 

 

TypeScript 코드가 컴파일될 JavaScript 버전을 지정

"target" : "자바스크립트 버전"

 

 

 

 TypeScript 컴파일러가 사용할 라이브러리 정의 파일을 지정  >> 이것 선택적으로 다운받아서 쓰고 싶다면 사용

"lib" : [ ] > 뭔가 지정하고 싶은 라이브러리 예로 DOM  , 여기에 넣으면 브라우저에서만 되는것도 넣기가능 아니면 오류남

        >> 이거 그냥 주석처리 해두면 기본 설정으로 된다고

        >>만약 lib 옵션을 설정하지 않으면, TypeScript는 target에 맞는 기본 라이브러리를 포함합니다.

              예를 들어, target을 “ES2022”로 설정하면, TypeScript는 ES2022 표준 라이브러리를 자동으로 포함합니다.

 

라이브러리 정의 파일 (.d.ts): TypeScript가 사용하는 라이브러리 정의 파일들은 .d.ts 파일로 제공됩니다. 이 파일들은 TypeScript 설치 디렉토리에서 찾을 수 있습니다.

>> 이거 파일들 보고 싶으면 .d.ts, .d파일 찾아보기

    

 

 

모든 엄격한 타입 검사 옵션

strict 는 true로 권장

 

 

JavaScript 출력 파일과 TypeScript 소스 파일 간의 소스 맵을 생성합니다.

이를 통해 브라우저 디버거나 다른 도구에서 TypeScript 코드를 직접 디버깅

sourceMap도 true로 권장

 

 

 

 TypeScript 컴파일러가 컴파일된 JavaScript 파일을 출력할 디렉토리를 지정

outDir >> "./out" 이나 "./dist"

 

 

TypeScript 소스 파일의 루트 디렉토리를 지정

rootDir "./" >> ./src로 하면 외부의 라이브러리를 끌어쓰는게 어려워지므로 ./

예로 프리즈마 orm

 

 

 

------- 보통은 안쓸테지만, 폴더가 안으로 많이 들어가서 깔끔하게 가져오고 싶을때--------------

장점은 코드의 가독성을 높이고, 경로를 관리하기 쉽게 만들어 줍니다.

밑에 이거 두개 설정하고 추가작업해야한다.

 

baseUrl은 TypeScript 컴파일러가 모듈을 찾을 때 기준이 되는 기본 경로를 설정합니다. 보통 프로젝트의 루트 디렉토리를 기준으로 설정

baseUrl >>paths를 어디부터 셀건지 보통은  ./ 로 지정

 

 paths는 모듈 경로에 대한 별칭을 설정하여, 긴 상대 경로 대신 간단한 경로로 모듈을 가져올 수 있게 합니다. paths는 baseUrl을 기준으로 합니다.

paths  > 이건 묶음 경로 만든거 

 

---이건 참고-----

https://www.daleseo.com/tsconfig-path-mapping/

타입스크립트의 경로 맵핑 (baseUrl, paths)

 

 

 

>>> 이것만 하면 컴파일한 js는 추적을 못해서 에러뜨니 추가작업이 필요

--이건 tsconfig-path

https://blog.naver.com/psj9102/222653630355

Typescript : path alias (import 경로 줄이기)

 

-개발환경에서 사용할 방법-

tsconfig-path, tsnode 패키지 설치

npm install ts-node tsconfig-paths --save-dev

or

yarn add ts-node tsconfig-paths --dev

 

하고 pakage.json에  추가

{
  "scripts": {
    "start": "ts-node -r tsconfig-paths/register src/main.ts"
  }
}

----이건 안해본 방법이라 나중에 바꿀 수 있음-------

 

tsnode사용하면 > 이것도 가능
https://light9639.tistory.com/entry/Ts-Node-%EC%82%AC%EC%9A%A9%EB%B2%95

[Node.js] 🌊 TS-Node 사용법.

 

 

 

 

-----두번째 방법 webpack과 webpack cli--- >>번들링 도구 > 근데 요즘은 잘 안씀 다른 번들링도구 많음

두개 설치하고 webpack.config.js 파일 생성

https://momomooo.tistory.com/239

웹팩으로 번들링

 

나머지 설정들은 찾아보고

alias은 번들 파일 지정하는것

 

 

 

여기서 더 나아간 방법은 ts-loader을 추가로 설치해서 설정하는거 >> 실무에서도 쓰인다는데 이해x 

 

const path = require('path');

module.exports = {
  entry: './src/main.ts',  // 번들링 시작점 파일
  module: {
    rules: [
      {
        test: /\.ts$/,  // .ts 파일을 ts-loader를 사용하여 처리
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],  // 모듈을 찾을 때 확장자 생략 가능
    alias: {
      '@controllers': path.resolve(__dirname, 'src/controllers/'),  // @controllers 별칭 설정
      '@models': path.resolve(__dirname, 'src/models/'),  // @models 별칭 설정
      '@services': path.resolve(__dirname, 'src/services/'),  // @services 별칭 설정
      '@utils': path.resolve(__dirname, 'src/utils/'),  // @utils 별칭 설정
    },
  },
  output: {
    filename: 'bundle.js',  // 출력 파일 이름
    path: path.resolve(__dirname, 'dist'),  // 출력 디렉토리
  },
};

 

 

---나머지  ts-loader 내용은 다른 블로그 내용 보고 정리할 예정 ---

 

 

 

사이드 프로젝트 추가하거나 옵션 많아져서 분리 등등 이런 상황에는 
extends 설정하기

 

 

 

 

 

 

remove comments > 배포할때 주석을 없애줌

 

 

 

 

 

"allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부

옵션은 TypeScript 프로젝트에서 JavaScript 파일을 허용할지 여부를 결정

"checkJs": true // JavaScript 파일 타입 체크 여부

ypeScript 컴파일러가 JavaScript 파일에 대해 타입 검사를 수행할지 여부를 결정