React/TypeScript: extending a component with additional properties

Question

I am trying to use react to recreate my currents components (written in pure typescript) but I can't find a way to give additional props to a component extending an other.

export interface DataTableProps {     columns: any[];     data: any[]; }  export class DataTable extends React.Component<DataTableProps, {}> {    render() {        // -- I can use this.props.columns and this.props.data --    } }  export class AnimalTable extends DataTable {     render() {        // -- I would need to use a this.props.onClickFunction --      } } 

My problem is that I need to give AnimalTable some props that would be irrelevant to DataTable. How can I do that ?

Answer 1

You'll need to make DataTable generic so that you'll be able to use an interface which extends DataTableProps:

export interface AnimalTableProps extends DataTableProps {     onClickFunction: Function; }  export class DataTable<T extends DataTableProps> extends React.Component<T, {}> { }  export class AnimalTable extends DataTable<AnimalTableProps> {     render() {         // this.props.onClickFunction should be available     } } 

Answer 2

For those who need, base classes can declare required/abstract methods that all instances must implement:

import { Component } from 'react'   abstract class TestComponent<P = {}, S = {}, SS = any> extends Component<P, S, SS> {   abstract test(): string }   type Props = {   first: string,   last: string, }  type State = {   fullName: string, }  class MyTest extends TestComponent<Props, State> {   constructor(props: Props) {     super(props)     this.state = {       fullName: `${props.first} ${props.last}`     }   }    test() {     const { fullName } = this.state     return fullName   } }