typescript - 未找到模块：无法解析“D:\FoodOderingApp\Client\screens\Item Listing”中的“components/Card Container/CardContainer”

Question

{
  "compilerOptions": {
    "target": "es6",
    "strictNullChecks": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "strict": true,
    "baseUrl": "./",
    "types": ["node"],
    "paths": {
      "helper/*": ["Helper/*"],
      "header/*": ["components/Header/*"],
      "components/*": ["components/*"],
      "navigation/*": ["navigation/*"],
      "screens/*": ["screens/*"],
      "states/*": ["State/*"]
    },
    "include": ["./Client/**/*"]
  }
}

文件结构

• 客户
• 组件
  - 标题
• 帮手
• 导航
• 屏幕
• 状态

即使我可以单击我的特定 .tsx 文件，我也找不到该模块

标签： typescripttsconfig-paths

Answer 1

{
  "compilerOptions": {
    "outDir": "../public",
    "module": "esnext",
    "target": "es5",
    "sourceMap": true,
    "noEmit": true,
    "skipLibCheck": true,
    "allowJs": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "baseUrl": "./",
    "rootDir": "./",
    "typeRoots": ["./node_modules/@types", "./src/@types"],
    "paths": {
      "@helper/*": ["Helper/*"],
      "@header/*": ["components/Header/*"],
      "@components/*": ["components/*"],
      "@navigation/*": ["navigation/*"],
      "@screens/*": ["screens/*"],
      "@states/*": ["State/*"]
    },
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "importsNotUsedAsValues": "preserve",
    "include": ["./Client/**/*"]
  }
}

当您确实要导入时，可以通过两种方式进行。

1. 和*

 "@screens/*":["screens/*"],

进口：

import ItemListing from '@screen/'

2. 如果我们*从路径中移除

 "@screens/":["screens/*"],

然后你可以像这样导入：

import ItemListing from '@screen'