Question

我正在尝试做以下事情

const useTeams = (urlFriendlyNameOrId?: string) => {
    const [team, setTeam] = useState<>();
    // Inside of useState<> I want it to evaluate to <Team> if there is a provided string or <Team[]> otherwise
    // I have tried useState<typeof urlFriendlyNameOrId extends string ? Team : Team[]>() will just always give me Team[]
    // I have tried useState<typeof urlFriendlyNameOrId === 'string' ? Team : Team[]() get error about always being false
    ...
    return { team, setTeam };
}

它将根据参数的类型生成正确的类型。我什至可以使用泛型重写函数，但仍然无法正常工作。

function useTeams<T extends string | undefined>(urlFriendlyNameOrId?: T) {
    const [team, setTeam] = useState<>();
    // useState<T extends string ? Team : Team[]>()
    // useState<typeof T extends string ? Team : Team[]>()
}

Answer 1

我不会直接回答这个问题，因为我认为您在这里走错了路。有条件的挂钩是不可能的，这意味着如果挂钩可以同时使用-数组和单个对象，那也就是类型定义。

由于要缩小类型，唯一的方法是设置类型保护，这不能用钩子完成，因此类型保护需要在初始化后设置。

看看下面的代码，我认为这是您真正想要做的：

// just example type as you haven't provided such
type Team = {
    name: string;
}

function useTeams(urlFriendlyNameOrId?: string) {
    const [teams, setTeams] = useState<Team | Team[]>(
urlFriendlyNameOrId ? {name: urlFriendlyNameOrId} : []);

    if (Array.isArray(teams)) {
        teams // array
    } else {
        teams // single team
    }
}

请注意，钩子可与并集Team | Team[]一起使用，我有条件地传递了初始值urlFriendlyNameOrId ? {name: urlFriendlyNameOrId} : []，并且在之后的条件中进行了类型缩小。

我的最后一个建议是，在这种情况下，我总是主张不要使用临时多态性，因此建议将类型简化为Team[]。看看您的代码将如何做得更好：

function useTeams(urlFriendlyNameOrId?: string) {
    const [teams, setTeams] = useState<Team[]>(
urlFriendlyNameOrId ? [{name: urlFriendlyNameOrId}] : []);

    teams // it can be or empty or one element array of teams
}

看看我有关该主题的文章-Function flexibility considered harmful

基于输入参数类型的打字稿类型

1 个答案: