Proposal: Add global modifier to the language

[iam3yal]

Background

JavaScript has many global variables/functions, we tend to work with them all the time but sometimes we might not even know about them or use global names that can bite us later, at some point.

The more libraries we add to our projects the more globals we tend to use and sometimes it can get confusing, my last proposal was about adding warning to the language but really, after some thoughts and feedback, who wants to see many warnings issuing for using globals! it can be annoying and like I've stated we're using them all the time!

What I'm proposing now, is a modifier that will allow us to declare something as global, it will definitely help tools to differentiate between non-globals and globals and it will definitely help us to know about them.

Use cases

Libraries authors can finally be explicit about their globals which is tenfold better than having comments in the definition files mainly for readability and tools awareness as described below.

Readability: Consumers that sometimes read the definition files for APIs won't have to think twice whether something is global or not.

Awareness: Having a modifier for globals will allow tools to be aware of globals and so this can cover scenarios like syntax highlighting, refactoring, issuing warnings about certain globals such as when we try to reassign a new value to a global variables.

Maintainability: Due to the two points above it makes maintainability a lot easier to deal with especially in a large codebase where the amount of globals is inevitably bigger, so spotting them can be made crystal clear.

Syntax

Variables:

declare global var name: type

Functions:

declare global function name(): type

Examples

Here are few examples of how it will look like in practice.

The only difference between how things are declared now and how they will be declared later (if this feature will get implemented) is the addition of the global modifier as shown below.

lib.d.ts

declare global var RegExp: RegExpConstructor;
declare global var console: Console;

node.d.ts

declare global var process: NodeJS.Process;
declare global var global: NodeJS.Global;

declare global var __filename: string;
declare global var __dirname: string;

declare global function setTimeout(callback: (...args: any[]) => void, ms: number, ...args: any[]): NodeJS.Timer;

Clarification

I thought that it's clear from the examples above but the point of this proposal is to be explicit about what is global and what isn't by having a global modifier in the language as part of the declare statement, this will allow people to be more specific with their declare statements and then tools would have the ability to take advantage of that.

It has nothing to do with declaring global variables nor accessing them and because it's part of the declare statement nothing is ever emitted to JavaScript.

I hope it's crystal clear now. :)

[ghost]

It would be nice to have this, is a little risky to have many global variables but we can protect ourself.

[iam3yal]

@kataras yeah, well, such is the world of JavaScript, you already have many globals, this proposal is to help you know about them when they are declared not to easily declare more of them or access them. :)

[kitsonk]

How do you anticipate usage of global variables with the proposal? Can you provide an example?

Also what do you expect to be emitted, if anything? For example if I were to declare something that isn't already in the global scope, how will you propose to detect that and what will you emit?

[iam3yal]

@kitsonk, I've updated the proposal, read the clarification section, I hope it answers you question.

Nothing is ever emitted or should be emitted.

[kitsonk]

Then I am unsure what your proposal is doing... how does:

declare var foo: any;

versus...

declare global var foo: any;

Change anything? declare var already implies that it is in the global scope. Can you provide an example of where declare var does not indicate something that is present in the global scope?

[iam3yal]

@kitsonk, you're right, it's just false alarm! I misunderstood how declare work. :)

I'm quite new to TypeScript so thank you for enlighten me!

[kitsonk]

It may have been the use of var making you think it could potentially scoped locally, I suspect.

[ghost]

@eyalsk 's proposal doesn't contain any benefits to the typescript language itself. But he wanted a way to specify when some 'var' is a global var or it's scoped only... this is just for reading/or-and writing code easier, as I understand. Did I translated you well @eyalsk ?

[iam3yal]

@kataras, well, at first I somehow got the impression that var declare can actually be scoped locally so I made this proposal, I should have double checked that but after @kitsonk enlightened me, I thought I can change it so it will be mainly for readability but I guess that at this point it doesn't really worth to add it as a feature to the language but yeah it was nice if var declare was actually var declare global or just global or even global var.

I don't like vague keywords and declare is certainly vague but I guess they had their reasons.

[ghost]

Yeah we can use just declare var something:any :P

[danquirk]

We have talked about an actual global type keyword before, see #983

[iam3yal]

@danquirk, interesting, thanks!

[rbuckton]

A global modifier might be interesting when writing a polyfill inside of a module. Consider the following:

symbol-polyfill.ts

import { createUUID } from "./uuid"; 
const SYMBOL_GLOBAL_NS: number[] = ...;
const SYMBOL_CORE_NS: number[] = ...;

function createSymbol(description?: string, ns?: number[]): symbol {
  ...
}

global function Symbol(description?: string) {
  return createSymbol(description);
}

global namespace Symbol {
  export const iterator = createSymbol("Symbol.iterator", SYMBOL_CORE_NS);
}

app.ts

import "symbol-polyfill";

// safe to use Symbol here...

Which might result in something like the following AMD module:

symbol-polyfill.js

var _global = typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : this; 
define(["require", "exports", "uuid", function (require, exports, uuid_1) {
  var SYMBOL_GLOBAL_NS = ...;
  var SYMBOL_CORE_NS = ...;
  function createSymbol(description, ns) {
    ...
  }
  function Symbol(description) {
    return createSymbol(description);
  }
  _global.Symbol = Symbol;
  (function (Symbol) {
    Symbol.iterator = createSymbol("Symbol.iterator", SYMBOL_CORE_NS);
    ...
  })(_global.Symbol || (_global.Symbol = {}));
  var Symbol = _global.Symbol;
});

I'm not certain this is something we want to do, but it does still come up from time to time.

[iam3yal]

@rbuckton Yeah, I guess that something like that makes a lot more sense than what I suggested, we'll have to see whether global will make it to the language in some shape or form. :)

[kitsonk]

@rbuckton would this be addressed by solving #4166? Hate for a good thought to get lost in a closed issue. 😉