Can I create a regular Non-Nullable type with Optional if a default is provided?

[divmgl]

In Zod, you can do things like z.string().optional().default("hello") and now it's possible to omit the property in react-hook-form and yet the type when parsed will always result in "hello", so z.infer returns string.

The current TypeBox API doesn't seem to allow this, where Optional(String({ default: "hello" })) always results in string?.

Is there a way to do this?

[sinclairzx81]

@divmgl Hi,

You can override default type inference by wrapping a type in Unsafe and specifying the exact inference type you expect. The following type will represent optional property schematic (so string | undefined) but will infer as string only.

const S = Type.Unsafe<string>(
  Type.Optional(Type.String({ default: "hello" }))
)

Note that TypeBox considers the above unsafe as the schema and static type are non-equivalent (or more accurately, the static type is not directly derived from the schematic). However this may be permissible if there's an expectation that something (react-hook-form in this case) is always going to generate a property with the default annotation.

If this is something you need to do for a lot of properties, you can create a generic function to handle this in a consistent way (which is recommended as it can make refactoring rules around optional handling simpler)

import { Type, Static, TSchema } from '@sinclair/typebox'

// Specialized Optional
export function FormOptional<T extends TSchema>(schema: T) {
   return Type.Unsafe<Static<T>>(Type.Optional(schema))
}

const T = Type.Object({
   hello: FormOptional(Type.String({ default: 'hello' })),
   world: FormOptional(Type.String({ default: 'world' }))
})

Hope this helps
S

[divmgl]

I have the following Compile function:

import type { TSchema } from "@sinclair/typebox"
import type { ValueError } from "@sinclair/typebox/compiler"
import { TypeCompiler } from "@sinclair/typebox/compiler"
import { TRPCError } from "@trpc/server"

export function Compile<T extends TSchema>(schema: T, references: TSchema[] = []) {
  const check = TypeCompiler.Compile(schema, references)

  return (input: unknown) => {
    if (check.Check(input)) return input

    const errors: ValueError[] = []

    for (const error of check.Errors(input)) {
      errors.push(error)
    }

    throw new TRPCError({ code: "BAD_REQUEST", message: JSON.stringify(errors) })
  }
}

Which I'm using in the input call for tRPC procedures. Is it safe to say that defaults will not be populated and I'll need to do some additional parsing of the input payload? Something like what's described in this issue:

const Parse = <T extends TSchema>(T: T, value: unknown) => 
  Value.Decode(T,
    Value.Clean(T,
      Value.Default(T,
        Value.Convert(T, value),
      )
    )
  )

As always thanks for your help!

[sinclairzx81]

@divmgl

Is it safe to say that defaults will not be populated and I'll need to do some additional parsing of the input payload?

Yes, that's right. TypeBox's compiler only checks (returning either true or false), it doesn't perform any additional processing of a value (such as discarding unknown properties, or generating defaults). The Parse example function above performs this additional processing of the value, and would need to be setup in the tRPC Compile function.

The following is a more current implementation using the 0.32.0 infrastructure in TypeBox (supporting defaults, remove additional properties an transform types)

import { TypeCompiler } from "@sinclair/typebox/compiler"
import { Clean, Default, TransformDecode } from "@sinclair/typebox/value"
import type { TSchema, StaticDecode } from "@sinclair/typebox"

// Specialized trpc parse pipeline
export function Compile<T extends TSchema, R = StaticDecode<T>>(schema: T, references: TSchema[] = []) {
  const check = TypeCompiler.Compile(schema, references)
  return (input: unknown): R => {
   const defaulted = Default(schema, references, input) // (optional) generate default annotations
   const cleaned = Clean(schema, references, defaulted) // (optional) discard unknown properties
    return (
      check.Check(cleaned) 
         ? TransformDecode(schema, references, cleaned) // (optional) apply transforms
         : (() => {
            throw new TRPCError({ 
               code: "BAD_REQUEST", 
               message: JSON.stringify([...check.Errors(cleaned)]) 
            })
         })()
    ) as R
  }
}

[divmgl]

So just a heads up that while this definitely helps, the frontend is still expecting those types to be provided.

Somehow the input tRPC call is making those values optional in the useQuery calls while keeping the values as non-nullable everywhere else. StaticDecode<T> doesn't seem to work in this fashion, but I have no idea how tRPC is treating .default() values from Zod.

[andrewdoro]

@sinclairzx81 Really cool project!! Thanks for the snippet. I know this is not related to this discussion but I wanted to replace typebox with zod in my trpc project and I've found very little information about this. I was thinking about creating an example repo for trpc, react-hook-form , drizzle and Typebox setup.

This will basically show an example of how to handle crud like operations and validation, starting from form validations with custom error messages to TRPC router setup and drizzle integration.

I see that they are people wanting to use a stack like, but there is not a lot of information. I can open another discussion for this. Wanted to know wyt about a starter repo like this and if you have any other snippets?

https://github.com/orgs/react-hook-form/discussions/7453#discussioncomment-8902567