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 文档中教导以这种方式将 dispatch 映射到 props。

难道我做错了什么？或者您在使用 TypeScript 时是否必须以不同的方式执行此操作？

Answer 1

no-shadow这是 TSLint规则的结果。它可以避免由于无意的隐藏变量而导致的错误。它还需要为可以安全隐藏的变量提供解决方法。

这里addTodoimport 被 prop 遮盖了addTodo。看来这是故意的，规则在这种情况下是一个障碍。

可以通过强制执行一种样式来避免此类问题，no-shadow在这种样式中，如果变量可能变得不明确，则对象不会被解构。这允许解决具有类似命名属性的常见问题，例如 inprops和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 }.

prefer-destructuring这种风格可能与 ESLint规则相冲突。