Crearea de componente personalizate în React Native cu TypeScript

Am decis să convertesc proiectul meu ReactNative în TypeScript. Sunt nou în TypeScript și îmi este dificil să rezolv această problemă cu componentele personalizate și moștenirea. Acesta este codul meu (redus)

import React, { Component } from "react";
import { Button, View } from "react-native";

interface IMyComponentProps extends React.Props<IMyComponentProps> {
  colWidth?: number;
}

class MyComponent extends Component<IMyComponentProps> {
  getProps() {
    return this.props;
  }
}

class MyButton extends MyComponent {
  render() {
    return (
      <View {...this.getProps()}>
        <Button title={this.props.title} onPress={this.props.onPress} />
      </View>
    );
  }
}

Primește o subliniere roșie pe ...this.getProps() în componenta MyButton. De asemenea, this.props.title și this.props.onPress nu sunt identificate.

Mă poți ajuta, te rog, cu tipurile pe care trebuie să le definesc pentru aceste două clase.

Mulțumesc

Răspuns #1

Mai întâi, trebuie să declari că un MyButton are proprietăți mai specifice, așa că MyComponent trebuie să fie parametrizat:

class MyComponent<P extends IMyComponentProps> extends Component<P> {
  getProps() {
    return this.props
  }
}

Apoi extinde corect MyComponent și declară-i proprietățile:

interface IMyButtonProps extends IMyComponentProps {
  colWidth?: number;
  title: string;
  onPress: () => void;
}


class MyButton extends MyComponent<IMyButtonProps> {
  render() {
    return (
      <View {...this.getProps()}>
        <Button title={this.props.title} onPress={this.props.onPress} />
      </View>
    );
  }
}

Apoi, decât dacă folosești ref-uri, care sunt greu de înțeles, nu extinde React.Props. Doar declară-ți interfețele astfel:

interface IMyComponentProps {
  colWidth?: number;
}
interface IMyButtonProps extends IMyComponentProps {
  title: string;
  onPress: () => void;
}

Toți împreună acum!

i

mport React, { Component } from "react";
import { Button, View } from "react-native";

interface IMyComponentProps {
  colWidth?: number;
}

class MyComponent<P extends IMyComponentProps> extends Component<P> {
  getProps() {
    return this.props
  }
}

interface IMyButtonProps extends IMyComponentProps {
  title: string;
  onPress: () => void;
}

class MyButton extends MyComponent<IMyButtonProps> {
  render() {
    return (
      <View {...this.getProps()}>
        <Button title={this.props.title} onPress={this.props.onPress} />
      </View>
    );
  }
}