为什么TypeScript类型窄化不能在回调函数中工作?

Question

下面的代码是导致错误的原因

function upload(
url: string,
files: {
file: File;
fieldname: string;
}[],
options: {
onProgress: Function;
customData?: Record<string, any>;
method?: string;
} = {
onProgress() {},
method: "POST",
}
) {
options.customData &&
Object.keys(options.customData).forEach(
(fieldname) =>
typeof options.customData[fieldname] !== "undefined" &&
formData.append(fieldname, options.customData[fieldname])
);
}

TS操场

我得到这个错误;它是特定于typescript的:

'选项。customData'可能是'未定义'。ts (18048)

options.customData &&应该根据窄化来窄化类型，但是如果访问是在回调函数中，它不起作用。

缩窄在以下代码中起作用:

function upload(
url: string,
files: {
file: File;
fieldname: string;
}[],
options: {
onProgress: Function;
customData?: Record<string, any>;
method?: string;
} = {
onProgress() {},
method: "POST",
}
) {
options.customData && options.customData["fieldname"];
}

TS操场

Answer 1

ts不记得forEach函数调用中的窄化。

参见TypeScript类型缩小错误与forEach

简短的解释是，它通常不知道回调何时执行，因此窄化可能不再有效。

你可以做

const customData = options.customData
customData
&& Object.keys(customData).forEach(
(fieldname) => typeof customData[fieldname] !== 'undefined'
&& formData.append(fieldname, customData[fieldname])
);