What is the timing for the execution of top-level non-export code in TypeScript?

I am currently puzzled about the execution of code in files. Let's say we have a file1.ts with the following content:

export interface myInterface {}
export function myFunction() {}
export const myConst: {}

// ... and more exports

// top-level non-exported code
if (condition) {
    myConst = ...
}

And then a file2.ts that includes one of the following:

import { myInterface } from "./file1.ts"
import * from "./file1.ts"
import * as file1 from "./file1.ts"
import "./file1.ts"

How does the behavior differ in each case? When is the top-level code in file1.ts executed and when is it not? Is it executed even if only a specific export is imported (like in the first variant)?

This topic is driving me crazy at the moment and I have been unable to find any information about it in the TypeScript handbook section on modules.

Answer №1

Various factors play a role in determining whether a TypeScript module is included in the final JavaScript files after transpilation:

  1. The way imported variables are used in your code.
  2. The type of imported variables, such as class or interface.
  3. Starting from TypeScript 2.8, the compiler settings include importsNotUsedAsValues to manage this behavior.
  4. From TypeScript 2.8 onwards, there is also new syntax like import type and export type for modules that are intentionally excluded from the compiled JavaScript files.

For further information, refer to the section on Type-Only Imports and Exports in the TypeScript 2.8 release notes: Type-Only Imports and Export

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

What could be causing me to see a basic checkbox instead of a toggle switch in my React application?

I've been attempting to create a toggle switch that activates dark mode using Bootstrap switches, but when I save the code, it reverts back to a basic checkbox. According to the documentation, for older assistive technologies, these switch elements wi ...

Steps to set up datetimepicker with varying date ranges for several input fields

I am having trouble getting a new date range for each text box in my form. It seems to only return the date range from the last textbox, even though I have made the textbox IDs dynamic. I have both start and end dates for each textbox and I have calculated ...

Decode PDF417 barcode images with ease using HTML and JavaScript on both desktop and mobile web browsers

Looking to utilize JavaScript to decode PDF417 type barcode images? If you're encountering Zxing plugin issues in mobile browsers but it works well on desktop browsers with https://github.com/PeculiarVentures/js-zxing-pdf417, consider alternative sol ...

Discover the technique for splitting a string using jQuery with multiple strings as separators

I am looking to split a string in jQuery or JavaScript using multiple separators. When we have one string as a separator, our code looks like this: var x = "Name: John Doe\nAge: 30\nBirth Date: 12/12/1981"; var pieces = x.split("\n"), p ...

When the state is updated, the Observable fails to retrieve the value from the store

My goal is to update the Observable by connecting it to the store, but I encountered an issue where it didn't get updated when the store received a new value: Within my component, I have declared 'tasks' as an Observable: tasks$: Observable ...

Upgrading to Angular 2: Utilizing ElementRef in ES5

Currently, I am facing a challenge in creating an Attribute directive for Angular 2 that would allow me to set multiple default HTML attributes using a single custom attribute. My intention is to apply this directive specifically to the input element. Howe ...

What is the best way to iterate through the result of an HTTP request in Angular 11?

I am a beginner with Angular and currently working in Angular 11. I am facing issues with making an http request. Despite going through numerous Stack Overflow posts, none of the solutions seem to work for me, even though some questions are similar to mine ...

Adjust the content of an iframe based on the size of the screen

Hi there, I'm currently facing an issue with an ad that can't be resized. The support team suggested using two different ads - one for mobile and one for desktop. The dimensions of the ads are 720 x 90 and 300 x 100. I would like the ad to automa ...

Can you explain the distinction between certain assignment assertion and ambient declaration?

When declaring that a field is definitely initialized within a class, what distinguishes the ! (exclamation point, definite assignment assertion) from the declare modifier? The subsequent code triggers an error in strict mode as TypeScript cannot confirm ...

Display title upon hovering over image linked to mysql with php

Is there a way to display the image title when hovering over images connected to MySQL using PHP? Below is the code I have been using: <div class="galleryko"> <?php $data = mysql_query("SELECT * FROM tbl_gallery_featured")?> <div clas ...

Grid layout showcasing masonry gallery

I've spent some time looking for a Masonry gallery with a grid layout, but couldn't find one that suited my needs. So, I decided to create my own. I implemented a customElement with grid layout, but encountered an issue when trying to assign grid ...

Completely triggering a forced refresh on a single page application, disregarding cache, service workers, and all other

After experimenting with service workers on my Vue-built website, I made a critical error that has left Safari on my iPhone displaying only a blank page. To troubleshoot the issue, I connected my phone to my Mac and utilized Safari's inspector tool t ...

Creating a column for dates using the js-xlsx library

After multiple attempts using js-xlsx, I have encountered an issue when trying to write a XLSX file with a Date column. Whenever I open the file in Excel 2010, the date is displayed as the number of days from a specific origin rather than in the desired fo ...

"Upon refresh, the overflow property of the child element is being applied to the window position

In the React app I'm working on, there's a search results page where users can apply filters. These filter selections update the query params in the URL and trigger a re-mount in React. However, I've encountered an issue across different bro ...

Is Meteor.js the solution for time-triggered server requests?

We are currently in the process of developing an application that matches users from a database every Wednesday and Friday. How can we achieve this using Meteor? In the server code, I am considering organizing this functionality within a timedserver.js fi ...

What steps do I need to take in order to display my data in a dynatree

Currently, I am in the process of developing a web application and incorporating dynatree for structuring purposes. EXAMPLE: Node 1 + Node 1.1 + Node 1.1.1 + Node 1.1.2 + Node 1.1.3 My goal is to introduce a child node (+Node 1.1.3.1) within th ...

TypeScript abstract class generics: `Class<?>` type

When working with TypeScript, I often utilize a Java-like type called Class: interface Class<T = void> { new(...args: any[]): T; } Unfortunately, this type doesn't seem to be compatible with abstract classes: abstract class Bar {} class ...

Develop an interactive feature using React.js that allows users to manipulate the position of objects within a div

Looking to create a simple div with left and right buttons on either side that can shift the content in the center. An example of what I envision is shown here: https://i.sstatic.net/8AN54.png Upon clicking the right arrow, the content should transition ...

Remove numerous entries from the WordPress database by selecting multiple checkboxes

A new customer table named "tblvessel" has been created in the Wordpress database. The code provided below selects records from the database and displays them as a table with checkboxes next to each record, assigning the record's 'ID' to the ...

A guide to resizing images for uploading in Node.js using Jimp without the need for refreshing the page

My goal is to resize a file server-side using Jimp before uploading it to Cloudinary in a node.js environment. Here's the controller I'm using: exports.uploadImage = async (req, res) => { if (!req.files) { return res.status(400).json({ m ...