Preprocessor Defines in Typescript

Question

In C #, you can do #if DEBUG ... do something special when debugging. I would like to do a similar thing in Typescript so that I can set form values ​​when testing.

Anyone have any suggestions on how to implement this in Typescript?

The best I came up with is the settings class:

export class Settings { static isDebugging = false; }; 

Then when I launch the application, I set it to true.

Then in the code, I import the class and check if it is true or not.

 if (Settings.isDebugging)... 

Everything seems to be fine.

Answer 1

If you want to achieve something similar to the #if directives from C #, then you will need to do something that imposes certain code when creating your application.

There are several plugins for this that you can use. There are some build plugins (see here and here ) that will separate the code that is in the comments like this during build:

 /* test-code */ removeMeInProduction(); /* end-test-code */ 

However, using these plugins, you may be mistaken in writing test-code or end-test-code , forcing you to leave the test code in the production process. You will not get a compilation error.

Because of this, it is probably better to find a build plugin that breaks down a function based on its name (see here - unfortunately, t find a gulp plugin for this). So you could write something like this:

 function ifNotProduction(func: () => void) { func(); } 

Then use it:

 ifNotProduction(() => { console.log("Only run when test."); }); 

And then tell the assembly script to prohibit the use of this function when it is not a production assembly.

All in all, your simple solution is simply checking boolean is enough.

Answer 2

Flags such as #if DEBUG not available in TypeScript because the compilation output is always the same. In C #, when compiling into debug mode, DLL files contain additional information for debugging. In release mode, this information is omitted, and DLL files are lighter.

If you use an automatic build environment, for example Gulp or Grunt, you can save your settings in a folder, for example /config/debug/config.ts and /config/release/config.ts , then you can create two tasks:

One for debugging:

 $ gulp bundle-debug 

And one for release

 $ gulp bundle-release 

To copy a single file.

Answer 3

There is code that adds preprocessor directive support in TypeScript: https://github.com/Microsoft/TypeScript/issues/4691

However, it is debated whether it will become part of TypeScript. Until then, the workaround is mainly to use external build tools or various configuration parameters (which encode the code at compilation time) and magic variables (which simply disable the code paths at runtime)

Answer 4

I always #ifdef use the C preprocessor to conditionally #ifdef in JavaScript programs. I have not tried this with TypeScript yet. Here is a good page about it: http://www.nongnu.org/espresso/js-cpp.html .

General command in the link:

 # configure your web server to pipe Javascript through GNU cpp: /usr/bin/cpp -P -undef -Wundef -std=c99 -nostdinc -Wtrigraphs -fdollars-in-identifiers -C