Typescript to Javascript export

Question

I have a sample typescript objects as

declare const S3 = "https://s3.amazonaws.com/xxx/icons";
declare const SVG = "svg-file-icons";

declare interface MyIcons {
  "image/jpeg": string;
  "image/jpg": string;
}

export const FILE_ICONS_SVG: MyIcons = {
  "image/jpeg": `${S3}/${SVG}/jpg.svg`,
  "image/jpg": `${S3}/${SVG}/jpg.svg`
};

I am declaring this object in a share NPM Package to maintain consistency in all my projects. But TSC compilation gives me something like this.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FILE_ICONS_SVG = {
    "image/jpeg": `${S3}/${SVG}/jpg.svg`,
    "image/jpg": `${S3}/${SVG}/jpg.svg`
};

As it is evident that S3 and SVG are not defined in the compiled js file and thus gives errors on usage.

How can this be fixed??

Answer 1

Using declare does not really "declare" something.

declare is only used to tell the type-system that something with the declared name and type exists.

If you want to define a constant that should exist outside of the type-system, aka exist at runtime, you have to remove the declare keyword.

declare'd things do not have any impact on the runtime

Why does declare exist?

If you think about how the web works, you have a html file. In that html you can include scripts. Those scripts may be completely independent from one another, but also use stuff from other scripts.

So if you have one file that attaches something to the window for example in one file, and have another file that then uses this object, the typescript type-system has no way of knowing that that object exists, so you can tell the type-system of its existence by using declare

---

So it should be

const S3 = "https://s3.amazonaws.com/xxx/icons";
const SVG = "svg-file-icons";