0

我用 typescript 在 cra 中安装了 styled-components，我在 src/@types/styled.d.ts 中编写了环境模块，并在 src/App.tsx 中导入了“styled-components”

// src/@types/style.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;

我想我当然会参考我安装的类型据我所知，如果 typescript 在 node_modules/@types 中找不到它们，它会在环境模块声明中搜索非相对路径。

但我实际上是在引用我写的环境模块

但是，当我实际尝试提供 trace_resolution 选项时，即使在 node_modules/@types 中找到该文件，它也会引用该文件。

请告诉我答案为什么ㅜㅜ

这是我的编译结果

======== 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. ========

这是我的 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"
  ]
}
4

0 回答 0