![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
#TypeScript类型体操
Q: 如何使用 filter 过滤数组，且返回正确的类型
A: filter 函数配置 is
例如（下面的例子同时使用了 TS 4.0 引入的 labeled tuple）
```typescript
// 返回一个元素的所有子元素的 offsetLeft 与 clientWidth
const childNodes = document.getElementById('xxx');
const childWidths = Array.from(childNodes || [])
.filter((item): item is HTMLElement => item instanceof HTMLElement)
.map((item) => [item.offsetLeft, item.clientWidth] as [offsetLeft: number, clientWidth: number]);
```
Q: 如何使用 filter 过滤数组，且返回正确的类型
A: filter 函数配置 is
例如（下面的例子同时使用了 TS 4.0 引入的 labeled tuple）
```typescript
// 返回一个元素的所有子元素的 offsetLeft 与 clientWidth
const childNodes = document.getElementById('xxx');
const childWidths = Array.from(childNodes || [])
.filter((item): item is HTMLElement => item instanceof HTMLElement)
.map((item) => [item.offsetLeft, item.clientWidth] as [offsetLeft: number, clientWidth: number]);
```
展开
4
2