Another way to build TypeScript projects
I won't talk a lot about TypeScript. In my opinion, this is already well-established and well-proven technology that provides programming capabilities that were not enough in JavaScript before. The most basic features of the language, in my opinion, was a clearer OOP and strong typing. And for these qualities I fell in love with this language and it harmoniously fit into my projects.
It all started with the fact that I called the compiler on the command line after every change to the project and reassembled the project. It was terribly uncomfortable and slowed down the development very much. For grunt, there was a grunt-ts extension that solved my problems and I used it for a while. The TypeScript compiler has one feature (not a bug and not a fitch, political correctness), which was not taken into account in all the extensions that I tried. It terribly prevented and forced to write the code. grunt-tsc is an extension for grunt that allows you to build projects in TypeScript, which I want to tell you about.
A special feature of the compiler is that when compiling a single file with dependencies, the output file contains the code of the compiled file itself, as well as all the files specified in the dependencies. This really surprised me because the normal case for grunt is to compile files "one to one". And it turns out that when compiling a project, when you need to have a big mountain of * .js files (compiled analogs of * .ts, with common dependencies), you get a lot of garbage in the output files (a lot of duplicate code, which is not really needed). At that moment, when I started writing my solution, I could not find a ready-made code with a fix for such a compiler feature, maybe now it isn’t. I looked at the hack (perhaps it was somewhere documented, I did not find it) for watcher's idea, it turned out to be very simple - run the compiler in the directory where the * .ts file is located and, when specifying the file, do not use the path, but only the name file and do not work with the option "--out".
')
From the example it will immediately become clear:
Such use leads to the fact that the file Deferred.js contains all the dependencies, which in fact I wanted to compile separately and contain in other files.
But, for example, such use eliminates this problem and in the output file Deferred.js contains only the compiled code Deferred.ts, while the dependency check remains.
This turned out to be what I needed and I wrote my solution. The solution has no outstanding abilities, it just correctly solves the compilation problem. Also, the ability to select a compiler version has been added to the grunt module, the dependency on the global tsc installation has been removed, and a more flexible way of specifying the * .d.ts dependencies has been added.
The extension itself, by default, has no dependency on the global tsc installation. The compiler is inside the module and nothing more is required apart from the installation of the module. The module has an options.version option with which you can specify the version of the compiler. You can set the following values ​​(when the article was written): “1.0”, “1.1”, “1.3”, “1.4”, “default” (1.3), “latest” (1.4). Support for different versions seemed to me very useful and it was implemented, for example, if older projects have a dependency on older versions of the compiler.
In addition, the compiler can be specified explicitly by specifying the path to it using the options.compiler option. With this use, the options.version option will be ignored. For example, if you still want to use the system-installed compiler, then the option should be "/usr/local/lib/node_modules/typescript/bin/tsc.js". Yes, there is a very important point, the option should point to the * .js file.
There are 3 options for dependencies:
The remaining extension options repeat the compiler options and they can be easily understood, I will not describe them. The total number of configuration options is very large, but this should not be scary, it’s all optional and the compilation starts with default values.
It seems to me that the extension correctly performs its task and it is not worth supplementing it with new features. The only thing I want to add is the preprocessing instructions, but they can affect the sourcemap, so I think how to do it more carefully. And also TypeScript develops and I will support the latest versions of the compiler. I would be very happy if the extension is useful to anyone, as well as I will be happy reviews.
TypeScript official website
Glob extension
Grunt-tsc extension
It all started with the fact that I called the compiler on the command line after every change to the project and reassembled the project. It was terribly uncomfortable and slowed down the development very much. For grunt, there was a grunt-ts extension that solved my problems and I used it for a while. The TypeScript compiler has one feature (not a bug and not a fitch, political correctness), which was not taken into account in all the extensions that I tried. It terribly prevented and forced to write the code. grunt-tsc is an extension for grunt that allows you to build projects in TypeScript, which I want to tell you about.
A special feature of the compiler is that when compiling a single file with dependencies, the output file contains the code of the compiled file itself, as well as all the files specified in the dependencies. This really surprised me because the normal case for grunt is to compile files "one to one". And it turns out that when compiling a project, when you need to have a big mountain of * .js files (compiled analogs of * .ts, with common dependencies), you get a lot of garbage in the output files (a lot of duplicate code, which is not really needed). At that moment, when I started writing my solution, I could not find a ready-made code with a fix for such a compiler feature, maybe now it isn’t. I looked at the hack (perhaps it was somewhere documented, I did not find it) for watcher's idea, it turned out to be very simple - run the compiler in the directory where the * .ts file is located and, when specifying the file, do not use the path, but only the name file and do not work with the option "--out".
')
From the example it will immediately become clear:
tsc --out ./utils/deferred/Deferred.js ./utils/deferred/Deferred.ts Such use leads to the fact that the file Deferred.js contains all the dependencies, which in fact I wanted to compile separately and contain in other files.
cd ./utils/deferred && tsc Deferred.ts But, for example, such use eliminates this problem and in the output file Deferred.js contains only the compiled code Deferred.ts, while the dependency check remains.
This turned out to be what I needed and I wrote my solution. The solution has no outstanding abilities, it just correctly solves the compilation problem. Also, the ability to select a compiler version has been added to the grunt module, the dependency on the global tsc installation has been removed, and a more flexible way of specifying the * .d.ts dependencies has been added.
Eliminating global dependencies and compiler version selection
The extension itself, by default, has no dependency on the global tsc installation. The compiler is inside the module and nothing more is required apart from the installation of the module. The module has an options.version option with which you can specify the version of the compiler. You can set the following values ​​(when the article was written): “1.0”, “1.1”, “1.3”, “1.4”, “default” (1.3), “latest” (1.4). Support for different versions seemed to me very useful and it was implemented, for example, if older projects have a dependency on older versions of the compiler.
In addition, the compiler can be specified explicitly by specifying the path to it using the options.compiler option. With this use, the options.version option will be ignored. For example, if you still want to use the system-installed compiler, then the option should be "/usr/local/lib/node_modules/typescript/bin/tsc.js". Yes, there is a very important point, the option should point to the * .js file.
Specifying Dependencies
There are 3 options for dependencies:
- options.references - this option is specified as a string or an array of strings and is the mask (glob extension) of the * .d.ts declaration files search.
- options.libray is a boolean option that indicates that the current compiler's lib.d.ts file must be included, even if it is specified via the options.compiler option.
- options.system - this option is very similar to options.references , except that dependencies are searched for in the current compiler folder (for the latest versions of * .d.ts it has become very much), even if it is specified via options.compiler .
The remaining extension options repeat the compiler options and they can be easily understood, I will not describe them. The total number of configuration options is very large, but this should not be scary, it’s all optional and the compilation starts with default values.
It seems to me that the extension correctly performs its task and it is not worth supplementing it with new features. The only thing I want to add is the preprocessing instructions, but they can affect the sourcemap, so I think how to do it more carefully. And also TypeScript develops and I will support the latest versions of the compiler. I would be very happy if the extension is useful to anyone, as well as I will be happy reviews.
TypeScript official website
Glob extension
Grunt-tsc extension
Source: https://habr.com/ru/post/249231/
All Articles