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

Question

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

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

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

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

代码示例，链接here：

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

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

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

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

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

Answer 1

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

代码可见here:

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

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

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

因此，您在 TypeScript 中有更多代码，但最终代码更小，并且通过 Show Usage per Enum Item for DataSet1Field 我将看到它在代码中使用的所有位置。

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

希望对你有帮助。