TypeScript类型不兼容错误排查：Field子类与Step类型匹配问题

代码实现 #

abstract class Field {
    abstract kind: "text" | "array" | "file"

    constructor(
        protected readonly _title: string,
        protected readonly _value?: string | null,
    ) {}

    get title() {
        return this._title
    }

    get value() {
        return this._value ?? "--"
    }
}

class TextField extends Field {
    get kind() {
        return "text" as const
    }
}

class Section {
    constructor(
        protected readonly _title: string,
        protected readonly _fields: Array<Field>,
    ) {}

    get title() {
        return this._title
    }

    get fields() {
        return this._fields.filter(Boolean)
    }
}

class PersonalInformationSection extends Section {
    constructor(firstName: string) {
        super("Personal information", [
            new TextField("First name", firstName),
        ])
    }
}

export type Step = {
    title: string
    sections: Array<{
        title: string
        fields: Array<
            | {
                  kind: "text"
                  title: string
                  value: string
              }
            | {
                  kind: "file"
                  value: string
              }
            | {
                  kind: "array"
                  items: Array<{
                      kind: "text"
                      title: string
                      value: string
                  }>
              }
        >
    }>
}


function DataViewer(_properties: {
    steps: Array<Step>
}) {
    return null
}

export function LeadsListItemViewContentLeadCompliance() {
    return DataViewer({
      steps: [
            {
                title: "Step 1: Authorized persons",

                sections: [
                    new PersonalInformationSection("firstName"),
                ],
            },
          
        ]
    })
}

类型错误信息 #

Type 'PersonalInformationSection' is not assignable to type '{ title: string; fields: ({ kind: "text"; title: string; value: string; } | { kind: "file"; value: string; } | { kind: "array"; items: { kind: "text"; title: string; value: string; }[]; })[]; }'.
  Types of property 'fields' are incompatible.
    Type 'Field[]' is not assignable to type '({ kind: "text"; title: string; value: string; } | { kind: "file"; value: string; } | { kind: "array"; items: { kind: "text"; title: string; value: string; }[]; })[]'.
      Type 'Field' is not assignable to type '{ kind: "text"; title: string; value: string; } | { kind: "file"; value: string; } | { kind: "array"; items: { kind: "text"; title: string; value: string; }[]; }'.
        Type 'Field' is not assignable to type '{ kind: "text"; title: string; value: string; }'.
          Types of property 'kind' are incompatible.
            Type '"text" | "array" | "file"' is not assignable to type '"text"'.
              Type '"array"' is not assignable to type '"text"'.

问题 #

请问该错误产生的原因是什么？如何进行修复？

更新内容 #

以下是包含两种字段类型的完整代码：

abstract class Field {
    abstract kind: "text" | "array" | "file"

    constructor(
        protected readonly _title: string,
        protected readonly _value?: string | null,
    ) {}

    get title() {
        return this._title
    }

    get value() {
        return this._value ?? "--"
    }
}

class TextField extends Field {
    get kind() {
        return "text" as const
    }
}

class FileField extends Field {
    get kind() {
        return "file" as const
    }
}

class Section {
    constructor(
        protected readonly _title: string,
        protected readonly _fields: Array<Field>,
    ) {}

    get title() {
        return this._title
    }

    get fields() {
        return this._fields.filter(Boolean)
    }
}

class PersonalInformationSection extends Section {
    constructor(firstName: string, documentUrl: string) {
        super("个人信息", [
            new TextField("姓名", firstName),
            new FileField("身份证明文件", documentUrl),
        ])
    }
}

export type Step = {
    title: string
    sections: Array<{
        title: string
        fields: Array<
            | {
                  kind: "text"
                  title: string
                  value: string
              }
            | {
                  kind: "file"
                  value: string
              }
            | {
                  kind: "array"
                  items: Array<{
                      kind: "text"
                      title: string
                      value: string
                  }>
              }
        >
    }>
}


function DataViewer(_properties: {
    steps: Array<Step>
}) {
    return null
}

export function LeadsListItemViewContentLeadCompliance() {
    return DataViewer({
      steps: [
            {
                title: "步骤1：授权人员",

                sections: [
                    new PersonalInformationSection("张三", "/docs/id-card.pdf"),
                ],
            },
          
        ]
    })
}

错误原因 #

1. 类型追踪失效：Section类的fields属性返回Field[]类型，TypeScript无法自动识别数组中Field子类（如TextField、FileField）的具体类型，只能将其视为父类Field，而Field的kind是"text" | "array" | "file"的联合类型，无法匹配Step中要求的每个字段类型的具体kind值。
2. 结构兼容性不足：父类Field的抽象定义与Step中字段的具体结构存在类型间隙，TypeScript无法确认Field子类的结构完全符合Step的字段要求。

修复方案 #

方案一：给Section添加泛型约束，保留字段具体类型

通过泛型让Section类追踪字段的实际类型，解决类型擦除问题：

abstract class Field {
    abstract kind: "text" | "array" | "file"

    constructor(
        protected readonly _title: string,
        protected readonly _value?: string | null,
    ) {}

    get title() {
        return this._title
    }

    get value() {
        return this._value ?? "--"
    }
}

class TextField extends Field {
    get kind() {
        return "text" as const
    }
}

class FileField extends Field {
    get kind() {
        return "file" as const
    }
}

// 泛型T约束为Field的子类型，保留字段具体类型
class Section<T extends Field = Field> {
    constructor(
        protected readonly _title: string,
        protected readonly _fields: Array<T>,
    ) {}

    get title() {
        return this._title
    }

    get fields() {
        return this._fields.filter(Boolean) as Array<T>
    }
}

// 指定当前Section的字段类型为TextField | FileField
class PersonalInformationSection extends Section<TextField | FileField> {
    constructor(firstName: string, documentUrl: string) {
        super("个人信息", [
            new TextField("姓名", firstName),
            new FileField("身份证明文件", documentUrl),
        ])
    }
}

export type Step = {
    title: string
    sections: Array<{
        title: string
        fields: Array<
            | { kind: "text"; title: string; value: string }
            | { kind: "file"; value: string }
            | { kind: "array"; items: Array<{ kind: "text"; title: string; value: string }> }
        >
    }>
}

function DataViewer(_properties: { steps: Array<Step> }) {
    return null
}

export function LeadsListItemViewContentLeadCompliance() {
    return DataViewer({
        steps: [
            {
                title: "步骤1：授权人员",
                sections: [
                    new PersonalInformationSection("张三", "/docs/id-card.pdf"),
                ],
            },
        ]
    })
}

方案二：添加类型断言函数，验证字段结构

通过自定义断言函数，手动验证Field是否符合Step的字段要求，完成类型转换：

// 定义断言函数，验证Field是否匹配Step的字段类型
function isStepField(field: Field): field is Step["sections"][0]["fields"][number] {
    switch (field.kind) {
        case "text":
            return typeof field.title === "string" && typeof field.value === "string"
        case "file":
            return typeof field.value === "string"
        case "array":
            // 若有ArrayField子类，需补充对应结构验证逻辑
            return Array.isArray((field as any).items) && (field as any).items.every(item => item.kind === "text")
        default:
            return false
    }
}

// 修改Section的fields getter，过滤并转换类型
class Section {
    constructor(
        protected readonly _title: string,
        protected readonly _fields: Array<Field>,
    ) {}

    get title() {
        return this._title
    }

    get fields() {
        return this._fields.filter(isStepField) as Step["sections"][0]["fields"]
    }
}

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