打字稿：基于类型的可选方法参数

Question

I have a method where id is only available when it is of type B, look below

(index: string, type: ResourceType.A, data: any): JSX.Element;

and

(index: string, type: ResourceType.B, data: any, id: string): JSX.Element;

So I tried to create a method overload as

type IOverload = {
  (index: string, type: ResourceType.A, data: any): JSX.Element;
  (index: string, type: ResourceType.B, data: any, id: string): JSX.Element;
}

and now tried to create a method as

const getJsx: IOverload = (
    index: string,
    type: ResourceType.A | ResourceType.B,
    data: any,
    id?: string
  )=> {
.
.
.
type === ResourceType.B ? myFunc(id) : yourFunc(data)
}

and my method myFunc is declared as

const myFunc = (id: string) => {

but now I get an error as shown below for myFunc

Argument of type 'string | undefined' is not assignable to parameter of type 'string'.

Please help to solve this, I would prefer making a change to getJsx and don't want to declare my method myFunc with string | undefined string | undefined as

const myFunc = (id: string| undefined) => {

Answer 1

You could create an overload which will throw an error if a resource is not of Resource.B and there are 4 parameters ( Playground ):

enum ResourceType {
  A, B
}

function test(index: string, type: ResourceType.B, data: any, id: string): any;
function test(index: string, type: ResourceType.A, data: any): any;
function test(...args: (string | ResourceType)[]) {
  const index = args[0] as string
  const type = args[1] as ResourceType
  const data = args[2] as any
  const id = args[3] as string | undefined
}

test('abc', ResourceType.A, 'myData', 'myId') // Throws error
test('abc', ResourceType.A, 'myData')         // Accepted

test('abc', ResourceType.B, 'myData', 'myId') // Accepted
test('abc', ResourceType.B, 'myData')         // Throws error

Answer 2

Typescript doesn't understand that id is never undefined in that situation, because the argument is declared as optional with ? .

I don't know if it's possible to properly type your functions to work as you intend (I don't know how to do it), but a quick fix that would remove your error is to provide a default with nullish coalescing:

type === ResourceType.B 
   ? myFunc(id ?? '') // Here typescript is happy, because there is a string fallback if id is undefined
   : yourFunc(data)

Answer 3

Simply do

myFunc(id as string)

And you problem is solved