What factors may lead to gulp-typescript producing varying results on each run?

We recently encountered an issue on our build server where the generated javascript was not working sporadically. After investigation, we found that the order of the code in the generated file was arbitrary, leading to the malfunction.

After reading through https://basarat.gitbooks.io/typescript/content/docs/tips/outFile.html, it seems like using outFile may not be the best practice and it might be time to switch to a proper module system. It's puzzling why this problem suddenly appeared out of nowhere.

If switching to a module system is the solution, which one would be recommended?

The snippet from gulpfile.js looks as follows:

var gulp = require("gulp");
var sourcemaps = require('gulp-sourcemaps');
var ts = require('gulp-typescript');
var tsLint = require('gulp-tslint');

var tsProject = ts.createProject('tsconfig.json', {}, ts.reporter.longReporter());

var config = {
    maps: './maps',
    scripts: './content/scripts'
};

gulp.task('tslint', function() {
    return tsProject.src()
        .pipe(tsLint({
            configuration: {
                rules: { "semicolon": true }
            }
        }))
        .pipe(tsLint.report('verbose'));
});

gulp.task('typescript',['tslint'], function() {
    var tsResult = tsProject.src()
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject))
        .pipe(sourcemaps.write(config.maps))
        .pipe(gulp.dest(config.scripts));
    return tsResult;    

});

And here is the content of tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "noEmitOnError": false,
    "noImplicitAny": false,
    "removeComments": false,
    "target": "es5",
    "outFile": "application.js"
  },
  "files": [
      "list of all the files"       
  ]
}

Answer №1

It is not recommended to use the outfile feature according to Basarat's explanation on the provided page.

If your code relies on JavaScript ordering, you may encounter unpredictable errors during runtime.

Now onto the second part of your inquiry.


Ultimately, the choice of which module system to use largely comes down to personal preference.

This is because...

  • Most bundlers have the capability to support various types of modules
  • In order to maintain your current workflow, your modules will be directly inputted into your bundler, so you won't need to interact with them directly.
  • The TypeScript compiler can easily handle outputting any of these module types
  • Your code will look consistent as you write it in TypeScript

From a subjective standpoint, CommonJS appears to be quite popular (likely due to its history and default inclusion in auto-generated tsconfig.json files). AMD has also been widely used, particularly for those interested in dynamic loading of JavaScript assets. SystemJS is currently gaining popularity within the JS community and has its own module specification, but it is capable of loading all other types as well, making it hard to justify using the system format over alternatives.

Unless dynamic loading becomes a concern, feel free to choose based on aesthetics or the module system with the most appealing name.

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

Tips on validating interconnected strings with the help of yup within a react native environment

