Затененное имя в TypeScript и React-Redux - PullRequest
Новая
       9

Затененное имя в TypeScript и React-Redux

0 голосов
/ 24 октября 2018

Я создаю приложение React Native с TypeScript и React-Redux.

Я подключил свой компонент с помощью 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 Ответ

0 голосов
/ 24 октября 2018

Это результат TSLint no-shadow rule .Это позволяет избежать ошибок, возникающих из-за непреднамеренных теневых переменных.И это требует предоставления обходных путей для переменных, которые могут быть безопасно затенены.

Здесь addTodo import затеняется 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.1017 *.

Этот стиль может конфликтовать с ESLint prefer-destructuring rule .

...