Question

我有一个具有联合类型的接口，当我尝试访问该值时，它给我错误。

这是我的界面：

interface DataItemI{
  sys_id:string;
  name:string;
  parent:string|{value:string}
}

，数据设置为：

const dataList:DataItemI[]=[
    {
        sys_id:'c1',
        name:'p1-c1',
        parent:{  value:'p1'}
    },
    {
        sys_id:'p1',
        name:'p1',
        parent:''
    },
    {
        sys_id:'c2',
        name:'p1-c1',
        parent:{  value:'p1'}
    },
    {
        sys_id:'sc1',
        name:'p1-c1-sc1',
        parent:{  value:'c1'}
    },
    {
        sys_id:'p2',
        name:'p2',
        parent:''
    },
    {
        sys_id:'p2c1',
        name:'p2-c1',
        parent:{  value:'p2'}
    },
];

现在我尝试遍历数组并获取父值（如果存在），否则默认值为root

dataList.forEach(dataItem=>{
key=dataItem?.parent?.value || 'root';
  console.log(key); 
});

但是我得到了错误：

 Property 'value' does not exist on type '"" | { value: string; }'.
      Property 'value' does not exist on type '""'.
    
    58   key=dataItem?.parent?.value || 'root';
                               ~~~~~

Answer 1

这是因为parent可以是string或{ value: string }，并且string没有属性value。您需要先优化parent的类型（使用类型防护），然后才能访问value属性：

const parent = dataItem.parent;
const key = (typeof parent === 'string' ? parent : parent.value) || 'root';

typeof parent === 'string'是type guard。

Playground

打字稿联合：属性“值”在类型“””上不存在

1 个答案: