从@types/history 使用 createBrowserHistory() 时出现 Tslint 错误

Question

我正在导入 @types/history 并在我的 React 应用程序中使用它提供的 createBrowserHistory() 函数。

我收到 tslint 错误提示，

ERROR in C:/Users/eshan/my-website/src/App.tsx
ERROR in C:/Users/eshan/my-website/src/App.tsx(13,11):
typedef: expected variable-declaration: 'history' to have a typedef

我确实四处看了看，但所有缓解这种情况的尝试似乎都旨在通过执行 /* tslint:disable */ 来删除 tslint 规则。我想添加类型支持，然后修复它。

import * as React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import './App.css';

class App extends React.Component {
  public render(): JSX.Element {
  const history = createBrowserHistory();

  return (
    <div className='App'>
      <Router history={history}>
        <Switch>
          <Route exact path='/' component={Landing}/>
          <Route exact path='/Home' component={Home}/>
        </Switch>
      </Router>
    </div>
    );
  }
}

export default App;

Answer 1

您的问题根本不在于 @types/history 库。这是在您的 tslint.json 设置中配置了 typedef 规则，要求在包括您的 history 变量的地方进行类型定义。

此代码可能还会出现 TSLint 投诉：

const createMyHistory = () => ({
    someMember: "someValue",
});

const history = createMyHistory();

..因为 history 没有明确的类型定义。

这里有两种方法可以在没有 // tslint:disable-next-line 的情况下解决错误：

禁用或以其他方式配置 typedef 规则以停止抱怨这种情况：请参阅 https://palantir.github.io/tslint/rules/typedef/ & https://palantir.github.io/tslint/usage/configuration。这可能最终成为你的一部分 tslint.json:
```
{
    "rules": {
        "typedef": false
    }
}
```

向history变量添加显式类型定义：

const history: History = createBrowserHistory();

编辑：为了让下面的评论更加可见，这里有两个名为 History 的 types/interfaces。一种是全局定义的，带有 DOM 类型。另一个是 @types/history 中定义的那个。不幸的是，他们都有相同的名字，这让人感到困惑。如果您看到有关 History<any> 与 History 不兼容的错误，请将 History 添加到您的 import 来自 history:

import { createBrowserHistory, History } from 'history';

这将使您的代码引用 @types/history 的版本。

从@types/history 使用 createBrowserHistory() 时出现 Tslint 错误

Tslint error when using createBrowserHistory() from @types/history

typescript

tslint