What does () mean if set as a interface property?

Question

In the Vue.js source code (packages/reactivity/src/effects.ts), I found this:

export interface ReactiveEffectRunner<T = any> {
  (): T
  effect: ReactiveEffect
}

What does () mean in the code?

Answer 1

When you want to define a function with other properties you make use of this pattern.

() means that the object implementing this interface will be a function which can be called and does not need any params.

effect means it has another property called effect.

An example from the docs:

type DescribableFunction = {
  description: string;
  (someArg: number): boolean;
};
function doSomething(fn: DescribableFunction) {
  console.log(fn.description + " returned " + fn(6));
}

Read about call signatures

Answer 2

It means the type is executable as a function.

for example:

declare const fn: ReactiveEffectRunner<{ abc: number }>

const result = fn() // { abc: number }
fn.effect // ReactiveEffect

Playground