TypeScript：没有接口的函数

Question

是否允许在没有任何界面的情况下使用功能道具？

我有一个带有属性的函数：

from - HTML 元素

to - HTML 元素

coords - 数组 [2, 2]

export const adjustElements = ({ from, to, coords }) => {
    let to_rect = to.getBoundingClientRect(),
        width = to_rect.width * ((coords[0] - 1) * 0.5),
        height = to_rect.height * ((coords[1] - 1) * 0.5);

    from.style.top = (to_rect.top + height) + "px";
    from.style.left = (to_rect.left + width) + "px";
}

但是当我运行代码时出现以下错误：

Binding element 'from' implicitly has an 'any' type.

Binding element 'to' implicitly has an 'any' type.

Binding element 'coords' implicitly has an 'any' type.

之所以会这样，是因为我没有给函数添加任何接口，但问题是我有很多这样的函数，但是参数不同，所以给大家写一个新的接口会很疯狂......有没有一种方法可以让 typescript 不再需要每个函数的接口？

Answer 1

由于编译器无法推断从函数参数解构的from、to 和coords 变量的类型，它回退到推断the any type，这是故意不安全的，您可以这样做几乎没有进一步错误的任何东西。假设您启用了the --strict suite of compiler features（并且您可能应该启用）或者甚至只是启用了the --noImplicitAny compiler option，这种自动回退到any 将生成一个警告，以便您完全意识到正在发生类型安全的损失。

---

正确的做法是annotate the function parameter 告诉编译器它将是什么类型。如果您想要使用any 并且只是使警告静音，您可以明确地这样做：

export const adjustElements = ({ from, to, coords }: any) => {
  let to_rect = to.getBoundingCleintRect(),
    width = to_rect.width * ((coords[0] - 1) * 0.5),
    height = to_rect.heigth * ((coords[1] - 1) * 0.5);

  from.style.top = (to_rect.top + height) + "px";
  from.style.left = (to_rect.left + width) + "px";
} // no error

但这允许对adjustElements 进行各种疯狂的调用，您可能希望看到编译器错误：

adjustElements("oopsie"); // no error

以及允许疯狂的实现；考虑到在上面的代码中，我完全拼错了getBoundingClientRect 和to_rect.height，但编译器未能捕捉到任何一个错误，因为to 和to_rect 都是any 类型，编译器不再担心你的问题了正在处理这些。

所以你不想这样做。

---

相反，您应该考虑函数参数必须是什么类型。您已经这样做了：from 和 to 属性应该是 HTMLElement，coords 属性应该是长度为 2 的 tuple，其中每个元素都是 number。

你可以为这个对象类型命名interface，但是如果你只打算使用一次，你可能不想麻烦给它一个明确的名字。在这种情况下，您可以使用 匿名 object type:

export const adjustElements = ({ from, to, coords }:
  { from: HTMLElement, to: HTMLElement, coords: [number, number] }
) => {
  let to_rect = to.getBoundingClientRect(),
    width = to_rect.width * ((coords[0] - 1) * 0.5),
    height = to_rect.height * ((coords[1] - 1) * 0.5);

  from.style.top = (to_rect.top + height) + "px";
  from.style.left = (to_rect.left + width) + "px";
}

现在这可以工作了，编译器会捕捉到拼写错误，它还会捕捉到对adjustElements() 的虚假调用：

adjustElements("oopsie"); // error
// Argument of type 'string' is not assignable to parameter of 
// type '{ from: HTMLElement; to: HTMLElement; coords: [number, number]; }

这是一个错误，因为你给了它一个 string 它期望你的匿名对象类型，而 string 是不合适的。

---

请注意，编译器也将以下内容视为虚假调用：

adjustElements({
  from: document.querySelector(".wheel-pointer"),
//~~~~ <-- Type 'HTMLElement | null' is not assignable to type 'HTMLElement'
  to: document.querySelector(".wheel"),
//~~ <-- Type 'HTMLElement | null' is not assignable to type 'HTMLElement'
  coords: [2, 1]
}) // error!

错误告诉您确切的问题：from 和to 属性很可能是null，因为document.querySelector() 有时会返回null。编译器不知道文档中存在"wheel-pointer" 或"wheel" 类的任何内容，因此这是一个错误。如果您想拨打这样的电话，您需要检查这些不是null，或者断言它们不是。检查可能如下所示（使用truthiness narrowing）：

const wheelPointerElement = document.querySelector(".wheel-pointer");
if (!wheelPointerElement) throw new Error("OH NO");
const wheelElement = document.querySelector(".wheel");
if (!wheelElement) throw new Error("WHY ME");

adjustElements({
  from: wheelPointerElement,
  to: wheelElement,
  coords: [2, 1]
}) // okay

虽然断言可能如下所示：（使用the non-null assertion operator !）：

adjustElements({
  from: document.querySelector(".wheel-pointer")!,
  to: document.querySelector(".wheel")!,
  coords: [2, 1]
}) // okay

解释检查和断言之间的区别、各自的优缺点以及执行它们的不同方法与原始问题相去甚远。只要知道这些错误情况首先是 TypeScript 的一部分。在您的原始 JavaScript 代码中，您必须等到运行时才能在 adjustElements(null, null, [2, 1]) 上看到错误。 TypeScript 会提前警告您在运行时可能会发生类似的事情，并让您有机会解决它。

Playground link to code

Answer 2

编辑： 正如 jcalz 在评论中指出的那样，我给出的答案不是有效的 TypeScript。我错过了你传递一个包裹在 {} 中的参数，而不是传递三个单独的参数。

---

你需要告诉 TypeScript 你的函数参数的类型是什么。如果你不这样做，并且 TypeScript 无法以某种方式判断（例如，如果它们有默认值），那么它将推断它们的类型为 any。但是默认编译器设置会阻止implicit any 类型。

你不需要使用接口，你可以这样做：

export const adjustElements = ({ from: HTMLElement, to: HTMLElement, coords: [number, number] }) => {