Я использую ReactXP (который использует TypeScript) для кодирования клиента чата, который отображает одну панель, содержащую стопку сообщений в верхней части и форму внизу для отправки новых сообщений чата.Я пытаюсь разбить стек сообщений на массив объектов типа ChatMessage.В этом конкретном примере используется расширение ReactXP для VirtualListView.
Когда я пытаюсь скомпилировать приведенный ниже пример, я получаю следующую ошибку:
TS2322: Type '{ messages: ChatMessage[]; }' is not assignable to type 'ChatMessage[]'.
Property 'length' is missing in type '{ messages: ChatMessage[]; }
Из сообщения об ошибке видно, что ChatMessage[] не интерпретируется как массив, поскольку в нем отсутствует свойство 'length ', которое можно ожидать для массива.
Как правильно преобразовать ChatMessage[], чтобы ChatMessageStackView вызывало render() без ошибок?Почему messages становится вложенным объектом, когда я ссылаюсь на this.props.stack?
Вот пример:
import RX = require('reactxp');
import { VirtualListView, VirtualListViewItemInfo } from 'reactxp-virtuallistview';
export interface ChatMessage extends VirtualListViewItemInfo {
content: string,
username: string,
timestamp: string
}
interface ChatMessageStackProps {
stack: ChatMessage[];
}
export const ChatMessageStack = (messages:ChatMessage[]) =>
(
<VirtualListView
itemList={messages}
renderItem={renderMessage}
animateChanges={ true }
skipRenderIfItemUnchanged={ true }
/>
)
function renderMessage(message:ChatMessage, hasFocus?: boolean) {
return (
<RX.View>
<RX.Text>
{message.timestamp} {message.username} {message.content}
</RX.Text>
</RX.View>
)
}
export class ChatMessageStackView extends RX.Component<ChatMessageStackProps, RX.Stateless> {
constructor(props:ChatMessageStackProps) {
super(props);
}
render() {
return (
<ChatMessageStack messages={this.props.stack}/>
);
}
}
Спасибо за вашу помощь.