Typescript: Functions with properties

Question

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?

A_blop · Accepted Answer · 2020-12-13 13:21:42Z

1

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

answered Dec 13, 2020 at 13:21

A_blop

9025 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2020-12-13 13:19:43Z

1

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

answered Dec 13, 2020 at 13:19

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Comments

ABOS · Accepted Answer · 2020-12-14 01:03:36Z

0

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
}

edited Dec 14, 2020 at 1:03

answered Dec 14, 2020 at 0:57

ABOS

3,8413 gold badges19 silver badges25 bronze badges

2 Comments

IceRevenge Over a year ago

Why is this a „more typescript“ approach? Never really used namespaces before...

ABOS Over a year ago

by that, I mean TS can merge function with namespace, a feature more "unique" to TS.

Collectives™ on Stack Overflow

Typescript: Functions with properties

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related