<div id="readability-page-1" class="page"><div>
 
 <header>
 
 

 
 

 

 
 
 

 
 
 
 1 minute read
 
 
 
 


 </header>
 

 <section itemprop="text">
 
 <h2 id="환경">환경</h2>
<ul>
 <li>typescript v5.8.3</li>
 <li>yarn workspace</li>
</ul>

<h2 id="현상">현상</h2>
<ol>
 <li>yarn workspace를 사용하여 모노레포를 구축</li>
 <li>workspace root에서 tsconfig를 설정</li>
 <li>하위 package에서 workspace root의 tsconfig를 extend</li>
 <li>workspace root에서 정의한 global type을 하위 패키지에서 인식하지 못 함!</li>
</ol>

<h2 id="원인">원인</h2>
workspace root의 tsconfig와 하위 패키지의 tsconfig에 각각 <code>include</code> 설정을 두었기 때문이다.
<h3 id="include-설정은-extend를-하지-않는다-override만-한다"><code>include</code> 설정은 extend를 하지 않는다. override만 한다.</h3>
그래서 workspace Root에 설정한 global type이 하위 패키지에 적용되지 않은 것이다.

<h2 id="해결법">해결법</h2>
아래와 같이 하위 패키지에서만 <code>include</code>를 한다.

<div><pre><code>{
 "extends": "../../tsconfig.json", // workspace root의 tsconfig
 "files": [],
 "include": ["src", "../../types/**.d.ts"] // 이 path에 global type을 설정했다
}
</code></pre></div>

<h2 id="typescript-설정-디버깅-방법">typescript 설정 디버깅 방법</h2>

현재 경로에서 tsconfig가 어떻게 설정되어 있는지 확인하는 방법이 있다.



위 명령을 사용하여 현재 경로에서 설정된 typescript 설정을 확인할 수 있다. 아래와 같은 output이 나온다.

<div><pre><code># Output of tsc --showConfig
{
 "compilerOptions": {
 "tsBuildInfoFile": "../../node_modules/.tmp/tsconfig.app.tsbuildinfo",
 "target": "es2020",
 "useDefineForClassFields": true,
 "lib": [
 "es2020",
 "dom",
 "dom.iterable"
 ],
 "module": "esnext",
 "skipLibCheck": true,
 "composite": true,
 "emitDeclarationOnly": true,
 "moduleResolution": "bundler",
 "allowImportingTsExtensions": true,
 "isolatedModules": true,
 "moduleDetection": "force",
 "noEmit": true,
 "jsx": "react-jsx",
 "strict": true,
 "noUnusedLocals": true,
 "noUnusedParameters": true,
 "noFallthroughCasesInSwitch": true,
 "noUncheckedSideEffectImports": true,
 "allowSyntheticDefaultImports": true,
 "resolvePackageJsonExports": true,
 "resolvePackageJsonImports": true,
 "resolveJsonModule": true,
 "declaration": true,
 "preserveConstEnums": true,
 "incremental": true,
 "noImplicitAny": true,
 "noImplicitThis": true,
 "strictNullChecks": true,
 "strictFunctionTypes": true,
 "strictBindCallApply": true,
 "strictPropertyInitialization": true,
 "strictBuiltinIteratorReturn": true,
 "alwaysStrict": true,
 "useUnknownInCatchVariables": true
 },
 "files": [
 "./src/Header.tsx",
 "./src/Title.tsx",
 "./src/main.tsx",
 "./src/vite-env.d.ts",
 "../../types/global.d.ts"
 ],
 "include": [
 "src",
 "../../types/**.d.ts"
 ]
}
</code></pre></div>

EOD

20250407

 
 </section>

 

 


 
 


 </div></div>

Never test

환경
typescript v5.8.3
yarn workspace
현상
yarn workspace를 사용하여 모노레포를 구축
workspace root에서 tsconfig를 설정
하위 package에서 workspace root의 tsconfig를 extend
workspace root에서 정의한 global type을 하위 패키지에서 인식하지 못 함!
원인
workspace root의 tsconfig와 하위 패키지의 tsconfig에 각각 include 설정을 두었기 때문이다.
include 설정은 extend를 하지 않는다. override만 한다.
그래서 workspace Root에 설정한 global type이 하위 패키지에 적용되지 않은 것이다.
해결법
아래와 같이 하위 패키지에서만 include를 한다.
{
  "extends": "../../tsconfig.json", // workspace root의 tsconfig
  "files": [],
  "include": ["src", "../../types/**.d.ts"] // 이 path에 global type을 설정했다
}
typescript 설정 디버깅 방법
현재 경로에서 tsconfig가 어떻게 설정되어 있는지 확인하는 방법이 있다.
tsc --showConfig
위 명령을 사용하여 현재 경로에서 설정된 typescript 설정을 확인할 수 있다. 아래와 같은 output이 나온다.
# Output of tsc --showConfig
{
    "compilerOptions": {
        "tsBuildInfoFile": "../../node_modules/.tmp/tsconfig.app.tsbuildinfo",
        "target": "es2020",
        "useDefineForClassFields": true,
        "lib": [
            "es2020",
            "dom",
            "dom.iterable"
        ],
        "module": "esnext",
        "skipLibCheck": true,
        "composite": true,
        "emitDeclarationOnly": true,
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "jsx": "react-jsx",
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "noUncheckedSideEffectImports": true,
        "allowSyntheticDefaultImports": true,
        "resolvePackageJsonExports": true,
        "resolvePackageJsonImports": true,
        "resolveJsonModule": true,
        "declaration": true,
        "preserveConstEnums": true,
        "incremental": true,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "strictBindCallApply": true,
        "strictPropertyInitialization": true,
        "strictBuiltinIteratorReturn": true,
        "alwaysStrict": true,
        "useUnknownInCatchVariables": true
    },
    "files": [
        "./src/Header.tsx",
        "./src/Title.tsx",
        "./src/main.tsx",
        "./src/vite-env.d.ts",
        "../../types/global.d.ts"
    ],
    "include": [
        "src",
        "../../types/**.d.ts"
    ]
}
EOD
20250407

yarn workspace의 root에 설정한 global type을 하위 Package에서 불러오는 방법

댓글