时间戳

首页 > 解决方案 > 如何编写 TypeScript 有意义的接口属性名称而不支付 JS 文件大小

typescript - 如何编写 TypeScript 有意义的接口属性名称而不支付 JS 文件大小

问题描述

上个月，我在 TypeScript 中为产品构建了一个通信层，我注意到接口中有很多属性，我将在我的代码中使用这些属性。属性的名称可以是 2-4 个字长，有时甚至 5-6 个字用于简单的解释，不幸的是，当我转译和缩小到最终 JS 时，我注意到缩小器，丑陋的，不能缩小那些的大小属性，因为它们是对象级别的属性，而不是函数级别的变量。

从技术上讲，我想要这些要点：

  1. 我不想写短名称，因为大小问题会导致 JS 文件大小爆炸。
  2. 我希望其他开发人员不限制调用具有特定长度名称的属性名称。
  3. 使最终名称类似于a1或b1在最终 JS 中，但开发人员会看到NextRecommendationsBatch.
  4. 知道这个参数在哪里使用将非常简单。
  5. 它将保持对所有级别和自动完成的强类型检查。
  6. 希望所有长名称都会在编译、转译、时间中消失。

我知道这些问题很多，但今天我们需要更小的 JS 文件。我会很高兴提出建议。

代码示例，链接在这里：

interface DataSet1 {
    numberOfItems:number;
    currentBatchIndexFetching:number;
    nextBatchIndexFetching:number;
}

const _data:DataSet1 = {
    currentBatchIndexFetching: 1,
    nextBatchIndexFetching: 2,
    numberOfItems: 10,
};

您可以在编辑器右侧面板上看到最终代码，您会看到属性名称存在问题。

const _data = {
    currentBatchIndexFetching: 1,
    nextBatchIndexFetching: 2,
    numberOfItems: 10,
};

我找到了一个我想分享答案的人。

标签： typescriptminifynaming

解决方案

我找到了一种增加代码大小并给出我上面写的所有要点的方法。我知道它看起来有点吓人，但它可以极大地减少你的代码大小。

代码可以在这里看到：

const enum DataSet1Field {
    NumberOfItems = "ni",
    CurrentBatchIndexFetching = "cbi",
    NextBatchIndexFetching = "nbi",
}

interface DataSet1 {
    [DataSet1Field.NumberOfItems]:number;
    [DataSet1Field.CurrentBatchIndexFetching]:number;
    [DataSet1Field.NextBatchIndexFetching]:number;
}

const _data:DataSet1 = {
    [DataSet1Field.CurrentBatchIndexFetching]: 1,
    [DataSet1Field.NextBatchIndexFetching]: 2,
    [DataSet1Field.NumberOfItems]: 10,
};

正如我们在这里看到的，该解决方案将为您提供更小的编译代码（在删除代码注释之后）。

const _data = {
    ["cbi"]: 1,
    ["nbi"]: 2,
    ["ni"]: 10,
};

因此，您在 TypeScript 中有更多代码，但最终代码更小，并且通过显示每个枚举项的使用情况，DataSet1Field我将看到它在代码中使用的所有位置。

关于 IDE 的说明，Intellij-IDEA 通过理解更复杂的 TypeScript 代码会更好，并且会更好地自动完成。

我希望它有所帮助。

推荐阅读