带可选参数的多文件上传函数类型报错：如何保留可选性并使用参数

我写了一个基于Playwright的异步多文件上传函数uploadMultipleFiles，参数包含Page实例、文件夹路径、2个必选文件参数file1、file2，以及3个可选文件参数file3、file4、file5。初始实现只上传file1和file2：

import { Page } from '@playwright/test';
import path from 'path';

export async function uploadMultipleFiles(page: Page, folder: string, file1: string, file2: string, file3?: string, file4?: string, file5?: string) {
    await page.locator('input[type=\"file\"]').setInputFiles([path.join(folder, file1), path.join(folder, file2) ]);
}

调用时传入第三个文件参数，该文件无法被上传。如果修改函数把可选参数加入上传数组：

import { Page } from '@playwright/test';
import path from 'path';

export async function uploadMultipleFiles(page: Page, folder: string, file1: string, file2: string, file3?: string, file4?: string, file5?: string) {
    await page.locator('input[type=\"file\"]').setInputFiles([
        path.join(folder, file1),
        path.join(folder, file2),
        path.join(folder, file3),
        path.join(folder, file4),
        path.join(folder, file5)]);
}

会触发TypeScript类型错误：

Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.ts(2345)
(parameter) file3: string | undefined

请问如何在保留file3、file4、file5参数可选性的前提下，实现对应文件的上传？

解决方案 #

方法1：过滤数组中的undefined值 #

先将所有文件路径（含可选参数）存入数组，再过滤掉undefined项，同时通过类型断言告知TypeScript过滤后的数组全为有效字符串：

import { Page } from '@playwright/test';
import path from 'path';

export async function uploadMultipleFiles(page: Page, folder: string, file1: string, file2: string, file3?: string, file4?: string, file5?: string) {
    const files = [
        path.join(folder, file1),
        path.join(folder, file2),
        file3 ? path.join(folder, file3) : undefined,
        file4 ? path.join(folder, file4) : undefined,
        file5 ? path.join(folder, file5) : undefined
    ].filter((file): file is string => file !== undefined);

    await page.locator('input[type=\"file\"]').setInputFiles(files);
}

方法2：逐个判断可选参数并添加 #

直接对每个可选参数做存在性判断，仅当参数有值时才将对应文件路径加入上传数组：

import { Page } from '@playwright/test';
import path from 'path';

export async function uploadMultipleFiles(page: Page, folder: string, file1: string, file2: string, file3?: string, file4?: string, file5?: string) {
    const files: string[] = [
        path.join(folder, file1),
        path.join(folder, file2)
    ];

    file3 && files.push(path.join(folder, file3));
    file4 && files.push(path.join(folder, file4));
    file5 && files.push(path.join(folder, file5));

    await page.locator('input[type=\"file\"]').setInputFiles(files);
}

方法3：重构为可变参数（灵活扩展） #

如果后续可能需要支持更多可选文件，可以将参数重构为可变参数形式，同时保留至少2个必选文件的约束：

import { Page } from '@playwright/test';
import path from 'path';

export async function uploadMultipleFiles(page: Page, folder: string, ...files: string[]) {
    // 强制校验至少传入2个文件
    if (files.length < 2) {
        throw new Error('必须传入至少2个文件');
    }

    const filePaths = files.map(file => path.join(folder, file));
    await page.locator('input[type=\"file\"]').setInputFiles(filePaths);
}

调用示例：uploadMultipleFiles(page, './uploads', 'file1.png', 'file2.pdf', 'file3.txt')

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