reactjs - Hur man deklarerar olika state och props för underklasser i React med TypeScript

Superny på TypeScript och statisk typning i allmänhet med React, så

Givet att jag har denna överordnade komponent:

interface ParentProps {
 something: string
}

interface ParentState {
 somethingElse: string
}

export default class ParentComponent extends React.Component<ParentProps, ParentSate> {

  // Component Logic.

  sharedFunction() {
    // Some shared function.
  }
}

Hur kan jag deklarera olika props och state på en barnkomponent, till exempel:

interface ChildProps {
 something: string
}

interface ChildState {
 somethingElse: string
}

export default class ChildComponent extends ParentComponent<ChildProps, ChildState> {
  // Child component logic.
}

När jag försöker ovanstående får jag:

[ts] Type 'ParentComponent' is not generic.

Så, vad är det bästa sättet att uppnå denna separation?, tack.

Svar #1

Du kan göra ParentComponent generisk också så att ChildComponent kan ange olika props och state:

interface ParentProps {
    something: string
}

interface ParentState {
    somethingElse: string
}

export class ParentComponent<TProps extends ParentProps = ParentProps, TState extends ParentState = ParentState>
extends React.Component<TProps, TState> {

    // Component Logic.

    sharedFunction() {
        // Some shared function.
    }
}

interface ChildProps {
    something: string
}

interface ChildState {
    somethingElse: string
}

export class ChildComponent extends ParentComponent<ChildProps, ChildState> {
    // Child component logic.
}