React + typescript + webpack 和 ui-router-react答案

【问题标题】：React + typescript + webpack and ui-router-reactReact + typescript + webpack 和 ui-router-react
【发布时间】：2017-03-01 23:59:58
【问题描述】：

我一直在关注 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，但显然它是。

这是分支 reactRouting 下的 repo 链接

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

【问题讨论】：

这里的问题太多，无法具体回答。考虑将它们分解成孤立的问题，包括配置和分解组件。

标签： reactjs typescript webpack url-routing

【解决方案1】：

看起来这些错误是ui-router-react 的类型生成的结果。

如果您查看，请查看node_modules\ui-router-core\lib\common\common.d.ts 文件。\，388 行，您会看到此

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

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

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

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

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

【讨论】：

是的，我注意到，但是任何时候我运行 npm install 都需要再次更改这些文件，所以这不是一个很好的解决方法，但你的权利就是这样。

【解决方案2】：

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

当我收到这些错误时进入 app.tsx： [at-loader] node_modules/ui-router-core/lib/common/common.d.ts:388:31 TS7006 中的错误：参数 'a' 隐含'any' 类型。

[at-loader] node_modules/ui-router-core/lib/common/common.d.ts:388:34 TS7006 中的错误：参数“b”隐式具有“任何”类型。 [at-loader] node_modules/ui-router-core/lib/resolve/resolveContext.d.ts:7:22 TS7005 中的错误：变量“NATIVE_INJECTOR_TOKEN”隐含地具有“任何”类型。

[at-loader] node_modules/ui-router-core/lib/transition/transitionHook.d.ts:13:37 TS7006 中的错误：参数“error”隐式具有“any”类型。

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

usernameValidator = (event: React.KeyboardEvent => {

改为

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

修复了最后两个问题。

【讨论】：

【解决方案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"
]

然后……就是这样！

【讨论】：