Can a function interface be implemented in TypeScript successfully?

Question

Can a function interface be implemented in TypeScript successfully?

I am interested in implementing this functionality:

class MyFunc extends ((s: string) => boolean) { ... }

This would allow an instance of MyFunc to act as a function that takes a string input and returns a boolean value, like so:

const f = new MyFunc();
const b: boolean = f('someString');

Can this be achieved in TypeScript?

In languages such as Scala, one can extend the type String => Boolean and define an apply method for similar functionality.

class MyFunc extends (String => Boolean)
val f = new MyFunc()
val b: Boolean = f("someString")

typescript

Answer 1

Answer №1

Is it possible that you had in mind a scenario similar to the following?

type ValidatorFunc = (input: string) => boolean;

const validate: ValidatorFunc = input => true;
const isValid: boolean = validate('sampleText');

Answer 2

Is it possible that you had in mind a scenario similar to the following?

type ValidatorFunc = (input: string) => boolean;

const validate: ValidatorFunc = input => true;
const isValid: boolean = validate('sampleText');

Answer 3

Answer №2

TypeScript does not have a built-in apply concept, but it is possible to create typed objects that can also act as functions.

interface MyCallable {
    (param1: string, param2: number): string;

    prop1: string;
    prop2: number;
    extraMethod: (param1: boolean) => boolean;
}

function createMyCallable(prop1: string, prop2: number): MyCallable {
    let obj = ((param1: string, param2: number) => param1 + param2) as MyCallable;

    obj.prop1 = prop1;
    obj.prop2 = prop2;
    obj.extraMethod = (param1: boolean) => !param1;

    return obj;
}

let myObj = createMyCallable("3", 4);

myObj("3", 4);
myObj.prop1 = "string";
myObj.prop2 = 5;
myObj.extraMethod(false);

Answer 4

TypeScript does not have a built-in apply concept, but it is possible to create typed objects that can also act as functions.

interface MyCallable {
    (param1: string, param2: number): string;

    prop1: string;
    prop2: number;
    extraMethod: (param1: boolean) => boolean;
}

function createMyCallable(prop1: string, prop2: number): MyCallable {
    let obj = ((param1: string, param2: number) => param1 + param2) as MyCallable;

    obj.prop1 = prop1;
    obj.prop2 = prop2;
    obj.extraMethod = (param1: boolean) => !param1;

    return obj;
}

let myObj = createMyCallable("3", 4);

myObj("3", 4);
myObj.prop1 = "string";
myObj.prop2 = 5;
myObj.extraMethod(false);

Answer 5

Answer №3

If you're looking for a straightforward function that takes a string and returns a boolean, there's no need to create a class.

const myFunc = (s: string): boolean => {
  return s !== "";  //insert custom logic here
};

However, in TypeScript, it is possible to extend classes.

class MyBaseClass {
  constructor() { }

  public doThing = (s: string): boolean => {
    return s !== "";  //insert custom logic here
  }
}

class MyFunc extends MyBaseClass {
  constructor() {
    super();
  }
}

const f = new MyFunc();
const b = f.doThing("hi"); //returns a boolean

Response to a comment:

In response to a comment, creating an instance of a class with `new`, assigning it to a variable, and then calling it like a function isn't a common practice. You could set it up during initialization instead, as shown below:

class MyBaseClass {
  constructor() { }

  public doThing = (s: string): boolean => {
    return s !== "";  //insert custom logic here
  }
}

class MyFunc extends MyBaseClass {
  constructor(private s: string) {
    super();
    this.doThing(this.s);
  }
}

const f = new MyFunc("hi"); //returns a boolean

You can experiment with the code above on the Typescript playground here

Answer 6

If you're looking for a straightforward function that takes a string and returns a boolean, there's no need to create a class.

const myFunc = (s: string): boolean => {
  return s !== "";  //insert custom logic here
};

However, in TypeScript, it is possible to extend classes.

class MyBaseClass {
  constructor() { }

  public doThing = (s: string): boolean => {
    return s !== "";  //insert custom logic here
  }
}

class MyFunc extends MyBaseClass {
  constructor() {
    super();
  }
}

const f = new MyFunc();
const b = f.doThing("hi"); //returns a boolean

Response to a comment:

In response to a comment, creating an instance of a class with `new`, assigning it to a variable, and then calling it like a function isn't a common practice. You could set it up during initialization instead, as shown below:

class MyBaseClass {
  constructor() { }

  public doThing = (s: string): boolean => {
    return s !== "";  //insert custom logic here
  }
}

class MyFunc extends MyBaseClass {
  constructor(private s: string) {
    super();
    this.doThing(this.s);
  }
}

const f = new MyFunc("hi"); //returns a boolean

You can experiment with the code above on the Typescript playground here

Answer 7

Answer №4

Depending on the use case, there are various methods available. Explore different TypeScript methods here

We somehow incorporated

