typescript - 根据 typescript 中的字符串文字缩小类型？

Question

我想输入一个 api 响应，其中资源在资源名称键上返回，即 { [resourceName]: resources, total: 10 } .在下面的例子中，我将如何输入响应对象来说明 apples或 oranges出现在响应中，具体取决于请求的内容:

interface Response {
    total: number
    apples: Array<object>
    oranges: Array<object>
}

const get = async (fruit: 'apples' | 'oranges') => {
    const data: Response = await fetchFruit(`https://example.com/${fruit}`)
    const count = data.total
    const applesOrOranges = data[fruit].filter(Boolean)
}

我想我必须对不同的可能响应使用联合类型，但我不清楚如何根据传递给函数的字符串文字缩小联合类型:

interface Response {
    total: number
}
interface ApplesResponse extends Response {
    apples: Array<object>
}
interface OrangesResponse extends Response {
    oranges: Array<object>
}
type FruitResponse = ApplesResponse | OrangesResponse

const get = async (fruit: 'apples' | 'oranges') => {
    const data: FruitResponse = await fetchFruit(`https://example.com/${fruit}`)
    const count = data.total
    const applesOrOranges = data[fruit].filter(Boolean)
}

Answer 1

您可以制作 fruit get 的论据泛型 ( K ) 并解析依赖于 K 的返回类型:

type FruitResponse = ApplesResponse | OrangesResponse
type FruitResponseKeys = 'apples' | 'oranges' // or extract it from the response types
type FruitResponseByKey<K extends FruitResponseKeys> = Extract<FruitResponse,{ [P in K]: any }>

const get = async <K extends FruitResponseKeys>(fruit: K): Promise<FruitResponseByKey<K>> => {
    // add validation logic for fetched data if you need that
    // we cast it here as any for brevity
    const data: FruitResponseByKey<K> = await fetch(`https://example.com/${fruit}`) as any
    const applesOrOranges = data[fruit].filter(Boolean)
    return { ...data, [fruit]: applesOrOranges }
}

const apples = get("apples") // Promise<ApplesResponse>
const oranges = get("oranges") // Promise<OrangesResponse>

FruitResponseByKey extracts要么 ApplesResponse或 OrangesResponse来自 FruitResponse基于 key K即 'apples' | 'oranges' .

我认为，最有用的部分是，调用者根据 fruit 获得正确的水果数组。 key 。如 fetch自然需要类型断言，我们只用 any为了简化函数体。也是 get 中的逻辑没有任何复杂性，所以这应该是一个很好的选择。

Code sample