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中的阴影名称

1 个答案: