When an import is included, a Typescript self-executing function will fail to run

Looking at this Typescript code:

(()=> {
console.log('called boot'); // 'called boot'
})();

The resulting JavaScript is:

(function () {
    console.log('called boot');
})();

define("StockMarketService", ["require", "exports", "jquery"], function(require, exports, $) {
    "use strict";
    var StockMarketService = (function (_super) {
        __extends(StockMarketService, _super);
        ... additional code omitted ...
        return StockMarketService;
    }(Riot.Observable));
    exports.StockMarketService = StockMarketService;
});

Contrast this with the Typescript import:

import {StockMarketService} from "./services/stockmarket-service";
(()=> {
    console.log('called boot'); //NOTHING HAPPENS.
})();

Which leads to the following JS:

define("StockMarketService", ["require", "exports", "jquery"], function(require, exports, $) {
    "use strict";
    var StockMarketService = (function (_super) {
        __extends(StockMarketService, _super);
        ... additional code omitted ...
        return StockMarketService;
    }(Riot.Observable));
    exports.StockMarketService = StockMarketService;
});
define(["require", "exports"], function (require, exports) {
  "use strict";
  (function () {
    console.log('called boot');
  })();
});

In the second version, the Immediately Invoked Function Expression no longer functions as expected. This IIFE serves as the entry point to the application and is not a module. The goal is simply to execute the IIFE. All dependencies are consolidated in one file that needs to be referenced and used.

What could be causing this issue?

Answer №1

The IIFE no longer functions in the updated version.

This second example utilizes a module structure (learn more here). Module bodies are only executed when triggered by an external request. The module body will be executed if the module is used somewhere within your application hierarchy. 🌺

Answer №2

Any JavaScript code can be considered valid TypeScript code,

Therefore, modify

import {StockMarketService} from "./services/stockmarket-service";

(()=> { console.log('called boot'); //NOTHING HAPPENS. })();

to

import {StockMarketService} from "./services/stockmarket-service";

(function () { console.log('called boot'); })();

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

The outcome of my function designed to calculate the highest possible profit using k transactions is a null array

I have developed a custom function to calculate the maximum profit from a series of stock transactions given a specific number of transactions allowed. Each transaction involves buying at a low price and selling at a higher price, with the rule that you ...

The functionality of the Request interface appears to be malfunctioning

Hey there, I'm currently working on building an API using Express and TypeScript. My goal is to extend the Request object to include a user property. I've done some research on Google and found several posts on StackOverflow that explain how to d ...

Enhance DataTables functionality by including the ability to select which script to execute

Currently, I have a DataTables displayed with the provided code, utilizing server-side processing which is functioning properly. I am interested in implementing a dropdown menu above the table that allows users to select from options such as: Product Gr ...

Triggering a jQuery ajax request upon pressing a key on the keyboard

When a user inputs text into an <input> element, I'm using ajax to send a request to the server. Here's how it looks: $('#my-input').bind("input", function(event){ // ajax request code }); My concern is that too many requests ...

Unlocking $refs with the Composition API in Vue3 - A step-by-step guide

I am currently exploring how to access $refs in Vue 3 using the Composition API. In my template, I have two child components and I specifically need to obtain a reference to one of them: <template> <comp-foo /> <comp-bar ref="ta ...

Guide on detecting and capturing a change in location history event

My main goal is to capture router change events outside of the NextJS framework, not within it. The application I have developed using NextJS includes some code that operates independently of the NextJS context. This code needs to be able to detect navigat ...

Invalid component exception: The element type is not valid in React Native

In my React Native App.js file, I have included the following code snippet import { StatusBar } from 'expo-status-bar'; import React, { useRef } from 'react'; import { StyleSheet, Text, View, Canvas } from 'react-native'; impo ...

Angular 5 and Bootstrap card with enhanced double-click functionality

I want to design a Bootstrap card that can trigger two of my custom methods. <div (click)="TEST1()" class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <button (click)="(T ...

Whenever I use jQuery to dynamically add a new form input, the Select2 input fails to function properly

For my form, I'm attempting to dynamically add a new form-row each time the user clicks the add button. <div class="form-row mb-2"> <div class="form-group col-md-3 my-2"> <label>File</label> ...

What could be the reason behind the improper display of JavaScript for ID overlay2?

Why is it that when I try to have two overlays with different messages display upon clicking buttons, they both end up showing the same message? Even after changing the ID tag names, the issue persists. Can someone shed some light on what might be causin ...

What is a more efficient method for structuring this React page while making an asynchronous request to the API?

When developing, I encountered this scenario where I needed to ensure that a certain useEffect function only runs once. To achieve this, I established router.query.something as a dependency for the effect. The logic is such that the request will only trigg ...

Optimizing row performance for Angular grids in the Chrome browser

When creating a component that includes a table with numerous rows, everything works well with small amounts of data. However, once the item count reaches 2000 or more, it starts lagging. Scrolling and animations become sluggish. Even after trying to impl ...

Tips for effectively downsizing an HTML Canvas to achieve high-quality images

Introduction I am currently facing issues with blurry visuals in my canvas animation, especially on devices with high pixel densities like mobile and retina screens. In order to address this problem, I have researched canvas down-scaling techniques and f ...

Trouble arises from the object data type not being properly acknowledged in TypeScript

In the code snippet provided, I am facing a challenge where I need to pass data to an if block with two different types. These types are handled separately in the if block. How can I make TypeScript understand that the selected object could be either of ty ...

The Bootstrap modal-backdrop dilemma requiring JavaScript intervention

I am encountering some problems with the Bootstrap modal. When I try to open a modal, everything looks good, but when I close it, the screen turns completely black. Upon closer inspection, I found that every time I click on the X to close the modal, there ...

tips for effectively utilizing getters in array sorting operations

I've been encountering some issues with vuex getters. My objective is to arrange the cart data, which consists of an array of objects, by date using the getter named myCartItems. The problem I'm facing is that when I add a second payload {prod_ ...

React - the state fluctuates

The Goal I'm Striving For: Transmitting data from child to parent. My Approach: Utilizing this.state as outlined here Having trouble summarizing the issue: Upon calling console.log(this.state) in the function where I update the state, the correct va ...

Experience interactive video playback by seamlessly transitioning a webpage video into a pop-up when clicking on an

I want to have a video play as a pop-up when the user clicks a play button, while also fading out the background of the page. It should be similar to the way it works on this website when you click to watch a video. How can I achieve this? <div class=" ...

Retrieve data using $http.get when an accordion group is expanded in AngularJS

Currently, I am utilizing Angular v1.2.0rc1 along with Angular-UI Bootstrap. [edit] My objective is to implement a load-on-demand feature with caching while incorporating an accordion functionality. The accordion group that I am using can be found here. ...

What is an alternative method to retrieve form data without relying on bodyParser?

When it comes to accessing posted form data without using bodyParser, what alternatives are available? How exactly does bodyParser grant access to the data in req.body? Additionally, I am curious about the inner workings of this process on a deeper level. ...