@type/history中使用createBrowserHistory()时的Tslint错误

Question

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

我说错了，

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库的问题。typedef规则是在tslint.json设置中配置的，以便在包括history变量在内的地方要求类型定义。

这段代码可能还会显示TSLint的抱怨：

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

const history = createMyHistory();

..because history没有显式类型定义。

这里有两种不用// tslint:disable-next-line就可以解决错误的方法

• 禁用或以其他方式配置typedef规则以停止对这种情况的抱怨:参见https://palantir.github.io/tslint/rules/typedef/ & https://palantir.github.io/tslint/usage/configuration。这可能最终会成为您的tslint.json的一部分： {“规则”：{“类型胡枝子”：false }
• 向history变量添加显式类型定义： 历史:历史= createBrowserHistory()；

编辑:为了在下面的注释中增加更多的可见性，这里有两个名为History的类型/接口。一个是与DOM类型一起提供的全局定义的。另一个是在@types/history中定义的。不幸的是，令人困惑的是，他们俩的名字是一样的。如果您看到History<any>与History不兼容的错误，请从history将History添加到您的import中

import { createBrowserHistory, History } from 'history';

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