TypeScript 和 React-Redux 中的阴影名称

Question

我正在使用 TypeScript 和 React-Redux 构建一个 React Native 应用程序。

我使用 connect:

连接了我的组件

import { addTodo } from "../../redux/actions";

export interface Props {
  addTodo: (todo: Todo) => void;
}

// ... component code
  handleAdd = (todo: Todo) => {
    const { addTodo, ... } = this.props; // ... = more destructuring
    // some code ... eventually:
    addTodo(todo);
  } 

export default connect(
  mapStateToProps,
  { addTodo }
)(MyComponent);

现在的问题是，TSLint 抱怨阴影变量：

[tslint] Shadowed name: 'addTodo'

这感觉像是 TypeScript 不识别 React-Redux 功能的错误。我的意思是它在 Redux 文档中教导以这种方式将调度映射到道具。

我是不是做错了什么？还是在使用 TypeScript 时必须以不同的方式执行此操作？

Answer 1

这是 TSLint no-shadow rule 的结果。它可以避免因无意中隐藏变量而导致的错误。并且它需要为可以安全隐藏的变量提供解决方法。

此处 addTodo 导入被 addTodo 属性隐藏。这似乎是故意的，在这种情况下规则是一个障碍。

no-shadow 的此类问题可以通过强制执行一种在变量可能变得不明确时不解构对象的样式来避免。这允许解决具有相似命名属性的常见问题，例如在 props 和 state 对象中。这也可以提高某些地方的可读性，因为不需要回溯，而其他地方可能会变得更冗长：

import * as actions from "../../redux/actions";

// ... component code
  handleAdd = (todo: Todo) => {
    const { props } = this;
    // some code ... eventually:
    props.addTodo(todo);
  } 

export default connect(
  mapStateToProps,
  { addTodo: actions.addTodo }
)(MyComponent);

对于作为道具的多个动作创建者，可以使用一些 pick 实现来代替 { addTodo: actions.addTodo }。

此样式可能与 ESLint 冲突prefer-destructuring rule。

TypeScript 和 React-Redux 中的阴影名称

Shadowed name in TypeScript and React-Redux

typescript

reactjs

tslint

redux

react-redux