使用 JavaScript 的动态数组键修复 TypeScript 的“Any”类型错误

解决动态数组键中的 TypeScript“任何”类型错误

解决方案 1：使用字符串模板文字类型进行动态键访问的 TypeScript

interface HeatsTable {
  heat_id: string;
  start: number;
  faults_1: string[];
  faults_2: string[];
  faults_3: string[];
  faults_4: string[];
}

function getFaultsValue(heatData: HeatsTable, runningId: number): string[] {
  const key = `faults_${runningId}` as keyof HeatsTable;
  return heatData[key] || [];
}

// Usage Example
const heatData: HeatsTable = {
  heat_id: "uuid-value",
  start: 10,
  faults_1: ["error1"],
  faults_2: ["error2"],
  faults_3: ["error3"],
  faults_4: ["error4"],
};
const faultValue = getFaultsValue(heatData, 2); // returns ["error2"]

替代解决方案：带有索引签名的类型安全条件对象访问

使用索引签名支持动态属性访问的 TypeScript 解决方案

interface HeatsTable {
  heat_id: string;
  start: number;
  [key: string]: any; // Index signature for dynamic access
}

const heatData: HeatsTable = {
  heat_id: "uuid-value",
  start: 10,
  faults_1: ["error1"],
  faults_2: ["error2"],
  faults_3: ["error3"],
  faults_4: ["error4"],
};

function getFault(heatData: HeatsTable, runningId: number): string[] | undefined {
  const key = `faults_${runningId}`;
  return Array.isArray(heatData[key]) ? heatData[key] : undefined;
}

// Testing the function
console.log(getFault(heatData, 1)); // Outputs: ["error1"]
console.log(getFault(heatData, 5)); // Outputs: undefined

解决方案 3：用于强类型检查和错误预防的 TypeScript 实用程序类型

TypeScript 解决方案使用实用程序类型来创建访问动态键的类型安全方式

type FaultKeys = "faults_1" | "faults_2" | "faults_3" | "faults_4";

interface HeatsTable {
  heat_id: string;
  start: number;
  [key in FaultKeys]: string[];
}

function getSafeFault(heatData: HeatsTable, runningId: 1 | 2 | 3 | 4): string[] {
  const key = `faults_${runningId}` as FaultKeys;
  return heatData[key];
}

// Testing Example
const heatData: HeatsTable = {
  heat_id: "uuid-value",
  start: 10,
  faults_1: ["error1"],
  faults_2: ["error2"],
  faults_3: ["error3"],
  faults_4: ["error4"],
};

console.log(getSafeFault(heatData, 3)); // Outputs: ["error3"]

类型安全性和一致性的单元测试

Jest 单元测试以验证每个动态密钥访问解决方案的正确性

import { getFaultsValue, getFault, getSafeFault } from "./heatDataFunctions";

describe("HeatsTable dynamic key access", () => {
  const heatData = {
    heat_id: "uuid-value",
    start: 10,
    faults_1: ["error1"],
    faults_2: ["error2"],
    faults_3: ["error3"],
    faults_4: ["error4"],
  };

  test("getFaultsValue retrieves correct fault by runningId", () => {
    expect(getFaultsValue(heatData, 1)).toEqual(["error1"]);
  });

  test("getFault returns undefined for non-existent key", () => {
    expect(getFault(heatData, 5)).toBeUndefined();
  });

  test("getSafeFault throws error for out-of-range keys", () => {
    expect(() => getSafeFault(heatData, 5 as any)).toThrow();
  });
});

有关 TypeScript 动态键的常见问题

1. TypeScript 中动态键的主要问题是什么？
2. TypeScript 中动态键的主要问题是它们经常导致“任何”类型错误。由于 TypeScript 无法在编译时验证类型中是否存在动态创建的键，因此它会引发错误以防止可能出现的问题。
3. 我该如何使用 keyof 处理动态键？
4. 这 keyof 运算符可用于断言动态密钥是接口的一部分。通过使用以下命令铸造密钥 as keyof Interface，TypeScript 将其视为有效的接口属性。
5. 什么是索引签名？它有何帮助？
6. 像这样的索引签名 [key: string]: any 允许您使用任意字符串作为界面中的属性键。这有助于绕过类型错误，但也减少了严格键入，因此应谨慎使用。
7. 为什么可能 Array.isArray() 在这种情况下有用吗？
8. Array.isArray() 可以检查动态访问的属性是否是数组类型。这对于条件处理很有帮助，特别是在处理像这样的结构时 HeatsTable 其中属性可能是数组。
9. 什么是实用程序类型，它们如何帮助动态密钥？
10. 实用程序类型与联合类型一样，允许您定义一组允许的键值。例如，使用 “faults_1” | “faults_2” 作为一种类型，确保只能动态访问那些键，从而提高类型安全性。
11. 您能给出动态键映射类型的示例吗？
12. 使用 19 号 创建映射类型，迭代联合中的每个键以强制属性类型一致。这种方法确保任何动态生成的密钥都遵循指定的结构。
13. 对于动态密钥，建议采用什么测试方法？
14. 使用 Jest 或类似库进行单元测试允许您检查具有不同输入的动态键功能。功能类似于 expect 和 toEqual 可以验证正确的行为并捕获潜在的错误。
15. 怎么样 22 号 帮助组织测试？
16. 22 号 对相关测试进行分组，例如动态关键功能的测试，提高可读性并使管理复杂的测试套件变得更容易，尤其是在较大的代码库中。
17. 使用动态键时是否可以防止运行时错误？
18. 是的，通过使用 TypeScript 的强类型工具，例如 keyof、映射类型和实用程序类型，您可以在编译时捕获许多错误，确保动态键符合预期的结构。
19. 安全访问多个动态密钥的最佳方法是什么？
20. 使用索引签名、联合类型和实用程序类型的组合可以提供灵活性，同时保持类型安全。如果您混合使用已知密钥和动态生成的密钥，则此方法效果很好。
21. 如何 as keyof 断言有助于访问动态键吗？
22. 当你使用 as keyof，TypeScript 将动态键视为接口的有效成员，这有助于避免“任何”类型错误，同时保持严格的类型。

关于类型安全动态键的最终想法

在 TypeScript 中使用动态键需要在灵活性和类型安全性之间取得平衡。索引签名， 密钥 断言和实用程序类型可以提供可靠的选项，尤其是在较大的项目中。每种方法都根据您需要访问密钥的严格程度或灵活程度提供解决方案。

对于必须动态访问数据的代码，这些方法有助于避免“任何”类型问题，同时保持数据结构完整。彻底测试这些功能还可以增加安全性和可靠性，使开发人员能够更自信、更高效地扩展应用程序。 🎉