Typescript 错误：将参数声明为接口的联合。 它不是选择一个选项，而是选择所有选项

Question

这是我要写的代码

interface InputField{
    formHeading:string,
    isText:boolean,
    fields:any[]
}

interface InfoField{
    formHeading:string,
    isText:boolean,
    textData:string[]
}

let testInfoField: InputField|InfoField;

testInfoField = {
    formHeading : "hello",
    isText : true,
    textData : ['hi', 'hello']
};

console.log(testInfoField.textData)
// Works fine here

let testInputField: InputField|InfoField;
testInputField = {
    formHeading : "Hi",
    isText : false,
    fields: [1,2,3,4]
}

console.log(testInputField.fields);
// Works fine here



const func = (Field:InfoField|InputField) =>{
    if(Field.isText){
        console.log("TextField text", Field.textData);
        // Error in using Field.textData now

    }
    else{
        console.log("Input Field", Field.fields);
        // Error in using Field.inputField now
    }
}

因此，根据我在 Typescript 中所知道的，使用 union 意味着您可以使用任何接口。 那么，为什么它在 function func中不起作用？ 我得到的错误是：

'InputField | 类型不存在属性'textData' 信息字段”。 “InputField”类型上不存在属性“textData”。 类型“InputField”上不存在属性“inputField”| 信息字段”。 类型“InputField”上不存在属性“inputField”。

谁能告诉我这是什么原因？ 如果我使用的是 textData，那么这意味着我想使用 InfoField 接口，而不是 InputField。 如果 InputField 上不存在它应该没关系。

function 参数值将自动成为两个选项之一。

为什么当用作参数时，它要求组合 object？ 就像它创建了一个大的 object，由 InfoField 和 InputField 的所有值组成。

Answer 1

问题是您的两种类型都有isText: boolean ，因此它们中的任何一个都可能具有true或false ，因此if (Field.isText)不会缩小联合类型。

您需要将isText的类型声明为文字true或false以创建可区分的 union ：

interface InputField{
    formHeading:string,
    isText:false, // ***
    fields:any[]
}

interface InfoField{
    formHeading:string,
    isText:true,  // ***
    textData:string[]
}

游乐场链接

---

旁注：操场链接显示使用Field.textData与更改一起工作。 使用Field.inputField仍然不起作用，因为这两种联合类型都没有名为inputField的属性。 您可能是指fields 。