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

Question

我正在我的 React 应用程序中导入@types/history并使用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 */. 我想添加类型支持，然后修复它。

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图书馆。这是typedef规则在您的tslint.json设置中配置为需要在包括您的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在起作用。一种是 DOM 类型附带的全局定义的。另一个是在@types/history. 不幸的是，它们都具有相同的名称，这令人困惑。如果您看到与History<any>不兼容的错误History，请添加History到您的importfrom history：

import { createBrowserHistory, History } from 'history';

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