如何将 URLSearchParams.get() 返回值的类型缩小为联合类型？

Question

URL 中有一个搜索参数，如下所示：?mode=view。 mode 的有效值应该是 'edit' 和 'view'，因此我创建了一个 ModeTuple 类型并使用索引访问类型 ModeTuple[number] 将其转换为联合类型。

type ModeTuple = ['view', 'edit'];

const searchParams = new URLSearchParams();
const modes: ModeTuple = ['view', 'edit'];

const m1: ModeTuple[number] = modes.includes(searchParams.get('mode')) ? searchParams.get('mode') : 'view';

我想使用 modes.includes(...) 检查 mode 的值是否有效，然后将类型缩小为联合类型 'edit' | '查看'。

出现错误：

“字符串”类型的参数不可分配给““视图”类型的参数 | “编辑”'

看来 Array.prototype.includes 方法不会将类型从 string 缩小到 “view” | “编辑”成功。从JS代码逻辑来看，mode值必须是'view'或'edit'。但 TSC 并不知道这一点。

<一href="https://www.typescriptlang.org/play?#code/C4TwDgpgBAsg9gEwgFQK5gDbQLxQNoDkAbgJYQDuBANFARAicAQLoDcAUOwMZwB2AzsCj8IAQwBOXABYAFCaIC2-KLl4UoAVQ BKAGQDKYybPlKAFAEoOPAUIWII-AFyx7aTDnzEylGnQZM2TmtBKAUARmd4JDcsPF5UBQAjCHFmFVD7fgA6El4uDFQkflMRCWk5cUVsgHMIYFMCOyQCc3MoAH5hQ3KTGrqGpogWqGcvCgIOIA" rel="nofollow noreferrer">TypeScript 游乐场

Answer 1

const m1: ModeTuple[number] = models.includes(searchParams.get('mode')) ？ searchParams.get('mode') : 'view'; 不起作用有两个原因：

1. mode.includes 需要一个 ModeTuple[number] 参数，但 searchParams.get('mode') 返回 string |空。

2. TypeScript 对缩小类型的流分析是有限的。即使 #1 不是问题，它也不会从 modes.includes(searchParams.get('mode')) 得知后续调用 searchParams.get('mode) ') 将返回一个 ModeTuple[number] 值。 （尤其是因为并非所有函数都是纯函数，因此 TypeScript 在一般情况下不能假设函数在使用相同参数调用两次时会返回相同的内容两次。）

对于这样的事情，我喜欢从一个常量开始数组，然后从中派生类型：

const modes = ["view", "edit"] as const;
type ModeTuple = typeof modes; // If you want it
type Mode = ModeTuple[number];

这样，这些值仅列出一次，并且如果我需要添加一个等，我只有一个地方可以更改它们。

然后，您可以替换原始值m1 代码如下：

const m1 =
    modeString !== null && (modes as readonly string[]).includes(modeString)
    ? modeString as ModeTuple[number]
    : "view";

...但是我不喜欢那样做内联类型断言，因为它们很冗长并且重复它们给了我很多出错的机会。

相反，我更喜欢定义一个 类型谓词 （又名“类型保护”）我可以重用的函数：

function isMode(mode: string | null): mode is Mode {
    return mode !== null && (modes as readonly string[]).includes(mode);
}

那么你可以这样做：

const modeString = new URLSearchParams(location.search).get("mode");
const m1 = isMode(modeString) ? modeString : "view";

或者你可以定义一个函数来执行它，如果你可能需要在多个地方执行它：

function getMode(searchParams: URLSearchParams): Mode | null {
    const mode = searchParams.get("mode");
    // Or if you didn't define `isMode`, just do the check here
    return isMode(mode) ? mode : null;
}

那么获取它只是：

const m1 = getMode(theSearchParams):

游乐场链接