如何在JavaScript中区分Microsoft Graph Toolkit人员选择器的选中用户与组

虽然IDynamicPerson接口没暴露专门区分用户/组的属性，但实际返回的对象会携带Graph API原生的额外属性，你可以通过这些特征来判断：

• 检查userPrincipalName属性：用户对象必然带有这个属性（格式多为xxx@domain.com），组对象不会有。
• 检查groupTypes属性：组对象会包含这个数组属性（比如["Unified"]代表Office 365组），用户对象无此属性。
• 通过@odata.type精准判断：Graph API返回的对象会带这个类型标识，用户对应#microsoft.graph.user，组对应#microsoft.graph.group。

给你两个实用的代码示例：

// 方法1：用userPrincipalName和groupTypes判断
document.querySelector('mgt-people-picker').addEventListener('selectionChanged', (e) => {
  const selectedItems = e.detail.selectedPeople;
  selectedItems.forEach(item => {
    if (item.userPrincipalName) {
      console.log('用户:', item.displayName);
    } else if (item.groupTypes) {
      console.log('组:', item.displayName);
    }
  });
});

// 方法2：用@odata.type精准判断（TypeScript需加类型断言）
document.querySelector('mgt-people-picker').addEventListener('selectionChanged', (e) => {
  const selectedItems = e.detail.selectedPeople;
  selectedItems.forEach(item => {
    const odataType = (item as any)['@odata.type'];
    switch(odataType) {
      case '#microsoft.graph.user':
        console.log('用户:', item.displayName);
        break;
      case '#microsoft.graph.group':
        console.log('组:', item.displayName);
        break;
    }
  });
});

内容的提问来源于stack exchange，提问作者Hugo