인프런 커뮤니티 질문&답변

제가 @types/styled-components를 설치하고 src/@types/styled.d.ts 와 같은 앰비언트 모듈 파일도 만들었습니다. 제가 알기론 타입스크립트 컴파일러는 non-relative-path로 import 할 경우에 node_modules/@types를 먼저 뒤져보고 없으면 앰비언트 모듈 파일을 찾아보는걸로 알고 있는데 왜 App.tsx에서 참조하는건 src/@types/styled.d.ts 파일인지 알 수 있을 까요?? traceResolution 옵션을 줘서 컴파일 과정을 찾아봐도 node_modules/@types에 있는 styled-components/index.d.ts 파일을 찾아서 참조한다고 나와잇는데 영문을 모르겠습니다

//src/@types/styled.d.ts
declare module "styled-components" {
  interface TestProps {
    name: string
  }
}

//src/App.tsx
import styled from "styled-components"

const test: styled.TestProps = { name: "123"}

function App() {
  return <div>{test.name}</div>
}

export default App;

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "noImplicitAny": false,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "noEmit": true,
    "traceResolution": true
  },
  "include": [
    "src"
  ]
}

======== Resolving type reference directive 'styled-components', containing file 'C:/Users/boh00/github/apollo-todolist/__inferred type names__.ts', root director
y 'C:/Users/boh00/github/apollo-todolist/node_modules/@types,C:/Users/boh00/node_modules/@types'. ========
Resolving with primary search path 'C:/Users/boh00/github/apollo-todolist/node_modules/@types, C:/Users/boh00/node_modules/@types'.
File 'C:/Users/boh00/github/apollo-todolist/node_modules/@types/styled-components/package.json' exists according to earlier cached lookups.
'package.json' does not have a 'typings' field.
'package.json' has 'types' field 'index.d.ts' that references 'C:/Users/boh00/github/apollo-todolist/node_modules/@types/styled-components/index.d.ts'.
File 'C:/Users/boh00/github/apollo-todolist/node_modules/@types/styled-components/index.d.ts' exist - use it as a name resolution result.
Resolving real path for 'C:/Users/boh00/github/apollo-todolist/node_modules/@types/styled-components/index.d.ts', result 'C:/Users/boh00/github/apollo-todolist/no
de_modules/@types/styled-components/index.d.ts'.
======== Type reference directive 'styled-components' was successfully resolved to 'C:/Users/boh00/github/apollo-todolist/node_modules/@types/styled-components/in
dex.d.ts' with Package ID '@types/styled-components/index.d.ts@5.1.15', primary: true. ========