An abstract class featuring a nested generic function that is also abstract

Question

An abstract class featuring a nested generic function that is also abstract

I am working on creating a dynamic table that can change its content and position based on a special row unique to each page.

Currently, I'm encountering an error

The generic type 'Table<SpecialFunctions>' requires 1 type argument(s).ts(2314)

when classes are extending the abstract Table class.

I have realized that in an abstract class, the child classes' getSpecialFunctions() method should return SpecialFunctions. How can I make this method return a specific type for each individual child class?


abstract class Table<SpecialFunctions> {
  constructor() {}

  loadData() {}
  showTable() {}
  updateCell() {}

  abstract getSpecialFunctions(): SpecialFunctions;
}

class DoneWorksPageTable extends Table {
  getSpecialFunctions(): TypeForSpecialRowOnDoneWorksPage{
    return {
      text: "test",
      addNewDoneWork: () => console.log("test done work class"),
    };
  }
}
class InformationPageTable extends Table {
  getSpecialFunctions(): TypeForSpecialRowOnInformationPage{
    return {
      toLoad: ["file", "table", "text", "image"],
      addNewInfo: () => console.log("test info class"),
    };
  }
}

typescript

Answer 1

Answer №1

The Table class you created is generic, with a type parameter called SpecialFunctions. This name functions as a placeholder in this context, similar to how parameters work in functions. The choice of name is up to you as the developer, as it only holds significance for you, not the compiler – which could easily use something like T instead.

Since the Table class mandates a type parameter, you must specify it whenever you use the class – much like providing arguments in a function call.

Therefore, you must indicate the necessary types when extending the class:

interface TypeForSpecialRowOnDoneWorksPage {}
interface TypeForSpecialRowOnInformationPage{}

abstract class Table<SpecialFunctions> {
  constructor() {}

  loadData() {}
  showTable() {}
  updateCell() {}

  abstract getSpecialFunctions(): SpecialFunctions;
}

class DoneWorksPageTable extends Table<TypeForSpecialRowOnDoneWorksPage> {
  getSpecialFunctions(): TypeForSpecialRowOnDoneWorksPage{
    return {
      text: "test",
      addNewDoneWork: () => console.log("test done work class"),
    };
  }
}
class InformationPageTable extends Table<TypeForSpecialRowOnInformationPage> {
  getSpecialFunctions(): TypeForSpecialRowOnInformationPage{
    return {
      toLoad: ["file", "table", "text", "image"],
      addNewInfo: () => console.log("test info class"),
    };
  }
}

Check out the live example on the TypeScript Playground here.

Answer 2

The Table class you created is generic, with a type parameter called SpecialFunctions. This name functions as a placeholder in this context, similar to how parameters work in functions. The choice of name is up to you as the developer, as it only holds significance for you, not the compiler – which could easily use something like T instead.

Since the Table class mandates a type parameter, you must specify it whenever you use the class – much like providing arguments in a function call.

Therefore, you must indicate the necessary types when extending the class:

interface TypeForSpecialRowOnDoneWorksPage {}
interface TypeForSpecialRowOnInformationPage{}

abstract class Table<SpecialFunctions> {
  constructor() {}

  loadData() {}
  showTable() {}
  updateCell() {}

  abstract getSpecialFunctions(): SpecialFunctions;
}

class DoneWorksPageTable extends Table<TypeForSpecialRowOnDoneWorksPage> {
  getSpecialFunctions(): TypeForSpecialRowOnDoneWorksPage{
    return {
      text: "test",
      addNewDoneWork: () => console.log("test done work class"),
    };
  }
}
class InformationPageTable extends Table<TypeForSpecialRowOnInformationPage> {
  getSpecialFunctions(): TypeForSpecialRowOnInformationPage{
    return {
      toLoad: ["file", "table", "text", "image"],
      addNewInfo: () => console.log("test info class"),
    };
  }
}

Check out the live example on the TypeScript Playground here.

Answer 3

Answer №2

It seems that you have not provided the generics for your abstracts, as mentioned. The full error probably points to the lines where you are extending your tables. In essence, try this approach:

class DoneWorksPageTable extends Table<TypeForSpecialRowOnDoneWorksPage> {
  getSpecialFunctions(): TypeForSpecialRowOnDoneWorksPage{
    return {
      text: "test",
      addNewDoneWork: () => console.log("test done work class"),
    };
  }
}
class InformationPageTable extends Table<TypeForSpecialRowOnInformationPage> {
  getSpecialFunctions(): TypeForSpecialRowOnInformationPage{
    return {
      toLoad: ["file", "table", "text", "image"],
      addNewInfo: () => console.log("test info class"),
    };
  }
}

For reference: Playground Link

Answer 4

It seems that you have not provided the generics for your abstracts, as mentioned. The full error probably points to the lines where you are extending your tables. In essence, try this approach:

class DoneWorksPageTable extends Table<TypeForSpecialRowOnDoneWorksPage> {
  getSpecialFunctions(): TypeForSpecialRowOnDoneWorksPage{
    return {
      text: "test",
      addNewDoneWork: () => console.log("test done work class"),
    };
  }
}
class InformationPageTable extends Table<TypeForSpecialRowOnInformationPage> {
  getSpecialFunctions(): TypeForSpecialRowOnInformationPage{
    return {
      toLoad: ["file", "table", "text", "image"],
      addNewInfo: () => console.log("test info class"),
    };
  }
}

For reference: Playground Link

An abstract class featuring a nested generic function that is also abstract

Answer №1

Answer №2

Similar questions

Using TypeScript in React, how can I implement automation to increment a number column in a datatable?

Unexpected Issue: Angular 12 Encounters JIT Compiler Unavailability

Unable to leverage vscode workspace path for the next js 13 project

When I attempt to return an object from a function and pass the reference to a prop, TypeScript throws an error. However, the error does not occur if the object is directly placed in

Angular: Utilizing httpClient to retrieve an object map and passing it as a return value in a function

Alias route for `src` in Ionic 3

Looping through Observable with an Array using *ngFor in Angular

Navigate to a new tab using this.router.navigate

Ways to Conceal Information in Angular2

Ways to turn off Typescript alerts for return statements

Locate the constructor for the class of the array element

Typescript narrowing facing difficulty in isolating property type

Tips for dynamically calling a property member of a function type in Typescript

"Utilizing variadic tuple types to implement the pipe function in TypeScript 4: A step-by-step guide

The limitations of Typescript when using redux connect

Combining objects into an array of objects with matching keys

Angular2 and TypeScript bug "The property METHOD_NAME is not found on the type 'typeof CLASS_NAME'"

Setting up grunt-ts to function seamlessly with LiveReload

Function type cannot be restricted by type guards

Using Ionic to send HTTP requests with authentication headers