部分列表和打字稿答案

【问题标题】：SectionList & Typescript部分列表和打字稿
【发布时间】：2018-12-21 22:18:56
【问题描述】：

键入 SectionList 的正确方法是什么？我遇到了这个工作的错误（来自docs example）：

        <SectionList
          renderItem={({item, index}) => <Text key={index}>{item}</Text>}
          renderSectionHeader={({section: {title}}) => (
            <Text style={{fontWeight: 'bold'}}>{title}</Text>
          )}
          sections={ticksData}
          keyExtractor={(item, index) => item + index}
        />;

但这不是：

const renderSectionHeader=({section: {title}}) => (
  <Text style={{fontWeight: 'bold'}}>{title}</Text>
 );

return (
        <SectionList
          renderItem={({item, index}) => <Text key={index}>{item}</Text>}
          renderSectionHeader={renderSectionHeader}
          sections={ticksData}
          keyExtractor={(item, index) => item + index}
        />;

我收到此错误：

属性“renderSectionHeader”的类型不兼容。类型 '({ section: { title } }: { section: { title: any; }; }) => Element' 不可分配给类型 '(info: { section: SectionListData; }) => ReactElement'。参数 '__0' 和 'info' 的类型不兼容。类型'{部分：SectionListData; }' 不可分配给类型 '{ section: { title: any; }; }'。属性“部分”的类型不兼容。类型 'SectionListData' 不可分配给类型 '{ title: any; }'。 “SectionListData”类型中缺少属性“title”。

【问题讨论】：

标签： typescript react-native react-native-sectionlist

【解决方案1】：

有同样的问题，来到这个答案，但还没有解决方案，所以这是我的：

import { SectionList, SectionListData } from 'react-native';

interface IHeader {
  section: SectionListData<{ title: string }>
}

const renderSectionHeader=({section: {title}}: IHeader) => (
  <Text style={{fontWeight: 'bold'}}>{title}</Text>
);

【讨论】：