javascript - Cómo acceder a this.props en una clase hija en una función que sobrescribe la función del padre

Quiero usar this.props.childName en una función hija que está definida en la función padre. Pero da un error de compilación de TypeScript (Property 'name' does not exist...). Si uso this.props.parentName, está bien. ¿Cómo puedo acceder a this.props de la clase hija?

interface Prop<T> {
  parentName: string
}

class Parent<T> extends React.Component<Prop<T>, State<T>> {
  constructor(props: Prop<T>) {
    super(props)
  }
  printName() {}
}

interface PropChildren<T> {
  childName: string
}

class Child<T> extends Parent<string> {
  constructor(props: PropChildren<T>) {
    super(props)
  }

  printName() {
    console.log(this.props.childName) // here I want to use children prop but compile error
  }
}

Respuesta #1

Su componente hijo extiende el componente padre, y el tipo de props en el padre es Prop<T>, que contiene solo la propiedad parentName.

Para tener PropChildren como el tipo de props en el componente hijo, deberías declararlo así:

class Child<T> extends React.Component< PropChildren<T>, State<T>> {
    // ...
}

Por cierto, no necesitas hacer que las interfaces de tus props sean genéricas (con <T>). Los genéricos se usan solo cuando la interfaz puede ser utilizada en diferentes contextos con diferentes tipos de datos.

Basado en tu comentario, aquí hay un ejemplo de cómo puedes compartir el comportamiento del padre con el hijo, pero aún así poder definir un tipo de dato diferente para las propiedades del hijo:

interface PropParent {
    parentName: string
}

class Parent<TProp extends PropParent> extends React.Component<TProp, State> {
    constructor(props: TProp) {
        super(props)
    }
    printName() {}
}

interface PropChildren extends PropParent {
    childName: string
}

class Child<T> extends Parent<PropChildren> {
    constructor(props: PropChildren) {
        super(props)
    }

    printName() {
        console.log(this.props.childName)
    }
}

Respuesta #2

primero, no necesitas ningún Genérico en la interfaz a menos que necesites usarlo en diferentes lugares. segundo, la clase Child también debería extender de React.Component, no de su padre. así que aquí está lo que podría ser un mejor código

import React from 'react'
interface IParentProps {
  readonly parentName: string;
  readonly children?: JSX.Element 
}
interface IPropsChild {
  readonly childName: string;
}
class Parent extends React.Component<IParentProps> {
  constructor(props: IParentProps) {
    super(props)
  }
  printName = () => {

  }
  render() {
    return <Child childName={this.props.parentName} />
  }

}
class Child extends React.Component<IPropsChild> {
  constructor(props:IPropsChild) {
    super(props)
  }
  printName = () => {
    console.log(this.props.childName)
  }
}