TypeScript 和 React-Redux 中的阴影名称答案

【问题标题】：Shadowed name in TypeScript and React-ReduxTypeScript 和 React-Redux 中的阴影名称
【发布时间】：2019-03-28 20:43:33
【问题描述】：

我正在使用 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 时必须以不同的方式执行此操作？

【问题讨论】：

您已导入 addTodo 并从 this.props 解构了相同的变量。这是明显的阴影案例，您可以更改其中一个的名称以使其消失
@BoyWithSilverWings 是的，谢谢。介意将其发布为答案，以便我标记它吗？
我在使用 JS 和 ESLint 以及 Airbnb 的风格指南时遇到了基本相同的问题。这种风格指南禁止两者：不解构props 和隐藏变量名称，所以我觉得我必须违反一个规则或另一个。官方的处理方式是什么。我认为你应该重新提出这个问题，@J.Hesters。干杯。 :)

标签： reactjs typescript redux react-redux tslint

【解决方案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 冲突。

【讨论】：