Combining Closure Compiler with Typescript

My objective is to leverage Typescript along with Closure Compile (advanced compilation) to target ES5 and then minify the resulting output.

Is it mandatory for me to replace tsc with tsickle? I find that tsickle does not provide support for all options available in tsc and is primarily focused on converting Typescript types to Closure types (which may not be entirely compatible). For my needs, I am only interested in minification and property renaming.

Would it be feasible to use tsc for compiling Typescript into ES6 modules and then apply Closure Compiler for minification (without involving type checking or type-based optimizations)?

Additionally, does the approach need to be adjusted if Closure Library is incorporated?

Answer №1

It is technically possible to take the ES6 output generated by the tsc command and directly feed it into Closure Compiler, as Closure is designed to accept JavaScript as input. This process is already being used in various instances, such as Angular applications that are compiled with Closure Compiler including the rxjs library distribution in the closure bundle. You can check out an example at https://github.com/angular/closure-demo

However, in practice, there are a few reasons why it might be beneficial to use a tool like tsickle to transform the JavaScript code before it is processed by Closure.

  • Enums emit does not work with Closure (or rollup, as far as I understand)
  • Closure has limitations with ES6, such as its lack of support for export * - tsickle can re-write this to export {each, visible, symbol}
  • Including JSDoc annotations can help Closure better understand the structure of the code, leading to improved optimizations and reduced warning messages.

Our current plan involves breaking down tsickle into multiple TS 2.3 emit transforms so that we can clearly identify which transforms need to be enabled in the compiler.

Adding types is not mandatory. If you disable tsickle's typed mode, it will simply display {?} for the types. However, if you intend to use TypeScript's output alongside closure JS code, it is beneficial for the closure type-checker to recognize the types.

If you are open to exploring a new build tool, tsickle will be integrated into the Bazel toolchain at some point in https://github.com/bazelbuild/rules_typescript. In the meantime, you can submit a feature request for Tsickle's main support for more command-line flags. (There may also be a fork of Tsickle maintained by Lucidchart?)

Answer №2

Although I may be arriving a bit late to the party, I wanted to share some exciting news about the Closure library: There is now an active fork available that features an up-to-date version of the Closure library along with:

  • Typescript definition (.d.ts) files
  • Implementation of ES6 code in place of custom goog.require and goog.define internally (eliminating the need for dependency on the Closure compiler)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

rxjs - monitoring several observables and triggering a response upon any alteration

Is there a way to watch multiple observables and execute a function whenever any of them change? I am looking for a solution similar to the functionality of zip, but without requiring every observable to update its value. Also, forkJoin isn't suitable ...

Alter the color scheme of the material dialog's background

I have been trying to change the background color of a dialog, but so far I have only been successful in changing the outline. I used the panelClass property as I believed it was the correct way to do it. https://stackblitz.com/edit/jm9gob ...

What could be causing my mdx files to not display basic markdown elements such as lists and headings? (Next.js, mdx-bundler)

Trying to implement Kent C Dodds mdx-bundler with the Next.js typescript blog starter example is proving challenging. While it successfully renders JSX and certain markdown elements, basic markdown syntax like lists and paragraph spacing seem to be malfunc ...

Leverage TypeScript to enforce the value of a property based on the keys of another property

The issue at hand is illustrated in the following example: type ExampleType = { properties: { [x: string]: number; }; defaultProperty: string; }; const invalidExample: ExampleType = { properties: { foo: 123, }, defaultProperty: "n ...

In Javascript, check if an item exists by comparing it to null

I am working with a dropdown list that can be used for various types of data. Some of the data includes an isActive flag (a BOOLEAN) while others do not. When the flag is absent, I would like to display the dropdown item in black. However, if the flag exis ...

Angular2 allows you to create pipes that can filter multiple values from JSON data

My program deals with an array of nested json objects that are structured as follows: [{name: {en:'apple',it:'mela'}},{name:{en:'coffee',it:'caffè'}}] I am looking to implement a pipe that can filter out objects b ...

The static side of the class `typeof _Readable` is erroneously extending the static side of the base class `typeof Readable`

I am currently developing a Discord bot using node/typescript. After running the typescript compiler on my code, I encountered this error: node_modules/@types/readable-stream/index.d.ts(13,15): error TS2417: Class static side 'typeof _Readable' ...

Issue with running gulp ser on first attempt in SPFX

Every time I try running gulp serve, I encounter the following issue: Error: Unable to locate module '@rushstack/module-minifier-plugin' Please assist me with this problem. Thank you! ...

The outcome of data binding is the creation of a connected data object

I am attempting to link the rows' data to my view. Here is the backend code I am using: [Route("GetCarCount")] [HttpGet] public async Task<long> Count() { return await _context.Cars.CountAsync(); } ...

Learn how to hide the dropdown menu in Angular 8 by detecting clicks outside of the menu area

Is there a way to hide the custom dropdown menu whenever I click outside of it? After trying the code below, I noticed that it hides even if I click on an element inside the dropdown menu: <button class="btn btn-primary btn-sm mt-1" type="button" id= ...

Fixed-sized array containing union parameters

One of my programming utilities allows me to create a statically sized array: export type StaticArray<T, L extends number, R extends any[] = []> = R extends { length: L; } ? R : StaticArray<T, L, [...R, T]>; To verify its functionality, ...

ESLint warning: Potentially risky assignment of an undetermined data type and hazardous invocation of an undetermined data type value

Review this test code: import { isHtmlLinkDescriptor } from '@remix-run/react/links' import invariant from 'tiny-invariant' import { links } from '~/root' it('should return a rel=stylesheet', () => { const resp ...

What is the process for creating a jQuery object in TypeScript for the `window` and `document` objects?

Is there a way to generate a jQuery object in TypeScript for the window and document? https://i.stack.imgur.com/fuItr.png ...

What is the best way to utilize ngFor for iterating through a Map variable of classes in TypeScript?

In my TypeScript file, I have a class named `myMap` that contains a variable called `navList`, which is of type Map<string, string> and holds multiple key-value pairs. I am currently attempting to iterate over the values stored in `navList` within my ...

Dynamically load components within a modal window

I am looking for a way to dynamically load a custom component inside a modal while keeping it as flexible as possible. Here is an example : -HTML CODE- <button id="floating_button" class="floating_button animation_floating_in" (click)="loadCustomComp ...

Executing Multiple Requests Concurrently in Angular 5 using forkJoin Technique

Important Note The issue lies in the backend, not Angular. The requests are correct. In my Angular5 app, I am trying to upload multiple files at once using rxjs forkJoin. I store the requests in an array as shown in the code below. However, after adding ...

How can I incorporate percentage values into input text in Angular?

How can I include a percent sign in an input field using Angular, without relying on jQuery? I am looking for a solution that is identical to what I would achieve with jQuery. Here is the current status of my project: ...

Distinguishing between type assertion of a returned value and defining the return type of a function

What distinguishes between performing a type assertion on a function's return value and explicitly typing the return value in the function signature? Let's consider only simple functions with a single return statement. interface Foo { foo: numbe ...

Is it possible to enable full screen window functionality in Angular 2 by simply clicking a button? Let's find out

After successfully creating the user login page, I am facing an issue. When the submit button is clicked, the page should navigate to a specific component (test.component.ts and test.component.html). My goal now is to make that window go into full screen m ...

Angular 8 does not allow for the assignment of type '{}' to a parameter

I have a unique approach for managing errors: private handleErrors<T>(operation = 'operation', result?: T) { return (error: any): Observable<T> => { console.error(error); this.record(`${operation} failed: ${error.m ...