时间戳

首页 > 解决方案 > Typescript 到 Javascript 导出

javascript - Typescript 到 Javascript 导出

问题描述

我有一个示例打字稿对象

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`
};

我在一个共享 NPM 包中声明这个对象，以保持我所有项目的一致性。但是 TSC 编译给了我这样的东西。

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

很明显，S3和SVG没有在编译的 js 文件中定义，因此在使用时会出错。

这个怎么解决？？

标签： javascripttypescriptecmascript-6

解决方案

使用declare并没有真正“声明”某些东西。

declare仅用于告诉类型系统具有声明的名称和类型的东西存在。

如果你想定义一个应该存在于类型系统之外的常量，也就是在运行时存在，你必须删除 declare 关键字。

declare'd 事情对运行时没有任何影响

为什么declare存在？

如果您考虑 Web 的工作原理，那么您有一个 html 文件。在该 html 中，您可以包含脚本。这些脚本可能彼此完全独立，但也使用来自其他脚本的东西。

因此，如果您有一个文件将某些内容附加到window例如一个文件中，并且有另一个文件然后使用该对象，则打字稿类型系统无法知道该对象是否存在，因此您可以告诉类型系统通过使用它的存在declare

所以应该是

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

推荐阅读