React Native Typescript babel-plugin-module-resolver 错误：找不到模块或其对应的类型声明

Question

我可以毫无问题地使用带有 Javascript 的模块解析器。 实际上，我可以在运行时毫无问题地将它与 Typescript 一起使用，但在开发部分我找不到Cannot find module or its corresponding type declerations问题的解决方案。 我正在寻找答案，我做错了哪一部分？

以下是文件：

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": [
          { "@shared-components": "./shared/components" },
          { "@shared-constants": "./shared/constants" },
          { "@shared-theme": "./shared/theme" },
          { "@font-size": "./shared/theme/font-size" },
          { "@api": "./services/api/index" },
          { "@fonts": "./shared/theme/fonts/index" },
          { "@colors": "./shared/theme/colors" },
          { "@theme": "./shared/theme/index" },
          { "@services": "./services" },
          { "@screens": "./screens" },
          { "@utils": "./utils/" },
          { "@assets": "./assets/" }
        ],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    ]
  ]
}

配置文件

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    // ? Custom ones
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    // ? Babel Plugin Module Resolver
    "baseUrl": "./src",
    "paths": {
      "@shared-components": ["./shared/components"],
      "@shared-constants": ["./shared/constants"],
      "@shared-theme": ["./shared/theme"],
      "@font-size": ["./shared/theme/font-size"],
      "@api": ["./services/api/index"],
      "@fonts": ["./shared/theme/fonts/index"],
      "@colors": ["./shared/theme/colors"],
      "@theme": ["./shared/theme/index"],
      "@services": ["./services"],
      "@screens": ["./screens"],
      "@utils": ["./utils/"],
      "@assets": ["./assets/"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

在 .tsx 文件中的用法

import HomeScreen from "@screens/home/HomeScreen";
import SearchScreen from "@screens/search/SearchScreen";
import DetailScreen from "@screens/detail/DetailScreen";

错误

谢谢你的帮助:)

Answer 1

在您的配置中映射paths的方式看起来不对。 正确的应该是：

paths": {
  "@screens/*": ["./screens/*"], // You need to specify prefix `/*` as well
  // others ...
}