TSlint неправильно работает с компонентами React Native Redux - PullRequest
Новая
       30

TSlint неправильно работает с компонентами React Native Redux

0 голосов
/ 01 февраля 2019

Допустим, у меня есть это 

interface IProps {
  text: string
}

class TextComponent extends PureComponent<IProps> {
  render() {
    return (
      <Text>{this.props.text}</Text>
    )
  }
}

function mapStateToProps(state: ITextComponentReduxStore) {
  return {
    text: state.text,
  }
}

function dispatchAction(dispatch: (x: any) => any) {
  return {
  }
}

export default connect(mapStateToProps, dispatchAction)(TextComponent)

Когда я хочу использовать этот компонент, я просто делаю 

<TextComponent />
^^^^^^^^^^^^^^^^^     <- Webstorm underlines this

Webstorm (TSLint) жалуется на 

TS2741: Property 'text' is missing in type '{}' but required in type 'Readonly<Pick<IProps, "text">>'.

Как я могу предотвратить это?

Реквизит является частью магазина Redux

1 Ответ

0 голосов
/ 01 февраля 2019

вы определяете реквизиты как необходимые 

interface IProps {
  text: string
}

Поэтому вам нужно использовать компонент 

<TextComponent text={“...”}/>

или вы определяете его как необязательный 

interface IProps {
  text?: string
}

, чтобы вы моглииспользуйте его как 

<TextComponent/>

, если вы хотите передать сложный объект в виде пропеллера 

interface IProps {
  data?: ProfileData[];
}

и интерфейс ProfileData, 

interface ProfileData {
    name: string;
    age: number;
    photos: string[];
}

, и вы можете использовать свойкомпонент 

<TextComponent data={[{name:”John”, age:26, photos:[“url1”,”url2”]}]}/>

или, если вы не хотите определять определенный тип, вы можете просто определить его как any

interface IProps {
  data?: any;
}

, но это не очень хороший выбор для машинописи.

...