处理未定义声明文件的正确方法（index.d.ts）

IT技术 reactjs typescript react-native node-modules typescript-typings
2021-05-12 10:04:48

我收到以下错误

error TS7016: Could not find a declaration file for module 'react-native-camera'. '/Users/ilja/Documents/Repositories/blok/node_modules/react-native-camera/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-native-camera` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native-camera';`

作为快速修复，我在typings/index.d.ts项目的根目录创建了（没有 @types/react-native-camera）文件并填充它

declare module 'react-native-camera';

然后，在我的 tsconfig 文件中，我将它添加到我的类型根目录中

"typeRoots": ["node_modules/@types", "./typings"],

但是我在构建时仍然遇到同样的错误，导致我认为我的实现不正确，我错过了什么？

编辑，我完整的 tsconfig 看起来像这样

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "lib": ["es7"],
    "allowJs": true,
    "checkJs": true,
    "jsx": "react-native",
    "removeComments": true,
    "outDir": "./dist",
    "typeRoots": ["node_modules/@types", "./typings"],
    "experimentalDecorators": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "strict": true
  },
  "exclude": ["./node_modules", "./android", "./ios", "./assets", "./__tests__", "./dist"],
  "include": ["./src"]
}
2个回答

该typeRoots选项指定到哪里寻找包可能包含类型信息。该文件口口声声说编译器正在寻找包。

我已经复制了您描述的结构并得到了与您相同的错误。然后我创建了一个react-native-cameraundertypings并移动到index.d.ts那里，这样我最终得到了这个结构：

typings/
└── react-native-camera
    └── index.d.ts

使用这种结构，编译运行得很好。

使用typings目录结构很好，如果你想要那种结构。对于某些项目，我使用typings目录。对于其他项目，我更喜欢更简单的东西：.d.ts源代码树中的一个文件，它声明了所有需要声明的内容。所以如果我从你给出的描述开始，但是转储typings并添加src/definitions.d.ts包含

declare module 'react-native-camera';

然后代码编译就好了。

使用什么确实是一个偏好问题。通常当一个项目变得如此复杂以至于src/definitions.d.ts难以管理或难以理解时，我会转向使用typings目录。

从流类型文档，库定义部分，它说：

libdef 是一个特殊文件，它通知 Flow 您的应用程序使用的某些特定第三方module或module包的类型签名。如果您熟悉具有头文件的语言（如 C++），您可以将 libdefs 视为类似的概念。

一般最佳实践

尝试为您的项目使用的每个第三方库提供一个 libdef。

查看根路径中的.flowconfig，您将看到它已在那里定义。

[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow
./libdefs.js

然后在根路径中寻找libdefs.js，它应该在那里。或者只是自己创建它。

对于每个module，如下声明。就拿rxjs例如：

declare module 'rxjs' { declare var exports: any; }

这是官方的建议方式，不需要修改index.d.ts。

其它你可能感兴趣的问题
上一篇在 createMuiTheme 中覆盖主题变量时如何设置断点 下一篇为什么 webpack 代码拆分对我不起作用？