Repository: TypeScript
Issue: Feature request: support `static enum`
Labels: Suggestion,Awaiting More Feedback

## Search Terms

enum reflection, const enum, const enum literal, const enum reference, const enum export

## Suggestion

Add a new type of enum, say `static enum`, that works similar to `const enum`, but instead of inlining `const enum`, exporting enum values as constants, and emit code that refers to it.

## Use Cases

<!--
What do you want to use this for?
What shortcomings exist with current approaches?
-->

1. Long string enum values

   In case long strings are present in a `const enum`, using such enum in various places will emit code that is way too large. It would be nice to emit code that uses references to the constants instead of literals. 

2. Non-literal enum values

   More than often, we want to export a set of constants of certain types that can be passed to a function as an enum. For instance, in a base64 module, an enum representing the charset to use for encoding and decoding. In an icon module for react, an enum representing possible svg icons to display.

Some existing alternatives:

- `enum`

  `enum` emits clumsy code with runtime reflection support. However, when being used statically reflection is not needed, which makes performing dead code elimination really hard (unless closure compiler is used, which is almost infeasible when npm packages are used.)

- `export const ENUM_VALUE;`

  Practically, exporting a const works. However, there is no way to declare a type for those `ENUM_*` constants. This makes it difficult to design an API that can enforce the typing on the enum (or at least let code editor provide sensible autocompletion when a non-literal type is used.)

## Examples

icons.ts

```ts
export static enum Icons {
  SMILY_FACE = "some long svg path";
  SAD_FACE = "some long svg path";
  OBJECT = { name: "object literal", path: "some long svg path" }; // as we are just exporting consts, non literals are also ok.
}
```

app.tsx

```tsx
import { Icons } from './icons';

<Icon icon={Icons.SMILY_FACE} />
<Icon icon={Icons.OBJECT} />
```

Transpilied into:

icons.js

```js
export const Icons_SMILY_FACE = "some long svg path";
export const Icons_SAD_FACE = "some long svg path";
export const Icons_OBJECT = { name: "object literal", path: "some long svg path" };

// N.B. this is just named exports, so any current bundler will take care of unused ones.
```

app.js

```js
import { Icons_SMILY_FACE, Icons_OBJECT } from './icons';

react.createElement(Icon, { icon: Icons_SMILY_FACE });
react.createElement(Icon, { icon: Icons_OBJECT });
```

## Checklist

My suggestion meets these guidelines:

* [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
* [x] This wouldn't change the runtime behavior of existing JavaScript code
* [x] This could be implemented without emitting different JS based on the types of the expressions
* [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
* [x] This feature would agree with the rest of [TypeScript's Design Goals](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals).