Is it possible to compile TypeScript modules directly into native code within the JavaScript data file?

Question

Is it possible to compile TypeScript modules directly into native code within the JavaScript data file?

I am seeking a way to break down an app in a TypeScript development environment into separate function files, where each file contains only one function. I want to achieve this using TS modules, but I do not want these modules to be imported at runtime in the compiled JavaScript file - instead, they should be compiled as native code.

For instance, starting with this app.ts:

type ArbitraryAttribute = any //can refer to any value valid at runtime

declare interface App {
    get? (key: string): ArbitraryAttribute | void,
    set? (key: string, val: ArbitraryAttribute): void,
    helper?: AppHelper,
}

declare interface AppHelper {
    deepGetter? (key: string): ArbitraryAttribute | void,
    deepSetter? (key: string, val: ArbitraryAttribute): void,
}

import { get } from "./get";
import { set } from "./set";
import { helper } from "./helper/index";

const app:App = {
    get,
    set,
    helper,
}

This would result in generating the following app.js:

var app = {
    get: function (key) {
        if (app.helper && app.helper.deepGetter) {
            return app.helper.deepGetter(key);
        };
    },
    set: function (key, val) {
        if (app.helper && app.helper.deepSetter) {
            app.helper.deepSetter(key, val);
        };
    },
    helper: {
        deepGetter: function (key) {
            // get anything
        },
        deepSetter: function (key, val) {
            // set anything
        },
    },
};

I have been unable to find a solution for this issue in either the TypeScript configuration or webpack. Is there anyone who knows of a solution or library that can help in achieving this goal?

javascript typescript tsc

Answer 1

Answer №1

In reference to @Dimava's input, using tsconfig provides the opportunity to merge multiple typescript files into a single js file. However, the output for my approach appears quite disorganized. The resultant js file that was previously posted would appear as follows:

System.register("get", [], function (exports_1, context_1) {
    "use strict";
    var get;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [],
        execute: function () {
            exports_1("get", get = function (key) {
                if (app.helper && app.helper.deepGetter) {
                    return app.helper.deepGetter(key);
                }
                ;
            });
        }
    };
});
System.register("set", [], function (exports_2, context_2) {
    "use strict";
    var set;
    var __moduleName = context_2 && context_2.id;
    return {
        setters: [],
        execute: function () {
            exports_2("set", set = function (key, val) {
                if (app.helper && app.helper.deepSetter) {
                    return app.helper.deepSetter(key, val);
                }
            });
        }
    };
});
System.register("helper/deepGetter", [], function (exports_3, context_3) {
    "use strict";
    var deepGetter;
    var __moduleName = context_3 && context_3.id;
    return {
        setters: [],
        execute: function () {
            exports_3("deepGetter", deepGetter = function (key) {
                // get anything
            });
        }
    };
});
System.register("helper/deepSetter", [], function (exports_4, context_4) {
    "use strict";
    var deepSetter;
    var __moduleName = context_4 && context_4.id;
    return {
        setters: [],
        execute: function () {
            exports_4("deepSetter", deepSetter = function (key, val) {
                // set anything
            });
        }
    };
});
System.register("helper/index", ["helper/deepGetter", "helper/deepSetter"], function (exports_5, context_5) {
    "use strict";
    var deepGetter_1, deepSetter_1, helper;
    var __moduleName = context_5 && context_5.id;
    return {
        setters: [
            function (deepGetter_1_1) {
                deepGetter_1 = deepGetter_1_1;
            },
            function (deepSetter_1_1) {
                deepSetter_1 = deepSetter_1_1;
            }
        ],
        execute: function () {
            exports_5("helper", helper = {
                deepGetter: deepGetter_1.deepGetter,
                deepSetter: deepSetter_1.deepSetter,
            });
        }
    };
});
System.register("index", ["get", "set", "helper/index"], function (exports_6, context_6) {
    "use strict";
    var get_1, set_1, index_1, app;
    var __moduleName = context_6 && context_6.id;
    return {
        setters: [
            function (get_1_1) {
                get_1 = get_1_1;
            },
            function (set_1_1) {
                set_1 = set_1_1;
            },
            function (index_1_1) {
                index_1 = index_1_1;
            }
        ],
        execute: function () {
            app = {
                get: get_1.get,
                set: set_1.set,
                helper: index_1.helper,
            };
        }
    };
});

I have not been able to successfully implement this for "--module es2015 --moduleResolution classic", only for "--module system --moduleResolution node". Furthermore, the resulting file size is nearly six and a half times larger!

