Can we preserve the original function header even after the typescript compilation process?

Question

Can we preserve the original function header even after the typescript compilation process?

Typically, one can access function information by using the following method:

function someFunction(arg1, { a, b, c}){}

someFunction.toString()

... compile and run

//function someFunction(arg1, { a, b, c}){}

However, when TypeScript compiles the code, any function that contains deconstructed arguments will be replaced with _a:

function someOtherFunction(arg1, { a, b, c}){}

console.log(someOtherFunction.toString())

... compile and run

//function someOtherFunction(arg1, _a){}

Is there a way to retrieve the original deconstructed argument information while still utilizing TypeScript?

I've searched through the TS issue tracker, but couldn't find a straightforward solution. Nothing stood out upon initial search.

EDIT As I was attempting this with ts-node, the fix was adjusting both the target and module as described here: https://github.com/TypeStrong/ts-node/issues/678. This ensures that the compiled code remains es6 code which preserves the deconstruction!

Thank you all!

javascript typescript

Answer 1

Answer №1

Executing the Function.prototype.toString() method will consistently display the compiled javascript code, which varies depending on your target environment as it impacts how the code is compiled. This characteristic is specific to runtime javascript and cannot be influenced by Typescript during compile time.

Consider this basic example:

function someFunction(
    arg1: string,
    { a, b, c }: {a: string, b: string, c: string}
){}
alert(someFunction.toString())

If the targeted environment is ES5 or earlier, destructuring assignment is not supported. Therefore, the compiler adapts the argument structure to achieve similar functionality without assuming compatibility with unsupported features.

Example with ES3 target (click Run)

Example with ES2015 target (click Run)

To address this issue, you can modify your target environment but ensure that it supports destructuring assignments. If you are compiling for older environments, invoking toString() will always retrieve the function body adjusted for your target environment's requirements.

Answer 2

Executing the Function.prototype.toString() method will consistently display the compiled javascript code, which varies depending on your target environment as it impacts how the code is compiled. This characteristic is specific to runtime javascript and cannot be influenced by Typescript during compile time.

Consider this basic example:

function someFunction(
    arg1: string,
    { a, b, c }: {a: string, b: string, c: string}
){}
alert(someFunction.toString())

If the targeted environment is ES5 or earlier, destructuring assignment is not supported. Therefore, the compiler adapts the argument structure to achieve similar functionality without assuming compatibility with unsupported features.

Example with ES3 target (click Run)

Example with ES2015 target (click Run)

To address this issue, you can modify your target environment but ensure that it supports destructuring assignments. If you are compiling for older environments, invoking toString() will always retrieve the function body adjusted for your target environment's requirements.

Can we preserve the original function header even after the typescript compilation process?

Answer №1

Similar questions

Despite having unique ids, two file input forms are displayed in the same div in the image preview

What causes an error when attempting to map an array in React+Redux?

Creating an HTML table for displaying information

INSERT INTO only if Name and Location are NOT identical

Issue with Web API and AJAX: Unable to retrieve resource, server returned status code 400

Stop the automatic deduction of union types while utilizing an indexed access type within a generic function

I am interested in implementing a "slide up" effect for the "slide menu" when it loses focus

Module Augmentation for extending Material UI theme is not functioning as expected

Challenges arise when trying to load CSS on an EJS page in conjunction with using res.redirect()

Imitate a worldwide entity with Jest and Typescript

Discover the type of an object in TypeScript

Adding HTML elements dynamically using jQuery: A how-to guide

Create a conditional event callback in TypeScript for React

How can one continue repeating a series in async.js until an unforeseen error arises?

"Present a continuous sequence of images in HTML to create a dynamic video-like experience

Encountering "Missing requests" error while executing npm run pactTest on PACT.io

Keep the link underlined until a different button is pressed

React - Show/Hide All items

Jstree: Whenever I refresh my tree, the checkboxes do not reset to default and remain unchecked

Express: Every declaration of 'user' must have the same modifiers