ts-transformer-optimize-const-enum
A typescript transformer that convert exported const enum into object literal.
This is just like the one from @babel/preset-typescript with optimizeConstEnums: true but it works for typescript compiler.
This will transform exported const enum from
export const enum MyEnum {
A,
B,
C,
D = 10,
E = C * 200,
}
into object literal like this
export const MyEnum = {
A: 0,
B: 1,
C: 2,
D: 10,
E: 400,
} as const;
and it also strips const in declaration file, to make your code compatible with --isolatedModules
// my-enum.d.ts
declare enum MyEnum { A: 0, ... }
Why?
Const enum can only works in the same file. It works by inlining the exact value into code.
if (cond === MyEnum.A) { /*...*/ }
will compile to the following code. That's a great inline optimization.
if (cond === 0 /* A */) { /*...*/ }
However, const enums only work in the same file with isolateModules. Therefore, you can't use the exported const enum. The solution is to enable preserveConstEnums option to convert const enums to regular enums.
And the regular enum compiles to
export var MyEnum;
(function(MyEnum) {
MyEnum[MyEnum['A'] = 0] = 'A';
MyEnum[MyEnum['B'] = 1] = 'B';
MyEnum[MyEnum['C'] = 2] = 'C';
MyEnum[MyEnum['D'] = 10] = 'D';
MyEnum[MyEnum['E'] = 400] = 'E';
})(MyEnum || (MyEnum = {}));
which is verbose. Not only can't you take advantage of enum inlining, but it also wastes a lot of bytes. That's the reason why this transform is made.
Although keys of object literals can't be tree-shaken by webpack, however, the exported object literals have no side effects like enums do. If one of your code-splitting chunks does not use it, it will be completely erased.
Installation
npm install ts-transformer-optimize-const-enum --save-dev
Usage
If you use vanilla TypeScript compiler, you can use this with ttypescript and compile with ttsc instead of tsc
ttypescript
// tsconfig.json
{
"compilerOptions": {
// ...
"plugins": [
{ "transform": "ts-transformer-optimize-const-enum" },
{ "transform": "ts-transformer-optimize-const-enum", "afterDeclarations": true },
]
},
// ...
}
The afterDeclarations part is to strip out const keyword from declaration file.
webpack (with ts-loader or awesome-typescript-loader)
// webpack.config.js
const optimizeConstEnum = require('ts-transformer-optimize-const-enum').default;
module.exports = {
// ...
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader', // or 'awesome-typescript-loader'
options: {
getCustomTransformers: program => ({
before: [
optimizeConstEnum(program),
],
afterDeclarations: [
optimizeConstEnum(program),
],
}),
},
},
],
},
};
Rollup (with @rollup/plugin-typescript or rollup-plugin-typescript2)
// rollup.config.js
import typescript from '@rollup/plugin-typescript';
import optimizeConstEnum from 'ts-transformer-optimize-const-enum';
export default {
// ...
plugins: [
typescript({
transformers: [service => ({
before: [
optimizeConstEnum(service.getProgram()),
],
afterDeclarations: [
optimizeConstEnum(service.getProgram()),
],
})],
}),
],
};
4 Oct 25, 2022
3 Apr 5, 2022
21 Apr 26, 2022
38 Oct 22, 2022
4 Jul 17, 2022
8 Jun 7, 2022
112 Jan 2, 2023
22 Dec 8, 2022
6.8k Jan 5, 2023