React Native SectionList: Какие правильные типы TypeScript

Question

Я создаю приложение React Native с использованием TypeScript.Я пытаюсь использовать SectionList.Я следовал за документами, и вот мой код:

  renderSectionHeader = ({ section: { title } }: { section: { title: string } }) => (
    <ListItem title={title} />
  );

  render() {
    const { sections } = this.props;
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          keyExtractor={this.keyExtractor}
          sections={[
            {title: 'Title1', data: ['item1', 'item2']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
          ]}
          renderItem={this.renderItem}
          renderSectionHeader={this.renderSectionHeader}
        />
      </SafeAreaView>
    );
  }

Но строка renderSectionHeader={this.renderSectionHeader} выдает следующую ошибку TSLint:

[ts]
Type '({ section: { title } }: { section: { title: string; }; }) => Element' is not assignable to type '(info: { section: SectionListData<any>; }) => ReactElement<any> | null'.
  Types of parameters '__0' and 'info' are incompatible.
    Type '{ section: SectionListData<any>; }' is not assignable to type '{ section: { title: string; }; }'.
      Types of property 'section' are incompatible.
        Type 'SectionListData<any>' is not assignable to type '{ title: string; }'.
          Property 'title' is missing in type 'SectionListData<any>'. [2322]

Не нарушены ли типы SectionList?Или пример неверный?Или я что-то не так делаю?

Answer 1

interface Data {
...
}

const MySectionList = SectionList as SectionList<Data>;

<MySectionList
...
/>

работал на меня

Answer 2

Я новичок в TypeScript, так что этот вопрос может быть не лучшим, но вы можете проверить здесь React Native типы: React Native Types github

В строке 4243 вы можете увидетьthis:

renderSectionHeader?: (info: { section: SectionListData<ItemT> }) => React.ReactElement<any> | null;

Это означает, что для свойства renderSectionHeader требуется функция с одним аргументом, которая является объектом с полем раздела типа SectionListData<ItemT>.

Чтобы избавиться от опубликованной вами ошибки, вы можете сделать что-то вроде этого:

  renderSectionHeader = ({ section: { title } }: { section: { title: string } }): React.ReactElement<any>=> (<ListItem title={title} />)

  render() {
    const { sections } = this.props;
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          keyExtractor={this.keyExtractor}
          sections={[
            {title: 'Title1', data: ['item1', 'item2']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
          ]}
          renderItem={this.renderItem}
          renderSectionHeader={({section}: {section: SectionListData<string[]>}) => this.renderSectionHeader(section)}
        />
      </SafeAreaView>
    );
  }

Надеюсь, что это правильно и поможет вам.

РЕДАКТИРОВАТЬ: Если выне хотите указывать типы во время передачи, этот метод renderHeader будет безошибочным:

renderSectionHeader = ({ section }: {section: SectionListData<string[]>}): ReactElement<any> | null => (<Text>{section.title}</Text>)