在TypeScript中建模DOM子树

Question

我怎样才能编写一个类型安全的函数来接受（例如）HTMLFormElement个HTMLInputElement个孩子，其中一个是number类型，另一个是{{1}和可选的？

我不知道这是否可行，但它对编写任何DOM操作函数非常有用。无论哪种方式，您将采取哪些其他方法来实现上述功能？

Answer 1

您尝试静态验证运行时行为，这是不可能的。

换句话说，您正在尝试编写一个函数，该函数应该在编译时确定dom的状态，这在您实际运行代码之前是未知的。

如果类型很重要，你可以编写一个接受表单和两个输入的函数，并在运行时进行一些额外的验证。

function myBehaviour(
    form: HTMLFormElement,
    inputNumber: HTMLInputElement,
    optionalText: HTMLInputElement
) {
    if (inputNumber.type != 'number') throw new Error(...);
    if (optionalText.type == 'text' && !optionalText.required) throw new Error(...);
}

如果我要为应用程序编写这种代码，我会有条件地在应用程序的开发/测试版本中启用这些断言，并从生产中省略它们。