as an interface @ Learn more here
as a function type

type fInterface = (...params: fArgs) => fRet

as separate types

type fArgs = [number, string]
type fRet = boolean

No matter – they can be interchanged with Parameters and ReturnType

If we implemented a function incorrectly

function nop() {}

Manually selecting parameter types

function isEqual0(x: fArgs[0], y: fArgs[1]): fRet {
  //return x == y //TS-ERROR: This condition will always return 'false' since the types 'number' and 'string' have no overlap.ts(2367)
  return `${x}` == y
}

Using destructuring

function isEqual1(...args: fArgs): fRet {
  const [x, y] = args
  return `${x}` == y
}

Employing overload. Strict usage, but all parameters are of type any during implementation.

function isEqual2(...args: Parameters<fInterface>): ReturnType<fInterface>
function isEqual2(x: any, y: any) {
  return x == y
}

Validation through re-typing (like typing-the-function). There will also be type validation in the parent module regardless.

function isEqual3(x: any, y: any) {
  const valid: typeof isEqual3 extends fInterface ? true : never = true
  if (!valid)
    throw Error()
  return x == y
}

const _exports = {
  isEqual0, isEqual1, isEqual2, isEqual3, nop
}
, _exportCheck = _exports as Record<keyof typeof _exports, fInterface>

...

There are multiple ways to encounter TS-Error if something goes wrong with the implementation.

Answer 8

Depending on the use case, there are various methods available. Explore different TypeScript methods here

We somehow incorporated

as an interface @ Learn more here
as a function type

type fInterface = (...params: fArgs) => fRet

as separate types

type fArgs = [number, string]
type fRet = boolean

No matter – they can be interchanged with Parameters and ReturnType

If we implemented a function incorrectly

function nop() {}

Manually selecting parameter types

function isEqual0(x: fArgs[0], y: fArgs[1]): fRet {
  //return x == y //TS-ERROR: This condition will always return 'false' since the types 'number' and 'string' have no overlap.ts(2367)
  return `${x}` == y
}

Using destructuring

function isEqual1(...args: fArgs): fRet {
  const [x, y] = args
  return `${x}` == y
}

Employing overload. Strict usage, but all parameters are of type any during implementation.

function isEqual2(...args: Parameters<fInterface>): ReturnType<fInterface>
function isEqual2(x: any, y: any) {
  return x == y
}

Validation through re-typing (like typing-the-function). There will also be type validation in the parent module regardless.

function isEqual3(x: any, y: any) {
  const valid: typeof isEqual3 extends fInterface ? true : never = true
  if (!valid)
    throw Error()
  return x == y
}

const _exports = {
  isEqual0, isEqual1, isEqual2, isEqual3, nop
}
, _exportCheck = _exports as Record<keyof typeof _exports, fInterface>

...

There are multiple ways to encounter TS-Error if something goes wrong with the implementation.

Answer 9

Answer №5

If you find yourself with only this specific function on your interface, one way to define it is as follows:

type FuncType = (input: string) => boolean;

This will allow you to utilize the function in the following manner:

const myFunc: FuncType;
function retrieveFunction(): FuncType {}

Answer 10

If you find yourself with only this specific function on your interface, one way to define it is as follows:

type FuncType = (input: string) => boolean;

This will allow you to utilize the function in the following manner:

const myFunc: FuncType;
function retrieveFunction(): FuncType {}

Can a function interface be implemented in TypeScript successfully?

Answer №1

Answer №2

Answer №3

Response to a comment:

Answer №4

Answer №5

Similar questions

Is it possible to maintain the input and output types while creating a function chain factory in

What is the best way to determine the amount of distinct elements in an array of objects based on a specific object property?

Ways to stop a ngFor loop in TypeScript

What is the best practice for updating the state of a web component in a manner that can be tracked by history with vaadin-router?

Tips for boosting ViteJs development mode performance

Why is it that TypeScript struggles to maintain accurate type information within array functions such as map or find?

Tips on sorting an array within a map function

When running a callback function, the "this" of an Angular 2 component becomes undefined

The method this.$el.querySelector does not exist

Can you explain the distinction between using tsserver and eslint for linting code?

Bypass React Query execution when the parameter is null

Looping through an array of objects with Angular 4's ngFor directive to dynamically display content

Discovering the import path of Node modules in ReactAlgorithm for determining the import path of

Experiencing unexpected behavior with Next.JS getStaticProps functionality

Creating instance methods in a TypeScript object can be accomplished by defining the methods within the object's class definition. When the object is

Comparing tsconfig.json and tsconfig.build.json: what sets them apart?

Offering a limited selection of generic type options in TypeScript

Pinia store encountering a Typescript Vue component issue: error message "The property 'testStore' does not exist on the 'CreateComponentPublicInstance' type."

Explore the functionality of Typescript unit testing in debug mode with the assistance of VSCode

Ways to pass styling properties to a nested component