Typescript: static method vs function defined outside class

Question

What are the practical differences between a static class method, and a function defined outside a class (at the top of the file) in TypeScript?

I know that there are differences regarding visibilty from other classes and files. When visibility is not a concern though (the function/method is only used in one class), when should we use static methods rather than functions defined outside any classes.

Example:

export class Foo {
  
  constructor(bar: string) {
    Foo.shout(bar);
  }

  private static shout(content: string) {
    console.log(string.toUpperCase());
  }
}

VS

export class Foo {
  
  constructor(bar: string) {
    shout(bar);
  }

}

function shout(content: string) {
  console.log(string.toUpperCase());
}

Besides technical differences you should consider architectural ones: does the method actually have anything to do with the class? Does it belong there? — Ingo Bürk
– Ingo Bürk, Commented Aug 13, 2020 at 12:42
In many languages, a static method is just a global function with a funky name, usually with better access control. — axiac
– axiac, Commented Aug 13, 2020 at 12:48
@axiac - Yes, that's true for C++ and probably several others. It's not true for JavaScript or TypeScript. — T.J. Crowder
– T.J. Crowder, Commented Aug 13, 2020 at 13:27

T.J. Crowder · Accepted Answer · 2020-08-13 12:44:53Z

What are the practical differences between a static class method, and a function defined outside a class (at the top of the file) in TypeScript?

Not all that many:

Code using the static method must have access to the class; code using a standalone function must have access to the standalone function instead.
Using the static method technically involves a property lookup on the class's constructor function; using a standalone function doesn't. In practice, this will be optimized such that it doesn't matter.
The code in the static method will have access to the constructor function's parent constructor function via super (something that's fairly unique to JavaScript); code in a standalone function does not (because there is no parent constructor).
Specifically in regard to your example: Your standalone shout function is private to the module in which it appears; the static method on Foo is accessible from other modules that import Foo.

Slightly closer to opinion-land:

A standalone function is standalone, it doesn't provide much context for what it is or where it's defined to someone reading the code. A static method provides more context, via the class name. But, if you're using modules (as you seem to be), the import provides some context for the standalone function.

...when should we use static methods rather than functions defined outside any classes.

That's largely a matter of opinion and style, so off-topic for Stack Overflow. If your team feels the need for consistency using some set of rules, agree a set and be consistent.

Collectives™ on Stack Overflow

Typescript: static method vs function defined outside class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related