如何通过TypeScript类型系统访问MGT PeoplePicker的selectedPeople属性

在使用Microsoft Graph Toolkit的PeoplePicker组件时，selectionChanged回调的参数类型默认是Event，但event.target并不包含selectedPeople属性——这是因为EventTarget类型未定义该属性，而实际触发事件的目标元素是MGT的PeoplePickerElement自定义元素。以下是不绕过TypeScript类型检查的正确处理方式：

步骤1：导入正确的类型 #

首先导入MGT提供的PeoplePickerElement类型（对应组件的实际DOM元素），以及Person类型来明确选中人员的结构：

import * as React from 'react';
import { PeoplePicker, People, Person } from '@microsoft/mgt-react/dist/es6/spfx';
import { PeoplePickerElement } from '@microsoft/mgt-element';

步骤2：修正State的类型 #

将存储选中人员的State类型指定为Person[]，让类型系统更精准：

const [people, setPeople] = React.useState<Person[]>([]);

步骤3：安全访问selectedPeople #

有两种类型安全的方式来获取目标属性：

方式一：类型断言（适合确定目标类型的场景） #

直接将event.target断言为PeoplePickerElement类型，明确它包含selectedPeople属性：

const handleSelectionChanged = (event: Event): void => {
  const picker = event.target as PeoplePickerElement;
  setPeople(picker.selectedPeople);
};

方式二：类型守卫（更严谨的类型检查） #

通过自定义类型守卫验证目标元素的类型，避免潜在的类型错误：

// 自定义类型守卫，判断目标是否为PeoplePickerElement
const isPeoplePickerElement = (target: EventTarget | null): target is PeoplePickerElement => {
  return target !== null && 'selectedPeople' in target;
};

const handleSelectionChanged = (event: Event): void => {
  if (isPeoplePickerElement(event.target)) {
    setPeople(event.target.selectedPeople);
  }
};

这样就能在完全遵守TypeScript类型规则的前提下，正确获取选中的人员列表了。

内容的提问来源于stack exchange，提问作者mario.b