Vue模板中ListItem的controlListType类型为何一直是unknown？

Question

vue模板类型缩小

这是我的类型文件，但是有个问题，为什么ListItem下的controlListType类型缩小不了，一直是unknow，就很奇怪，用模板也是这样，我不知道是不是我想法有问题还是怎么样，或者说我需要怎么改进

declare interface ControlType {
    input: {
        config: {
            placeholder?: string;
            rows?: number;
            maxLength?: number;
        };
        check?: {
            type: string;
            message: string;
        };
    };
    select: {
        config: {
            placeholder?: string;
            options?: Array<object>;
            mode?: string;
            lableKey: string;
            valueKey: string;
        };
        check?: {
            type: string;
            message: string;
        };
    };
    radio: {
        config: {
            options?: Array<object>;
            name: string;
        };
        check?: {
            type: string;
            message: string;
        };
    };
    date: {
        config: {};
        check: {};
    };
    dateRange: {};
}

declare type ControlListType<K extends keyof ControlType> = {
    type: K;
    config: ControlType[K]["config"];
    check?: ControlType[K]["check"];
};

declare type displayStyleType = {
    backgroundColor?: string;
    color?: string;
    border?: string;
};
type width = 50 | 100;
declare interface ListItem {
    id: string | number; // 字段id
    filedName: string; // 字段名称
    value?: string | (() => string) | ""; // 显示字段，如果是对象结构，展示需要层级，或者函数，函数用于处理多层级数据或者数组或者格式化数据
    // value返回值提供样式修改，如果value是个函数，displayStyle 失效，需要在此返回值中配置样式可以 直接返回dom结构，对于dom的class或者id，提供额外的style插入。如果复杂的话后续考虑返回jsx，对jsx进行编译
    name: string; // 展示名称
    displayStyle?: displayStyleType; // 列表显示样式，默认显示文本或者提供配置，背景色和文本颜色，只有value是 string 的时候生效
    controlListType: ControlListType<keyof ControlType>; // 控件列表，提供配置、校验、等一些特有控件的私有配置 ,这个只提供一些常规配置，有其他需求的通过 code 编码，
    width?: width; // 展示列表宽度，默认一半
    deploy: {
        isSearch: boolean; // 是否查询字段
        isAdd: boolean; // 是否新增
        isEdit: boolean; // 是否编辑
    };
}

Answer 1

代码是不是没全，看上面的类型里面 controlListType.config 也没type这个字段嗯

---

要收窄的话， ControlListType 要这么写, 显式地声明出type的值

type ControlListType = {
    type: 'input',
    config: ...,
    check: ...
} | {
    type: 'select',
    config: ...,
    check: ...
}

或者写个类型做下转换：

type Magic<T extends Record<string, any>, K = keyof T> = K extends keyof T
  ? {
    type: K;
    config: T[K]['config'];
    check: T[K]['check'];
  } : never

type ControlListType = Magic<ControlType>