TypeScript variable name as interface type?

Question

I have a piece of TypeScript code that I'm having trouble to understand. I am fairly new to TypeScript.

export const TerminalWidgetOptions = Symbol("TerminalWidgetOptions");
export interface TerminalWidgetOptions {
    endpoint: Endpoint.Options,
    id: string,
    caption: string,
    label: string
    destroyTermOnClose: boolean
}

Could someone tell me what exactly happens in the above code? What I do understand is that an interface of the name TerminalWidgetOptions is created and it forces the parameters endpoint, id, caption, label and destroyTermOnClose upon implementation into a class. I though don't quite understand the above line. So, apparently a constant is created, that can only be set once and then stays that way, right? But how can this constant have the same name as the interface type? The assignment of Symbol("TerminalWidgetOptions"); is clear. What comes from the Symbol function is put into the constant.

Is that more or less correct?

Answer 1

You can have a type and a variable with the same name. Types are erased at compile time, while variables remain. Since types and variables can be used in different contexts there is no name conflict between the two. The only exception is classes, for which the class name represents both the type and the constructor function, so you can't redeclare a variable with the same name as that would conflict with the constructor function at run-time.

Answer 2

In TypeScript you can have the same name for a variable/constant, an interface and even a namespace.

TypeScript understands what you're referring to based on context. Remember that interfaces are just type hints to the compiler and the programmer, they disappear completely when the code is compiled, so there are no conflicts in the resulting JavaScript code.

There is not a use case when what you're referring to with TerminalWidgetOptions is ambiguous:

class Klass implements TerminalWidgetOptions { // interface

someFunction(TerminalWidgetOptions); // constant

let t = TerminalWidgetOptions; // constant

In fact, when you define a class, you're doing something similar. By defining a class you are both declaring a type and defining a value

const d = Klass; // d now is like the constructor of Klass (a value, something that exists)
doSomething<Klass>(); // Here, Klass is a pure type (an abstraction)

The difference?

• A type indicates the 'shape' of an object of function.
• A value is something that exists 'physically' in the program (an object)

So, an interface is just a type. A variable is just a value. A class is both a type (defines the interface of instances of that class) and value (is a function that constructs instances of the type)

Hope this makes it a bit clearer to you