Answer 2

In reference to @Dimava's input, using tsconfig provides the opportunity to merge multiple typescript files into a single js file. However, the output for my approach appears quite disorganized. The resultant js file that was previously posted would appear as follows:

System.register("get", [], function (exports_1, context_1) {
    "use strict";
    var get;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [],
        execute: function () {
            exports_1("get", get = function (key) {
                if (app.helper && app.helper.deepGetter) {
                    return app.helper.deepGetter(key);
                }
                ;
            });
        }
    };
});
System.register("set", [], function (exports_2, context_2) {
    "use strict";
    var set;
    var __moduleName = context_2 && context_2.id;
    return {
        setters: [],
        execute: function () {
            exports_2("set", set = function (key, val) {
                if (app.helper && app.helper.deepSetter) {
                    return app.helper.deepSetter(key, val);
                }
            });
        }
    };
});
System.register("helper/deepGetter", [], function (exports_3, context_3) {
    "use strict";
    var deepGetter;
    var __moduleName = context_3 && context_3.id;
    return {
        setters: [],
        execute: function () {
            exports_3("deepGetter", deepGetter = function (key) {
                // get anything
            });
        }
    };
});
System.register("helper/deepSetter", [], function (exports_4, context_4) {
    "use strict";
    var deepSetter;
    var __moduleName = context_4 && context_4.id;
    return {
        setters: [],
        execute: function () {
            exports_4("deepSetter", deepSetter = function (key, val) {
                // set anything
            });
        }
    };
});
System.register("helper/index", ["helper/deepGetter", "helper/deepSetter"], function (exports_5, context_5) {
    "use strict";
    var deepGetter_1, deepSetter_1, helper;
    var __moduleName = context_5 && context_5.id;
    return {
        setters: [
            function (deepGetter_1_1) {
                deepGetter_1 = deepGetter_1_1;
            },
            function (deepSetter_1_1) {
                deepSetter_1 = deepSetter_1_1;
            }
        ],
        execute: function () {
            exports_5("helper", helper = {
                deepGetter: deepGetter_1.deepGetter,
                deepSetter: deepSetter_1.deepSetter,
            });
        }
    };
});
System.register("index", ["get", "set", "helper/index"], function (exports_6, context_6) {
    "use strict";
    var get_1, set_1, index_1, app;
    var __moduleName = context_6 && context_6.id;
    return {
        setters: [
            function (get_1_1) {
                get_1 = get_1_1;
            },
            function (set_1_1) {
                set_1 = set_1_1;
            },
            function (index_1_1) {
                index_1 = index_1_1;
            }
        ],
        execute: function () {
            app = {
                get: get_1.get,
                set: set_1.set,
                helper: index_1.helper,
            };
        }
    };
});

I have not been able to successfully implement this for "--module es2015 --moduleResolution classic", only for "--module system --moduleResolution node". Furthermore, the resulting file size is nearly six and a half times larger!

Is it possible to compile TypeScript modules directly into native code within the JavaScript data file?

Answer №1

Similar questions

Creating an Interactive and Engaging 3D Experience on Facebook with the Power of Javascript API

When a node using express encounters :id, it is directed to a specific location

What is the method for importing the "numeric" library version "^1.2.6" into an Angular project?

Creating a REST API with the POST method using Vanilla JavaScript/AJAX and encountering a 400 error (Bad request) issue

Using a vanilla JS object as a prop for a child component

What is the process for renaming folders with files in node.js?

Having trouble grasping the problem with the connection

The error message "item is not defined in nodejs" indicates that the variable

Utilizing PHP with WordPress: Execute the specified .js file if the link includes the ID "124"

Refresh Entity with Real-Time Data on Cesium

The presence of onChange?: (ValueType, ActionMeta) => void with OptionType is not compatible

Tips for resolving the error of encountering a forbidden and unexpected token in JSON at position 0 while using React hooks

What is the best way to retrieve an array of objects that have a property matching another array?

Encountered an error while running the `npx-create-react-app my-app` command in

I am looking to generate div elements using JavaScript to avoid the tedious task of individually creating numerous divs

Encountered an error while using JSON.parse(): `SyntaxError: Unexpected token in JSON at position 0`

Outputting messages to a component with React

Serve static files from parent directories using Express.js

Issues detected with the functionality of Angular HttpInterceptor in conjunction with forkJoin

Incorporating a delay into looped HTTP requests while effectively utilizing Promise.all to track their completion