[date] tsconfig 설정하기

• eslint config ✅
• tsconfig 설정 ➡️
• pnpm-workspace.yaml
• package.json의 script 설정
• turbo.json 셋업

오늘의 할당량은 개뿔 ㅠ ㅋㅋ 처음보는 모노레포 구조에 헤매는 중..

tsconfig 도 eslint 와 비슷하게 구성되어있으니 좀 더 빠르게 알아보장

---

├ packages/typescript-config/base.json

    모든 프로젝트와 앱에서 공통으로 사용할 기본 설정 

    일반적인 타입스크립트 설정, 컴파일러 옵션 등

 

├ packages/typescript-config/nextjs.json

    base.json 상속 + Next.js 프로젝트에 특화된 타입스크립트 설정

 

├ apps/*/tsconfig.json 

    공통 설정을 상속 + 각각의 앱/ 패키지에 대한 설정 정의

 

├ 루트 tsconfig.json (추가 : 다시 삭제함)

    base.json 상속 

    전체 프로젝트의 기본적인 설정 관리

    apps/* 내에 tsconfig.json이 없는 경우 루트 config가 그대로 상속된다. => apps/*/tsconfig.json 삭제

---

turborepo 프로젝트 생성 시 작성되어있는 apps/*/tsconfig.json 에서

nextjs.json을 extends로 상속하지 않고 base.json + nextjs.json에 있는 내용들이 중복되어있다. 

왜 이렇게 작성되어있을까? 

상위 설정과 충돌하거나 상속받을 필요 없는 경우 독립적으로 작성이 필요하다고 한다...

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

apps/*/tsconfig 를 삭제하고 루트에 파일을 추가하려 했으나 paths 등의 경로를 포함한 옵션이 있어서 

 

중복되는 설정은 nextjs.json을 상속받도록 하고 아래와 같이 변경했다. 

{
  "extends": "../../tsconfig/nextjs.json",
  "noEmit": true,
  "incremental": true,
  "plugins": [
    {
      "name": "next"
    }
  ],
  "paths": {
    "@/*": ["./src/*"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

 

---

// apps/*/package.json
{
  "devDependencies": {
     "@repo/typescript-config": "workspace:*",
     "typescript": "latest",
  }
}

이렇게  @repo/typescript-config 를 설치해주고

각 앱 tsconfig에서 extends를 아래와 같이 수정할 수 있다.

{
  "extends": "@repo/typescript-config/nextjs.json",
}

---

packages/ ui 의 package.json 설정 

 

기존

{
  "name": "@repo/ui",
  "version": "0.0.0",
  "private": true,
  "exports": {
    "./*": "./src/*.tsx"
  },
  "scripts": {
    "lint": "eslint . --max-warnings 0",
    "generate:component": "turbo gen react-component",
    "check-types": "tsc --noEmit"
  },
  "devDependencies": {
    "@repo/eslint-config": "workspace:*",
    "@repo/typescript-config": "workspace:*",
    "@turbo/gen": "^2.4.4",
    "@types/node": "^22.13.9",
    "@types/react": "19.0.10",
    "@types/react-dom": "19.0.4",
    "eslint": "^9.21.0",
    "typescript": "5.8.2"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

 

공식문서에 나와있는대로 아래 부분만 수정했다. 

.tsx 를 그대로 가져가면 소스코드가 그대로 노출되고 + TS 설정이 다르면 에러가 날 수 있다. 

UI 컴포넌트를 다른 프로젝트에서 사용할 것 이기 때문에 /dist 경로에서 빌드한 결과를 export 하는것이 안정적이라고 한다.

.ts 에서 타입 정보를 제공한다.

  "exports": {
    "./*": {
      "types": "./src/*.ts",
      "default": "./dist/*.js"
    },
    //...
      "scripts": {
      //...
    "dev": "tsc --watch",
    "build": "tsc"
  },

 

공식문서 를 참조했다