| unknown included in all the types... am I missing something or does that defeat much of the purpose of generating types?

[scottstephens]

In my experiments with openapi-ts I'm not finding the generated SDK to be very user friendly. I'm wondering if I'm missing something.

I've created a stackblitz as an example project: https://stackblitz.com/edit/vitejs-vite-7fsyogyy?file=src%2FApp.tsx. The generated code is in gen/client, the schema it was generated from is hello-world.json, and pretty much the only non-boilerplate code is in src/App.tsx.

The most important part of App.tsx is here:

  // necessary
  function handleGetHelloResponse1({
    data,
  }: {
    data: GetHelloResponse | unknown;
  }) {
    if (
      typeof data === 'object' &&
      data !== null &&
      'message' in data &&
      typeof data.message === 'string'
    )
      setMessage(`${data.message} (received ${new Date().toISOString()})`);
  }

  // desired
  function handleGetHelloResponse2({ data }: { data: GetHelloResponse }) {
    setMessage(`${data.message} (received ${new Date().toISOString()})`);
  }

  function handleClick(
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ): void {
    getHello().then(handleGetHelloResponse1);
  }

handleGetHelloResponse2 is sort of how I expected to work with the generated SDK, handleGetHelloResponse1 is how it seems I actually have to work with it.

The issue is that with the data element having the GetHelloResponse | unknown type, and the message element within having the string | unknown type, I have to do a whole lot of validation in order to make the typescript compiler happy with my data handler. It seems like it kind of defeats the point of generating the typescript if every type is going to have | unknown included. That means I don't get very good autocomplete, and I've got to write all that validation code.

Am I missing something about how to use this library effectively? Or how to work with the generated types more conveniently?

[mrlubos]

@scottstephens why not this?

async function handleClick(
  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) {
  const { data } = await getHello()
  if (data) {
    handleGetHelloResponse2({ data })
  }
}

or if you don't want to do checks...

async function handleClick(
  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) {
  const { data } = await getHello({ throwOnError: true })
  handleGetHelloResponse2({ data })
}

[scottstephens]

Thanks! That works. The reason I didn't think of it was that I didn't know that trick with if to distinguish between the unknown and GetHelloResponse cases. I'm not great with typescript yet, and my google-fu failed me today.