對象解構中的類型

Question

這個

const { foo: IFoo[] } = bar;

和這個

const { foo: Array<IFoo> } = bar;

會合理地導致錯誤。

和這個

const { foo: TFoo } = bar;

只會破壞TFoo屬性。

如何為解構對象屬性指定類型？

Answer 1

事實證明，可以在:之后為整個解構模式指定類型：

const {foo}: {foo: IFoo[]} = bar;

這實際上並不比普通的舊

const foo: IFoo[] = bar.foo;

Answer 2

我顯然有點遲到了，但是：

interface User {
  name: string;
  age: number;
}

const obj: any = { name: 'Johnny', age: 25 };
const { name, age }: User = obj;

屬性name和age的類型應分別正確推斷為string和number 。

Answer 3

NextJS 打字稿示例

我有這樣的場景：

const { _id } = req.query
if (_id.substr(2)) { 🚫
 ...
}

其中req.query的類型如下

type ParsedUrlQuery = { [key: string]: string | string[] }

所以這樣做有效：

const { _id } = req.query as { _id: string }
if (_id.substr(2)) { 🆗
 ...
}

具有諷刺意味的是，Typescript 是正確的，我應該這樣做：

const _id = String(req.query._id) ✅ 

Answer 4

我自己的問題的后續行動。

不需要為對象屬性指定類型，因為它們是從解構對象中推斷出來的。

考慮到bar輸入正確，將推斷foo類型：

const bar = { foo: [fooValue], ... }; // bar type is { foo: IFoo[], ... }
...
const { foo } = bar; // foo type is IFoo[]

即使bar沒有正確輸入（ any或unknown ），也可以斷言它的類型：

const { foo } = bar as { foo: IFoo[] }; // foo type is IFoo[]

Answer 5

如果你想析構和重命名

const {foo: food}: {foo: IFoo[]} = bar;

花了我一秒鍾才把上面的東西弄好