I always forget why, so time to write it down!
They interfere with isolatedModules
support and transpilers. Imagine that a transplier will convert your TypeScript code into Javascript, without parsing the typings of the dependencies. That means if you import { SomeConstEnum } from 'dependency'
in your code, it doesn't know it's a const enum, or an interface, or a js object, and as such the transpiler leaves the import there.
The problem with this is that now, if you parse the javascript you just emitted, the named import will fail. In the raw JavaScript ES module produced, you expected TS concepts like type
and interface
, and of course const enum
to be dropped, and all your SomeConstEnum.foo
references to be replaced with literals, but that can't happen without knowing what the thing was in the first place.
The point of isolated transpilation is quick development. You can have thousands of packages in your repo. If you don't need to parse dependency types, you can transpile massive quantities of code, all in parallel, in milliseconds rather than minutes.
Here are the rules - you can use them in your project; just don't export them. You might have been following the rules all along.
Or, you might have been breaking them, and just never heard about issues. Often consumers build their typescript project without using isolatedModules
, so typings are fully parsed and well known.
Various advances in TypeScript have made const enums less interesting.
For example, rather than enums, use union types.
Instead of this:
const enum Foo {
bar = 'bar',
baz = 'baz'
}
function myFunc(foo: Foo) {
}
myFunc(Foo.bar);
Do this:
type Foo = 'bar' | 'baz';
function myFunc(foo: Foo) {
}
myFunc('bar');
It has the same effect and same type safety, without requiring an extra import.
In cases where the literal values are important, export/import individual values:
Using the const enum above you might do this:
import { Foo } from '...';
console.log(Foo.bar);
Instead, export them as individual values:
export const FooBar = 'bar';
export const FooBaz = 'baz';
…and import what you need:
import { FooBar } from '...';
console.log(FooBar);
This means that thanks to tree shaking, your bundle is able to trim unused values, leading to smaller sizes.
Exporting const enums! Do not export them! They block downstream dependencies from transpiling things individually and require them to know the full typings of all dependencies. This creates headaches for large scale apps.
If you really need to export a collection of values, you have options:
export const bar = 'bar';
export const baz = 'baz';
export const Foo = {
bar: 'bar',
baz: 'baz'
};
Even the Typescript team will agree on this one.
https://github.com/microsoft/TypeScript/issues/5219
https://github.com/Microsoft/TypeScript/issues/30590
https://github.com/facebook/create-react-app/pull/4837#issuecomment-430107471
Quote from Daniel Rosenwasser:
const enums
are often misused. Sure, they can be great for the internals of a library to get some speed improvements, but they generally shouldn't be used outside of that scope.
or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Syncing