Declaring a class type variable in Typescript

Question

I'm having trouble understanding line 18 of the following snippet of a TypeScript tutorial.

1   class Greeter {
2       static standardGreeting = "Hello, there";
3       greeting: string;
4       greet() {
5           if (this.greeting) {
6               return "Hello, " + this.greeting;
7           }
8           else {
9               return Greeter.standardGreeting;
10          }
11      }
12  }
13  
14  let greeter1: Greeter;
15  greeter1 = new Greeter();
16  console.log(greeter1.greet());
17  
18  let greeterMaker: typeof Greeter = Greeter;
19  greeterMaker.standardGreeting = "Hey there!";
20  
21  let greeter2: Greeter = new greeterMaker();
22  console.log(greeter2.greet());

As I understand from the tutorial, the goal of the declaration of greatermaker is getting the Greeter class type into a variable, rather than the instance type.

Firstly, what is the function of the assignment operator = in this line?

Secondly, what do we mean exactly with the distinction between the class type and the instance type? I guess, in the first we are able to manipulate the static member variables as opposed to the second?

Edit.

Why don't we just use let greeterMaker: typeof Greeter, that is without the assignment operator?

Assignment sets a value and colon only sets the type. So if you intend to use the greetmaker for anything it has to be assigned. But why do typeof Greeter. That will be a string and not the type since javascript has no types in that sense. Just do let greetmaker: Greeter = Greeter;. Or simply remove the type declaration since the assignment will do that implicitly. — JGoodgive
– JGoodgive, Commented Jan 19, 2018 at 12:16
I think I now understand my confusion with this line. Am I correct that line 18 is equivalent with the following two lines: let greeterMaker : typeof Greeter; greetermaker = Greeter;`? — Mussé Redi
– Mussé Redi, Commented Jan 19, 2018 at 12:20
@JGoodgive My confusion isn't fully resolved yet, actually. I'll accept when it is. An upvote is at my own discretion. — Mussé Redi
– Mussé Redi, Commented Jan 19, 2018 at 12:28
@JGoodgive But why do typeof Greeter. That will be a string and not the type since javascript has no types in that sense. What was the rationale in the tutorial to use typeof, given your note that typeof, indeed, only returns a string in this case? — Mussé Redi
– Mussé Redi, Commented Jan 19, 2018 at 13:06

Suren Srapyan · Accepted Answer · 2018-01-19 11:16:37Z

3

The goal is to have the reference copy of the Greeter class (actually function) into the variable greeterMaker. With these you have 2 variables greeterMaker and Greeter to refer to the same class. So you can create objects of that class via

new Greeter()

or

new greeterMaker()

These two statements will do the same thing, because greeterMaker is just another variable which refers to the Greeter.

answered Jan 19, 2018 at 11:16

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

6 Comments

Mussé Redi Over a year ago

Why do we need the assignment operator in the declaration of greaterMaker? What would be wrong with the declaration let greeterMaker: typeof Greeter?

Suren Srapyan Over a year ago

It will just set the type to the Greeter, but not assign the value to it. Think about let str: string - str in this case is undefined

JGoodgive Over a year ago

Type assignment only helps the typscript compiler understand your code. The value assignment is needed to actually get anything besides undefined. So a class is both a javascript function that lets you create a prototypal object AND in typescript it is a type, the type of the returned object from that fuction, but only in the typescript compiler. So assigning types really doesnt do anything except helps the compiler catch errors.

Mussé Redi Over a year ago

@JGoodgive Okay, I think I get it now.

Mussé Redi Over a year ago

@SurenSrapyan My confusion revolves around the use of typeof. Could you address the use of typeof? As @JGoodgive noted, shouldn't it just be let greetermaker : Greeter = Greeter; i.e. without the typeof Javascript construct?

|

Mussé Redi · Accepted Answer · 2018-01-19 17:21:45Z

(Tentative) expansion of @JGoodgive's comment.

An important thing to note is the distinction bewteen:

the TypeScript type reference Greeter, as in let var : Greeter;
the JavaScript instance type of class Greeter, as in var = new Greeter; typeof var;
the JavaScript class type variable, which embodies the class constructor itself, as in var = Greeter.

It is key to note that the class type variable var = Greeter is in fact the class constructor function. Hence, it is, incidentally and in particluar, of type Greeter; because that is the class of which it is a public member function.

On another note, typeof Greeter should return Greeter according to the tutorial. This is because by Greeter in typeof Greeter, we mean the constructor function of the class Greeter. And since, the constructor function returns the class itself (as an instance), it [the constructor function Greeter] is of class type Greeter, indeed.

Collectives™ on Stack Overflow

Declaring a class type variable in Typescript

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related