TypeScript：如何编写具有条件返回类型的函数

Question

export type Name = { name: string }
export type Id = { id: number }
export type Value<T> = T extends string ? Name : Id

export function create<T extends string | number>(value: T): Value<T> {
    if (typeof value === "string") return { name: value }

    return { id: value }
}

I am playing around with the conditional types in TypeScript. i would like to write a function with a conditional return type. If the function gets passed a string it returns a Name otherwise it returns an Id.

I get the following error on my return statements:

Type '{ name: T & string; }' is not assignable to type 'Value<T>'.

What am I missing? Thnx!

Edit: The example taken directly from Anders Hejlsberg talk at Build 2018: https://youtu.be/hDACN-BGvI8?t=2241

He even states "we do not have to write function overloads anymore..."

If I change the code to just a declaration, the compile errors go away:

export type Name = { name: string }
export type Id = { id: number }

export type Value<T> = T extends string ? Name : Id

declare function create<T extends string | number>(value: T): Value<T>

const a = create("Bob")     // a : Name
const b = create(5)         // b : Id

So we can declare the function signature. I guess my question then becomes, how would we actually implement the function?

Answer 1

The problem is inside the function T is not known, so you can't really assign a value to Value<T> . One option would be to use a type assertion. A more type safe option would be to use a separate implementation signature, that would be more relaxed about the input and output type:

export function create<T extends string | number>(value: T): Value<T> // public signature
export function create(value: string | number): Name | Id { // more relaxed private implementation signature 
    if (typeof value === "string") return { name: value }

    return { id: value }
}

Answer 2

Here is another solution which works great as well.

I like this solution better than the accepted answer because you will get correct type deduction when coding :

You can see when hovering, it correctly deduced the type.

Here is the code from the screenshot:

export type Name = { name: string }
export type Id = { id: number }
export type Value<T extends string | number> = T extends string ? Name : Id

export function create<T extends string | number>(value: T): Value<T> {
    if (typeof value === 'string') return { name: value } as unknown as Value<T>

    return { id: value } as unknown as Value<T>
}

Answer 3

I'm not sure I understand your example fully, but I think this is what you want?

type Name = { name: string }
type Id = { id: number }
type Value = Name | Id

export function create(value: string | number): Value {
  if (typeof value === "string") return { name: value }
  return { id: value }
}

See, that I've removed any generics from your example, since I don't see the need for them in this case