TypeScript creates a .d.ts file that contains declaration statements rather than export declarations

When compiling my code using the command

tsc --p typescript/tsconfig.json --outFile "dist/umd/index.d.ts"
, I encountered an issue.

The contents of my tsconfig.json file are as follows:


{
  "include": ["../src/**/*"],
  "exclude": ["../**/*.test.ts"],
  "compilerOptions": {
    "target": "es2015",
    "lib": ["dom", "es2017"],
    "moduleResolution": "node",
    "module": "amd"
  }
}

However, the resulting index.d.ts file has unexpected content, including statements like:


var __spreadArrays = (this && this.__spreadArrays) || function () {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    // more statements...
};

define("enums", ["require", "exports"], function (require, exports) {
    // exported values...
});

// other similar definitions and exports...

Upon trying to use this file, TypeScript raised errors such as:


dist/umd/index.d.ts:1:1 - error TS1036: Statements are not allowed in ambient contexts.

This issue makes me question why TypeScript generated a file that seems incompatible with its own syntax. Why is it utilizing define instead of export? Additionally, an error message like:


tests/typescript/base.ts:1:30 - error TS2306: File '/Users/federicozivolo/Projects/popper.js/dist/umd/index.d.ts' is not a module.

import { createPopper } from '@popperjs/core';

If anyone can provide assistance or insights on this matter, the full source code can be found at https://github.com/popperjs/popper.js/pull/849.

Answer №1

By invoking the command tsc in this manner, you will consistently obtain a JavaScript file containing runtime code. The extension .d.ts is reserved for TypeScript declarations, so your intended outcome will not be achieved through this approach.

If your goal is to create a single declaration file (or any declaration files at all), utilizing the outFile option is not the way to go. Instead, you should compile all of your code into multiple .d.ts files using the standard tsc command, followed by employing a tool such as api-extractor to merge these individual files into one combined .d.ts file.

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

Can a Typescript class type be defined without explicitly creating a JavaScript class?

I am exploring the idea of creating a specific class type for classes that possess certain properties. For example: class Cat { name = 'cat'; } class Dog { name = 'dog'; } type Animal = ???; function foo(AnimalClass: Animal) { ...

The click event fails to provide $event upon being clicked

Within my HTML structure in an angular 7 application, I have the following setup: My goal is to trigger the GetContent() function when any text inside the div is clicked. Strangely, when clicking on the actual text, $event captures "Liquidity" correctly. ...

Iterating using a for loop within different functions

I am facing an issue with this project. I am planning to create a function that calculates from two different `for()` loops. The reason behind having 2 separate functions for calculation is because the data used in the calculations are fetched from differe ...

Using a PHP variable to trigger the jQuery .show() function

I'm attempting to trigger jQuery .show() events based on PHP variables. Below is my PHP code (retrieved from a form submission on another page): $last_pic_displayed = trim($_POST["last_pic_displayed"]); if (strlen($last_pic_displayed) <= ...

Learn how to effectively declare data as global within Angular2 or Typescript

I am facing an issue with fetching the id inside the Apiservice despite being able to get it in the console. Can anyone provide assistance on how to solve this problem? TS: deleteProduct(index,product) { var token = this.auth.getAccessTokenId(); ...

Load data from a MySQL Database into a DataTable

I am currently in the process of developing a CRUD application. With a large dataset stored in a MySQL database, my intention is to utilize a JQuery DataTable instead of manually creating a table. However, the issue I am facing is that while the table appe ...

AJAX is not meeting my expectations

Is there an issue with this code? It's supposed to insert data into the database but I'm not getting any errors. I am new to using ajax, and I found this code which I modified slightly. I thought it would work, but it's not functioning as e ...

Tips for showing form data upon click without refreshing the webpage

Whenever I input data into the form and click on the calculate button, the result does not appear in the salary slip box at the bottom of the form. However, if I refresh the page and then click on the calculate button, the results are displayed correctly ...

ajax always returns the same value, even when the input value is different

Each time I click on a different value, the console.log keeps giving me the same value. view image description I have checked the HTML code and found that even though each value attribute is different, it still returns the first value of the attribute. vi ...

Error Message "Alexa.create is not a valid function" encountered while using the Alexa HTML Web API on the Echo Show 10

Here is the HTML code for my custom Alexa Skill. <head> <script src="https://cdn.myalexaskills.com/latest/alexa-html.js"> </script> </head> <body> var alexaClient; Alexa.create({version: '1.0'}) .t ...

Configuring bitfinex-api-node with Node.js to efficiently handle data from the websocket connection

Apologies for the vague title of this question, as I am not well-versed in programming and even less so in node.js My goal is simple: I aim to utilize the bitfinex-api-node package (a node.js wrapper for the bitfinex cryptocurrency exchange) that I instal ...

Verifying email addresses through JavaScript and an activation process

I am in the process of implementing email confirmation/verification for my Login & Registration feature. I came across Activator on github, which claims to be a straightforward solution for managing user activation and password reset in nodejs apps (http ...

Using the --prod flag in Ionic 3 app on Android 7 results in the Keyboard not being displayed

After running the command ionic cordova run android --device, everything functions properly. However, when attempting the same command with the --prod flag, the input click fails to display the keyboard despite implementing the (onFocus) attribute in the & ...

It’s not possible for Typescript to reach an exported function in a different module

Having trouble referencing and using exported methods from another module. I keep getting an error that says 'There is no exported member in SecondModule'. module FirstModule{ export class someClass{ constructor(method: SecondModule ...

What is the most effective way to send a list of objects to a Controller

https://i.stack.imgur.com/oyi5v.png This form is for billing purposes. You can add the item name, quantity, and price multiple times to calculate the total amount. Once you click on submit, all the included items along with other parameters like bill nu ...

Ensure redirect is delayed until async data is fetched

Having come from the Angular world, I found it really easy and convenient to resolve data for routes. However, now that I'm using React, I'm unsure about how to achieve the same functionality. I would like to add an async data loader for my rout ...

Every time I enter npm start in the terminal, I consistently encounter this error

After developing a simple web app and posting it on my repository, I started encountering these persistent errors. npm ERR! code ELIFECYCLE – David 1 hour ago npm ERR! syscall spawn C:\Windows\system32\cmd.exe;C:\Users'usernam ...

Issue with Jquery Crop: image not updating when using cropper

Here is the code I'm working with: <link rel="stylesheet" href="style.css"> <script src="/static/js/jquery/2.1.4/jquery.min.js"></script> <script src="http://fengyuanchen.github.io/cropper/js/cropper.min.js"></script> &l ...

Entering the appropriate value into an object's property accurately

I am currently facing an issue with typing the value needed to be inserted into an object's property. Please refer below. interface SliceStateType { TrptLimit: number; TrptOffset: number; someString: string; someBool:boolean; } inter ...

Tips for obtaining validation errors on input elements in React when the input field is of type "file"

Currently, I am utilizing Material UI to cover the input component with icons. However, I have encountered an issue where there is an input element hidden and as a result, validation errors are not being displayed. The library I am using for validation i ...