TypeScript和React-Redux中的阴影名称-Java 学习之路

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

1 回答

2
这是TSLint no-shadow rule的结果 . 它允许避免由无意隐藏的变量导致的错误 . 它需要为可以安全地隐藏的变量提供变通方法 .

这里 addTodo 导入被 addTodo prop阴影 . 这似乎是故意的，在这种情况下，规则是一个障碍 .

如果变量可能变得模糊，则可以通过强制执行不破坏对象的样式来避免 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冲突 .
回复于 2024-05-02T10:01:06+08:00

TypeScript和React-Redux中的阴影名称

1 回答

相关问题