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

Question

我收到以下错误

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"]
}

Answer 1

来自库定义部分的 flowtype document，它说：

A libdef is a special file that informs Flow about the type signature of some specific third-party module or package of modules that your application uses. If you’re familiar with languages that have header files (like C++), you can think of libdefs as a similar concept.

General Best Practices

Try to provide a libdef for each third-party library your project uses.

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

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

然后在根路径下寻找libdefs.js，应该是有的。或者自己创建。

对于每个模块，如下声明。以rxjs为例：

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

官方推荐的方式，不需要index.d.ts修改

Answer 2

typeRoots 选项指定在何处查找可能包含类型信息的包。 documentation 一直说编译器正在寻找 packages。

我已经重现了您描述的结构并得到了与您相同的错误。然后我在 typings 下创建了一个 react-native-camera 并将 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 目录。

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

Correct way to handle undefined declaration files (index.d.ts)

node-modules

typescript

reactjs

react-native

typescript-typings

General Best Practices