Typescript Error : Declaring a parameter as a union of interfaces. Instead of picking one of the choices, it picks all of them

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 意味着您可以使用任何接口。那么，为什么它在函数 func 中不起作用？我得到的错误是：

Property 'textData' does not exist on type 'InputField | InfoField'. Property 'textData' does not exist on type 'InputField'. Property 'inputField' does not exist on type 'InputField | InfoField'. Property 'inputField' does not exist on type 'InputField'.

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

函数参数值将自动作为两个选择之一。

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

Answer 1

问题是你的两种类型都有 isText: boolean，所以它们中的任何一个都可以有 true 或 false，所以 if (Field.isText) 不会变窄联合类型。

您需要将 isText 的类型声明为文字 true 或 false 才能创建 discriminated union:

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

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

Playground link

旁注：playground link 表明使用 Field.textData 可以适应变化。使用 Field.inputField 仍然不起作用，因为两个联合类型都没有一个名为 inputField 的属性。你的意思可能是 fields.

Typescript Error : Declaring a parameter as a union of interfaces. Instead of picking one of the choices, it picks all of them

Typescript Error : Declaring a parameter as a union of interfaces. Instead of picking one of the choices, it picks all of them

interface

function-parameter

typescript