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

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';
                               ~~~~~

标签： javascripttypescripttypes

Answer 1

那是因为parentcan be stringor { value: string }and stringdoesn't have property value。您需要先细化parent的类型（使用类型保护），然后才能访问value属性：

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

typeof parent === 'string'是类型守卫。

操场