React + typescript + webpack 和 ui-router-react

Question

我一直在关注 ui-router-react 文档 (https://ui-router.github.io/react/) 我在导入时遇到了很多关于 webpack 编译我的代码库的问题

import {UIRouter, UIView, UISref, UISrefActive, pushStateLocationPlugin} from 'ui-router-react';

进入 app.tsx 是当我收到这些错误时：

ERROR in [at-loader] node_modules/ui-router-core/lib/common/common.d.ts:388:31
    TS7006: Parameter 'a' implicitly has an 'any' type.

ERROR in [at-loader] node_modules/ui-router-core/lib/common/common.d.ts:388:34
    TS7006: Parameter 'b' implicitly has an 'any' type.

ERROR in [at-loader] node_modules/ui-router-core/lib/resolve/resolveContext.d.ts:7:22
    TS7005: Variable 'NATIVE_INJECTOR_TOKEN' implicitly has an 'any' type.

ERROR in [at-loader] node_modules/ui-router-core/lib/transition/transitionHook.d.ts:13:37
    TS7006: Parameter 'error' implicitly has an 'any' type.

ERROR in [at-loader] src/components/loginComponent.tsx:23:33
    TS2314: Generic type 'KeyboardEvent<T>' requires 1 type argument(s).

ERROR in [at-loader] src/components/loginComponent.tsx:32:31
    TS2314: Generic type 'KeyboardEvent<T>' requires 1 type argument(s).

我认为我的 webpack.config.js webpack 不应该查看 node_modules 但显然它是。

这里是 link 分支 reactRouting

下的 repo

https://github.com/JMStudiosJoe/ReactPractice/tree/reactRouting

Answer 1

看起来这些错误是 ui-router-react 的输入方式产生的结果。

如果你查看 node_modules\ui-router-core\lib\common\common.d.ts 文件。\，第 388 行，你会看到这个

export declare type sortfn = (a, b) => number;

如您所见，a 和 b 没有类型信息关联。与他们。如果您手动编辑此行，使其看起来像

export declare type sortfn = (a: any, b: any) => number;

前两个编译错误将消失。如果转到您提供的错误列表中的每个 file/line 并执行相同的操作，您的项目将编译。

现在，这当然是一个临时措施，真正的类型应该不是 any。这（即打字）应该由包的作者修复。但是，以这种方式编辑类型定义文件将暂时解除阻止。

Answer 2

有一个问题，但当解决方案在 tsconfig 文件中时，我正在查看 webpack 配置。您可以设置 "noImplicitAny": false 选项以消除任何错误

into app.tsx is when I get these errors: ERROR in [at-loader] node_modules/ui-router-core/lib/common/common.d.ts:388:31 TS7006: Parameter 'a' implicitly has an 'any' type.

ERROR in [at-loader] node_modules/ui-router-core/lib/common/common.d.ts:388:34 TS7006: Parameter 'b' implicitly has an 'any' type. ERROR in [at-loader] node_modules/ui-router-core/lib/resolve/resolveContext.d.ts:7:22 TS7005: Variable 'NATIVE_INJECTOR_TOKEN' implicitly has an 'any' type.

ERROR in [at-loader] node_modules/ui-router-core/lib/transition/transitionHook.d.ts:13:37 TS7006: Parameter 'error' implicitly has an 'any' type.

为了消除其他错误，需要操纵我的 React 函数参数类型

usernameValidator = (event: React.KeyboardEvent => {

改为

usernameValidator = (event: React.ChangeEvent<HTMLInputElement>) => {

解决了最后 2 个问题。

Answer 3

我建议不要将 "noImplicitAny" 设置为 true 因为它在您自己的代码库中非常有用，可以确保您充分利用 Typescript 的强大功能之一（类型检查).

您的问题是您的打字稿转译器正在处理您的 node_modules 库。而且你真的不想要那个，因为你信任你的第三方库。

最简单的停止方法是在 tsconfig.json (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)

中添加一个 exclude 字段

如果您的 tsconfig.json 位于根文件夹中，您的 node_modules 文件夹也是如此，您可以添加：

"exclude": [
    "node_modules"
]

然后...就这样了！

React + typescript + webpack 和 ui-router-react

React + typescript + webpack and ui-router-react

url-routing

typescript

reactjs

webpack