TypeScript中解构Object.entries输出时的类型约束问题

定义的类型结构 #

export type MimeType = 'image' | 'application' | 'text';

export type ApplicationMimeType = '.pdf' | '.zip';

export type ImageMimeType = '.gif' | '.png' | '.jpeg' | '.jpg' | '.svg';

export type TextType = '.csv' | '.txt';

export type ExtensionTypes = ImageMimeType[] | ApplicationMimeType[] | TextType[];

export type FileType = {
  image?: ImageMimeType[];
  application?: ApplicationMimeType[];
  text?: TextType[];
};

问题场景 #

使用Object.entries处理FileType类型的对象时，键的类型被推断为string，希望将键约束为MimeType类型。尝试相关解决方案后，出现错误：Type 'undefined' is not assignable to type 'string[]'。

修正后的代码实现 #

正确的Entries类型定义 #

首先修正用于保留键值关系的Entries类型：

export type Entries<T> = Array<{ [K in keyof T]: [K, T[K]] }[keyof T]>;

类型约束后的函数实现 #

export const getAcceptedFileTypes = (mimeTypes: FileType) => {
  const acceptedTypes: Record<string, string[]> = {};
  
  // 将Object.entries结果转换为带类型约束的条目数组
  (Object.entries(mimeTypes) as Entries<FileType>).forEach(([key, extensions]) => {
    // 跳过未定义的扩展数组，避免类型错误
    if (!extensions) return;

    if (key === 'text') {
      acceptedTypes['text/*'] = extensions;
    } else if (key === 'image') {
      extensions.forEach(
        (image) => (acceptedTypes[`image/${image.substring(1)}`] = [image])
      );
    } else {
      extensions.forEach(
        (application) =>
          (acceptedTypes[`application/${application.substring(1)}`] = [
            application,
          ])
      );
    }
  });
  
  return acceptedTypes;
};

// 示例调用
getAcceptedFileTypes({ image: ['.png'], application: [] });

关键修正点 #

• 修正Entries类型：原类型错误地将值包装为二维数组，正确定义应生成[键类型, 值类型]的元组数组。
• 处理可选属性：由于FileType的属性是可选的，需在循环中判断extensions是否存在，避免undefined赋值导致的类型错误。
• 明确返回类型：为acceptedTypes指定Record<string, string[]>类型，提升类型安全性。

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