TypeScript generates .d.ts file with defines declarations instead of export declarations

Question

I'm compiling my code with tsc --p typescript/tsconfig.json --outFile "dist/umd/index.d.ts".

My tsconfig.json file is:

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

But the generated index.d.ts file looks like the following:

var __spreadArrays = (this && this.__spreadArrays) || function () {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    for (var r = Array(s), k = 0, i = 0; i < il; i++)
        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
            r[k] = a[j];
    return r;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
define("enums", ["require", "exports"], function (require, exports) {
    "use strict";
    exports.__esModule = true;
    exports.top = 'top';
    exports.bottom = 'bottom';
    exports.right = 'right';
    exports.left = 'left';
    exports.auto = 'auto';
    exports.basePlacements = [exports.top, exports.bottom, exports.right, exports.left];
    exports.start = 'start';
    exports.end = 'end';
    exports.center = 'center';
    exports.edges = 'edges';
    exports.surfaces = 'surfaces';
    exports.clippingParent = 'clippingParent';
    exports.viewport = 'viewport';
    exports.placements = exports.basePlacements.reduce(function (acc, placement) { return acc.concat([placement, placement + "-" + exports.start, placement + "-" + exports.end]); }, []);
    // modifiers that need to read the DOM
    exports.beforeRead = 'beforeRead';
    exports.read = 'read';
    exports.afterRead = 'afterRead';
    // pure-logic modifiers
    exports.beforeMain = 'beforeMain';
    exports.main = 'main';
    exports.afterMain = 'afterMain';
    // modifier with the purpose to write to the DOM (or write into a framework state)
    exports.beforeWrite = 'beforeWrite';
    exports.write = 'write';
    exports.afterWrite = 'afterWrite';
    exports.modifierPhases = [exports.beforeRead, exports.read, exports.afterRead, exports.beforeMain, exports.main, exports.afterMain, exports.beforeWrite, exports.write, exports.afterWrite];
});
define("types", ["require", "exports"], function (require, exports) {
    "use strict";
    exports.__esModule = true;
    exports["default"] = null;
});
define("dom-utils/getBoundingClientRect", ["require", "exports"], function (require, exports) {
    "use strict";
    exports.__esModule = true;
    exports["default"] = (function (element) {
        var rect = JSON.parse(JSON.stringify(element.getBoundingClientRect()));
        rect.x = rect.left;
        rect.y = rect.top;
        return rect;
    });
});

When I try to use it, TypeScript complains about:

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

1 define("enums", ["require", "exports"], function (require, exports) {
  ~~~~~~

and:

dist/umd/index.d.ts:1:1 - error TS2304: Cannot find name 'define'.

1 define("enums", ["require", "exports"], function (require, exports) {
  ~~~~~~

and:

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

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

Why TypeScript generates a file that is then not working with TypeScript itself? Why is it using define instead of export?

(if it can help, here you find the whole code https://github.com/popperjs/popper.js/pull/849)

Your tsconfig.json has "module": "amd" in it. If you want to use ESM, you need to use "module": "ES2015" (or the older name "module": "ES6"). See: Compiler Options But you've said in a comment on my deleted answer that you can't use that with --outFile, so this clearly either isn't right at all or isn't the full answer... — T.J. Crowder
– T.J. Crowder, Commented Dec 8, 2019 at 16:50

phry · Accepted Answer · 2019-12-08 17:39:52Z

1

Calling tsc like that will always give you a JavaScript file with runtime code. .d.ts is the file extension for a TypeScript declaration, so you're definitely not achieving what you want here.

If you want to have one single declaration file (or declaration files at all), you cannot use outFile. Instead, you have to normally compile all your code into multiple .d.ts files by calling tsc normally and then use a tool like api-extractor to generate one combined .d.ts file out of all those.

answered Dec 8, 2019 at 17:39

phry

44.9k7 gold badges96 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript generates .d.ts file with defines declarations instead of export declarations

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related