CODEWITHSUNDEEP
typescript
IceRevenge
IceRevenge

Reputation: 1583

Typescript: Functions with properties

I recently discovered that you can do this in JS:

function foo() {
  console.log("FOO");
}

foo.bar = "FOOBAR";

foo(); // logs "FOO"
console.log(foo.bar); // "FOOBAR"

Now my question is: How can I express this kind of object/function in typescript, e.g. when passing it to another function as a parameter?

This obviously throws an error...

type Foo = () => void;

function test(foo: Foo) {
  console.log(foo.bar); // Property 'bar' does not exist on type '() => void'.ts(2339)
}

Any ideas other than declaring it as an any?

Upvotes: 1

Views: 127

Answers (3)

ABOS
ABOS

Reputation: 3823

You can also try to merge function with namespace, a more typescript approach as shown below,

function foo() {
  console.log("FOO");
}
namespace  foo {
  export const bar = "FOOBAR";
}

foo(); // logs "FOO"
console.log(foo.bar); // "FOOBAR"

function test(f: typeof foo) {
  console.log(f.bar); // Property 'bar' now exists
}

Upvotes: 0

A_blop
A_blop

Reputation: 862

You can add a call signature and bar property to Foo type:

type Foo = {
    () : void;
    bar: string
}

function test(foo: Foo) {
  console.log(foo.bar); 
}

Alternatively write it as intersection:

type FooFn = () => void;
type Foo2 = FooFn & {bar: string}

function test2(foo: Foo2) {
  console.log(foo.bar); 
}

Playground

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074148

You can express that with an interface with a call signature:

interface FunctionWithBar {
    (): void;     // <=== Makes this callable, in this case accepting no params
                  // and returning nothing
    bar: string;  // Also has a `bar` proprerty of type string
}

function example(f: FunctionWithBar) {
    f();
    console.log(f.bar);
}

function foo() {
    console.log("FOO");
}

foo.bar = "FOOBAR";

example(foo);

Playground link

Upvotes: 1

Related Questions