TypeScript жалуется на условное присвоение класса: тип элемента JSX 'TouchableComponent' не имеет никакой конструкции или сигнатур вызовов

Question

У меня есть этот кусок кода:

protected getCardContent = (message: string): JSX.Element => {
    const { placeInfo } = this.props;
    const TouchableComponent = Platform.OS === 'ios' ? TouchableOpacity : TouchableNativeFeedback
    return (
        <View>
            <Text>{placeInfo.name}'s phone number:</Text>
            <TouchableComponent onPress={() => {}}>
                <Text>{placeInfo.phoneNumber}</Text>
            </TouchableComponent>
        </View>
    )
}

При вызове this.getCardContent в моем методе рендеринга он работает как на устройствах iOS, так и Android; однако TS жалуется, говоря:

const TouchableComponent: typeof TouchableOpacity | typeof TouchableNativeFeedback
JSX element type 'TouchableComponent' does not have any construct or call signatures.

Это потому, что TouchableComponent может иметь любой тип конструктора, поэтому TS явно не знает, что такое экземплярный тип? Что может быть лучше для решения этой проблемы, которая работает с компилятором TS?

Answer 1

TypeScript не выводит желаемый тип для TouchableComponent. Сам не запустив следующий код, я избавился от всех ошибок TypeScript, таких как:

import { ComponentType } from 'react';
import { Platform, TouchableOpacity, TouchableOpacityProps, TouchableNativeFeedback, TouchableNativeFeedbackProps, View, Text } from 'react-native';

const getCardContent = (message: string): JSX.Element => {
    const { placeInfo } = this.props;
    const TouchableComponent: ComponentType<TouchableOpacityProps | TouchableNativeFeedbackProps> = Platform.OS === 'ios' ? TouchableOpacity : TouchableNativeFeedback;
    return (
        <View>
            <Text>{placeInfo.name}'s phone number:</Text>
            <TouchableComponent onPress={() => {}}>
                <Text>{placeInfo.phoneNumber}</Text>
            </TouchableComponent>
        </View>
    );
}

Единственное, что я изменил, - это объявление TouchableComponent: const TouchableComponent: ComponentType<TouchableOpacityProps & TouchableNativeFeedbackProps>.

Почему эти типы?

• TouchableOpacity косвенно расширяется React.Component<TouchableOpacityProps>
• TouchableNativeFeedback косвенно расширяется React.Component<TouchableNativeFeedbackProps>