Create Readable JS from Typescript

Question

I want my compiled JS code to be readable (similar as if I had written it), so it's easier to debug but the typescript compiler makes several changes which I'm hoping I can turn off.

For example:

When I compile my typescript it changes all the import names eg.

import AWS from 'aws-sdk' => const aws_sdk_1 = __importDefault(require("aws-sdk"));

rather than const aws-sdk = require('aws-sdk')

Additionally, it removed all line spacing, which I included to make it more readable and break it up.

Is there any way to change these settings?

tsconfig.json

{

  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es2017",
    /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",
    /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    "allowJs": true,
    /* Allow javascript files to be compiled. */
    "checkJs": true,
    /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    "outDir": "./dist",
    /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,
    /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": false,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    "moduleResolution": "node",
    /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,
    /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    "allowUmdGlobalAccess": true,
    /* Allow accessing UMD globals from modules. */

    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    "experimentalDecorators": true,
    /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

Maybe you can check tsconfig schema to see if there's an option for it. (if you have not taken a look already) — Harun Yilmaz
– Harun Yilmaz, Commented Jul 4, 2019 at 14:38
Are you doing anything else in your compilation than just tsc filename.ts? E.g. running it through webpack or uglify? Because the default compilation I just described doesn't minify code on my machine. Describe your compilation process. — Marc
– Marc, Commented Jul 4, 2019 at 14:44
@Marc "tsc -p ." its not minifying but removing gap lines - eg. funcOne () => {} <-- BREAK LINE --> funcTwo() => {} In this case it would remove the blank break line — Steven
– Steven, Commented Jul 4, 2019 at 15:34

Amarjit Singh · Accepted Answer · 2022-01-17 01:42:32Z

1

If the problem in debugging is the only reason you want readable JS. Then you can debug your ts file (readable) in chrome using this command

node --inspect -r ts-node/register <your-ts-file.ts>

For the above command, you will first have to install ts-node.

npm install --save ts-node

answered Jan 17, 2022 at 1:42

Amarjit Singh

2,1541 gold badge25 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tim · Accepted Answer · 2021-03-12 18:14:30Z

0

You cannot preserve whitespace. The processing required by TS compiler, which is dependent on the tsconfig settings, and could dramatically change the output, does not allow for trying to keep any formatting intact.

The target and module system you have will change the output JS, especially imports. TS will try to handle all the scenarios, even if you wouldn't normally. You can turn off the __importDefault helper functions however by using

esModuleInterop: false

You should treat the generated js as a binary. It is a built output, and you shouldn't care about it's format. You wouldn't look inside a DLL and care what it looked like. The only time you will ever need to care would be if you were moving away from TS, and if that were the case, processing the files to simply remove the TS annotations would be more easy than trying to make the transpiled source look exactly like you want it.

For debugging, source maps are critical. Output them, and debug your TS, not the generated JS.

answered Mar 12, 2021 at 18:14

Tim

2,9321 gold badge17 silver badges20 bronze badges

2 Comments

Rainb Over a year ago

>You wouldn't look inside a DLL and care what it looked like. Well, depends on what you're doing, some people like to mess with their binaries.

NSjonas Over a year ago

@Rainb sure, but the compiled js from typescript is certainly a bit easier to "mess with" than DLL binaries

Collectives™ on Stack Overflow

Create Readable JS from Typescript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related