Static members with types in Typescript - Step-by-Step Execution

Concept Flow - Static members with types

Class Definition

↓

Static Member Declared

↓

Access Static Member via Class

↓

Use Static Member Value

↓

End

This flow shows how a static member is declared inside a class and accessed directly via the class without creating an instance.

Execution Sample

Typescript

class Counter {
  static count: number = 0;
  static increment() {
    Counter.count++;
  }
}
Counter.increment();
console.log(Counter.count);

This code defines a class with a static number and a static method to increase it, then calls the method and prints the static value.

Execution Table

Step	Action	Static Member 'count'	Output
1	Class Counter defined with static count = 0	0
2	Call Counter.increment()	0 -> 1
3	console.log(Counter.count)	1	1
4	End of execution	1

💡 No more code to execute, program ends

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
Counter.count	0	1	1	1

Key Moments - 2 Insights

Why do we access 'count' using the class name and not an instance?

Because 'count' is declared static, it belongs to the class itself, not to any object instance. See execution_table step 2 where Counter.increment() changes Counter.count directly.

Can we access 'count' from an instance of Counter?

No, static members are not accessible from instances. They only exist on the class. This is why we use Counter.count, not instance.count.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 2?

A undefined

B 0

C 1

D 2

💡 Hint

Check the 'Static Member count' column at step 2 in the execution_table.

At which step is the static member 'count' printed to the console?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Output' column in the execution_table to find when console.log runs.

If we remove 'static' from 'count', what changes in the execution?

A Counter.count will cause an error because it's no longer static

B Counter.count can still be accessed the same way

C The value of count will increment twice

D No change in output

💡 Hint

Static members must be accessed on the class; without static, 'count' is an instance property.

Concept Snapshot

Static members belong to the class, not instances.
Declare with 'static' keyword and type: static name: type = value;
Access via ClassName.member, not instance.
Useful for shared data or utility methods.
Example: static count: number = 0;
Call with ClassName.count or ClassName.method().

Full Transcript

This example shows how to use static members in TypeScript. A static member is declared inside a class with the 'static' keyword and a type. It belongs to the class itself, not to any object created from the class. We can access or change static members directly using the class name. In the example, the class Counter has a static number called count starting at 0. The static method increment increases count by 1. We call Counter.increment() and then print Counter.count, which shows 1. Static members are useful for values or methods shared by all instances or when no instance is needed. Remember, you cannot access static members from an instance, only from the class.