不理解带有奇怪对象类型作为参数的 TypeScript 函数签名

Question

我有以下函数签名:

(JSX attribute) onScroll: ({ scrollOffset, scrollUpdateWasRequested }: {
scrollDirection: string;
scrollOffset: number;
scrollUpdateWasRequested: boolean;
}) => void

我就是不明白。我读到的是"onScroll是一个函数，不返回任何东西(void)，并采用奇怪的对象类型混合作为参数。有人能给我解释一下这个奇怪的对象类型组合吗?

函数签名来自react- virtualized AutoSizer的onScroll prop。

Answer 1

使用参数解构赋值。你可以在JavaScript中编写这样一个函数:

function foo({ x, y }) {
console.log(x.toUpperCase(), y.toFixed(2));
}
foo({ x: "hello", y: Math.PI }) // HELLO, 3.14

这将(匿名)参数解包为函数体中的x和y变量。TypeScript允许你通过将{ x, y }作为参数的名称来强类型地输入它，你可以像注释常规命名参数一样对其进行注释:

function foo({ x, y }: { x: string, y: number }) {
console.log(x.toUpperCase(), y.toFixed(2));
}

还要注意，您不需要解压缩传入参数中的每个属性。如果出于某种原因，您希望强制调用者在参数中包含您不使用的属性，您仍然可以通过为带注释的类型提供该属性来实现:

function bar({ x, y }: { x: string, y: number, z: boolean }) {
console.log(x.toUpperCase(), y.toFixed(2));
}
bar({ x: "hello", y: Math.PI, z: true }) // HELLO, 3.14

因此，bar()需要一个具有特定类型的x、y和z属性的参数，但函数实现实际上并不关心z。

---

所以你的onScroll函数等价于下面的声明:

declare const onScroll: (param: OnScrollParam) => void
type OnScrollParam = {
scrollDirection: string;
scrollOffset: number;
scrollUpdateWasRequested: boolean;
}

意味着onScroll()接受OnScrollParam类型的单个参数，这需要scrollDirection属性，尽管事实上显然实现没有使用它:

onScroll({
scrollDirection: "",
scrollOffset: 1,
scrollUpdateWasRequested: false
}); // okay
onScroll({
scrollOffset: 1,
scrollUpdateWasRequested: false
}); // error! Property 'scrollDirection' is missing 

---

Playground链接到代码