Three ways of defining a generic function type using typescripts

less than 1 minute read

If to pass a variable which is a function, and also the type of that function need to be a generic one, it’s useful to define a generic function type when using typescript.

For example, in order to to pass value to the callback, how to define GenericFunctionType?

interface Foo<T> {
  foo(value: T, callback: GenericFunctionType<T, unknown>): void
  • 1: use type plus curly brackets block
type GenericFunctionType<TInput, TReturn> = {
  (args: TInput): TReturn
  • 2: use type plus arrow function style
type GenericFunctionType<TInput, TReturn> = (args: TInput) => TReturn
  • 3: use interface plus curly brackets block
interface GenericFunctionType<TInput, TReturn> {
  (args: TInput): TReturn

Finally, to finish the example interface Foo by implementing it:

class Coo<T> implements Foo<T> {
  foo(value: T, callback: GenericFunctionType<T, unknown>) {

const sf = new Coo<string>()'Hello world', (v) => console.log(v))
const nf = new Coo<number>(), (v) => console.log(v))
const bf = new Coo<boolean>(), (v) => console.log(v))


[LOG]: "Hello world"
[LOG]: 123
[LOG]: true