In my scenario, I am dealing with two date strings called start_date and end_date. Initially, both of these start off as empty strings: export interface FilterSchema { start_date?: any; end_date?: any; } const initialValues: FilterSchema = { s ...

What is the method for accessing an anonymous function within a JavaScript Object?

Currently facing an issue with a Node.js package called Telegraf, which is a bot framework. The problem arises when trying to create typings for it in TypeScript. The package exports the following: module.exports = Object.assign(Telegraf, { Composer, ...

Angular 4 Filtering Pipe: Simplify Data Filtering in Angular

Attempting to replicate AngularJS's OrderBy feature. Working with an array like this, I am aiming to filter the cars by their car category. [ { "car_category": 3, "name": "Fusion", "year": "2010" }, { "car_category": 2, "na ...

Removing empty options from a select dropdown in Angular 9

In the process of working with Angular 9, I am currently in the process of constructing a dropdown menu that contains various options. However, I have encountered an issue where there is a blank option displayed when the page initially loads. How can I eli ...

Newest preact and typescript packages causing issues with type validation

Despite my efforts to integrate preact with TypeScript, I have encountered a problem where incorrect types can be passed without any error being raised. I am in the process of transitioning our codebase from plain JavaScript to preact with type scripting. ...

Having trouble debugging the current TypeScript file in VS Code because the corresponding JavaScript file is missing

In my current project using Visual Studio Code version 1.17, I am focusing on debugging the current typescript file. As part of my setup, I have a build task in place which generates a corresponding javascript file structure like so: src/folder1/folder2/m ...

Struggling with a Nextjs Stripe issue? The expected signature for payload does not match any found signatures

Struggling to integrate data from Stripe check out events into my orders database, facing issues with finding the signature while testing the web hook. Check out route: app/api/webhooks/checkout/route.ts import Cors from "micro-cors"; import { h ...

Utilizing class-transformer to reveal an array of objects

I am facing an issue with exposing an array of objects in my code. Even though I have exposed the Followers array in the UserDto, it is not getting displayed as expected. This is the output I am currently seeing, { "id": "5ff4ec30-d3f4- ...

Tips for making a property non-nullable in Typescript

The Node built-in IncomingMessage type from DefinitelyTyped's definition (used as req in the (req, res, next) arguments) has specified that url can be nullable. This excerpt shows part of the definition: // @types/node/index.d.ts declare module "http ...

ng2-table ways to customize the appearance of a particular row

Hey there, I'm currently new to Angular 2 and working with ng2-table. I've successfully added a table like the one shown here to my website. Now, I'm trying to figure out how to add color to specific rows within the table. Following the ste ...

Is it possible to specify the version of a dependency using Stackblitz?

Is it possible to specify the dependency version on StackBlitz? I recently updated the dependency on NPM, however StackBlitz seems to be stuck on installing the old version. ...

What is the process for creating a map in which the value type is determined by the key type?

Is it feasible to formulate a Map<K, V> in a manner where the type of the value relies on the type of the key, without explicitly specifying the key's type upon initializing the map? For instance: abstract class BaseA { a() {} } class ConcreteA1 ...

Utilizing Express JS to make 2 separate GET requests

I am facing a strange issue with my Express API created using Typescript. The problem revolves around one specific endpoint called Offers. While performing operations like findByStatus and CRUD operations on this endpoint, I encountered unexpected behavior ...

I keep encountering errors with TypeGuard

Looking for some guidance with typescript. Even after implementing a type guard (and including the '?' symbol), I'm still encountering errors in the code snippet below. Is the syntax correct or should I make changes to the tsconfig file? int ...

An issue arising with the TypeScript antlr4ts listener type

I am currently attempting to incorporate the antlr4 parser into an angular project. Within a dataservice class, there is a function being called that appears as follows: parseRule() { const ruleString = ' STRING TO PARSE'; const inputS ...

I am looking to append a new value to an array within the state in React

development environment ・ react ・ typescript In this setup, state groups are stored as arrays. If you want to add a group to the array of groups when the onClickGroups function is called, how should you go about implementing it? interface ISearc ...

Error: Attempting to call a function on a type that does not have a callable signature. The type 'Number' does not support calling functions

Previous inquiries on this topic have left me with unanswered questions. As a newcomer, I've been exploring TypeScript's import and export functionality. Below is the code snippet I've come up with. Your feedback would be greatly appreciate ...

Attempting to convert numerical data into a time format extracted from a database

Struggling with formatting time formats received from a database? Looking to convert two types of data from the database into a visually appealing format on your page? For example, database value 400 should be displayed as 04:00 and 1830 as 18:30. Here&apo ...

Creating a validation error in Angular: When a user submits an empty form, radio buttons will be highlighted in red

I have encountered an issue already posted on GitHub regarding this matter, but unfortunately, no solution has been provided yet. You can view the issue here: https://github.com/angular/components/issues/11333 I was wondering if there are any workarounds ...

Deactivate the FormGroup by implementing Validators

In my form, I have a checkbox group named formArray within my checkboxForm. The task at hand is to disable the submit button if none of the checkboxes are checked. To achieve this, I created a custom validator for my checkboxForm and here is my approach: ...