How do I make a generic that takes a TSchema or undefined and if undefined returns TUnknown while still retaining type inference?

[jessekrubin]

I am trying to write a generic function that takes a TSchema param const makeSchema = <T extends TSchema>(schema?: T) but returns TUnknown if the schema given is undefined. Maybe this is a dumb question, but I am confused!

[sinclairzx81]

@jessekrubin Hi!

Unfortunately, there's not really an ideal way to define optional arguments for generic types. The problem with optionals is that schema? could be either TSchema or undefined. Because of this, the body of makeSchema() will need (at a minimum) at least two return code paths, one to handle the undefined case, the other to handle the TSchema case. As there are multiple return types possible, things can get somewhat complicated.

The following implements some conditional types to map for the undefined / optional case. I'm not sure what the schema should look like in the instance it's undefined but have added the TObject<{}> as a placeholder for you to change with the actual type. Note the similarities between the conditional type and the body of the Make function.

TypeScript Link Here

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

type IsDefined<T> = Extract<T, undefined> extends never ? true : false
type TMake<T extends TSchema | undefined> = IsDefined<T> extends true 
    ? TObject<{ x: AssertType<T> }> 
    : TObject<{}>

const Make = <T extends TSchema | undefined>(schema?: T) => {
  return (schema !== undefined 
    ? Type.Object({ x: schema }) 
    : Type.Object({ })
  ) as TMake<T>
}

const A = Make(Type.String())  // TObject<{ x: TString; }>
const B = Make()               // TObject<{ }>

Hopefully you can update the above for your use case!
Cheers
S

[jessekrubin]

@sinclairzx81 I just made public the package/code I have been fiddling with in my spare time (https://github.com/jessekrubin/geobox) and I am trying to figure out an elegant way of being able to hand the feature-schema-creating-function (eg: PointFeature) the coordinate schema (which is either 2d or 3d) while still retaining the ts-type hints,

Ideally if no schema is provided as an option to the function (PointFeature() vs PointFeature(Type.Tuple([Type.Number(), Type.Number()]))) then the schema falls back to the union of 2d/3d schemas.

This is in no way pressing, just curious if you have any thoughts!

[jessekrubin]

Just curious if you have a suggestion for how to make a field required depending on another field,

In the case of a tilejson (https://github.com/mapbox/tilejson-spec/blob/master/3.0.0/schema.json), when format: 'png'|'jpg', the vector_layers key is optional, but when format: 'pbf', vector_layers is required.

The official json schema has vector_layers as a required key, but the readme affiliated with the spec says vector_layers is only required when format is pbf

[sinclairzx81]

Just curious if you have a suggestion for how to make a field required depending on another field,

Currently, the TypeBox validators don't have support for conditional if/then/else types (or dependentRequired). However you can still express these schematics in TypeBox, but will need to use Ajv to validate them.

import { Type } from '@sinclair/typebox'

const T = Type.Object({
  format: Type.Union([
    Type.Literal('png'),
    Type.Literal('jpg'),
    Type.Literal('pdf')
  ])
}, {
  if: Type.Object({
    format: Type.Literal('pdf')             // if format === 'pdf'
  }),
  then: Type.Object({
    vector_layers: Type.Array(Type.Any())   // then expect this property
  })
})

import Ajv from 'ajv'

const ajv = new Ajv()
console.log(ajv.validate(T, { format: 'png' }))                           // true
console.log(ajv.validate(T, { format: 'jpg' }))                           // true
console.log(ajv.validate(T, { format: 'pdf' }))                           // false
console.log(ajv.validate(T, { format: 'pdf', vector_layers: [1, 2, 3] })) // true

Conditional schematics are a planned feature for TB, but probably won't be ready for some time.
Hope this helps!
S

[jessekrubin]

Thanks for your (speedy as always) reply! Would the TypeCompiler be able to compile/validate the following:

export const VectorLayer = Type.Object(
  {
    id: Type.String(),
    fields: Type.Record(Type.String(), Type.Any()),
    description: Type.Optional(Type.Union([Type.String(), Type.Null()])),
    maxzoom: Type.Optional(Type.Union([Zoom, Type.Null()])),
    minzoom: Type.Optional(Type.Union([Zoom, Type.Null()])),
  },
  {
    additionalProperties: true,
  }
);

export const VectorLayers = Type.Array(VectorLayer, {
  default: [],
});

export const Tilejson300Base = Type.Object({
  // MUST
  name: Type.String(),
  tilejson: Type.String({ default: '3.0.0' }),
  tiles: Type.Array(Type.String(), {
    default: [],
  }),
  // OPTIONAL
  vector_layers: Type.Optional(
    VectorLayers
  ),
  version: Type.Optional(Type.Union([Type.String(), Type.Null()])),
  description: Type.Optional(Type.Union([Type.String(), Type.Null()])),
  minzoom: Type.Optional(Type.Union([Type.Number(), Type.Null()])),
  maxzoom: Type.Optional(Type.Union([Type.Number(), Type.Null()])),
  bounds: Type.Optional(Type.Union([Type.Array(Type.Number()), Type.Null()])),
  center: Type.Optional(Type.Union([Type.Array(Type.Number()), Type.Null()])),
  attribution: Type.Optional(Type.Union([Type.String(), Type.Null()])),
  template: Type.Optional(Type.Union([Type.String(), Type.Null()])),
  scheme: Type.Optional(Type.Union([Type.String(), Type.Null()])),
  legend: Type.Optional(Type.Union([Type.String(), Type.Null()])),
  grids: Type.Optional(Type.Union([Type.Array(Type.String()), Type.Null()])),
  data: Type.Optional(Type.Union([Type.Array(Type.String()), Type.Null()])),
  fillzoom: Type.Optional(Type.Union([Zoom, Type.Null()])),
});
export const Tilejson300Raster = Type.Composite([
  Type.Object({
    // MUST
    format: Type.Union([Type.Literal('png'), Type.Literal('jpg')]),
  }),
  Tilejson300Base,
]);
export const Tilejson300Vector = Type.Composite([
  Type.Object({
    format: Type.Literal('pbf'),
    vector_layers: VectorLayers,
  }),
  Tilejson300Base,
]);
export const Tilejson300 = Type.Union([Tilejson300Raster, Tilejson300Vector]);

[sinclairzx81]

@jessekrubin Seems to compile ok. Generally that means it's going to validate as you expect.

console.log(TypeCompiler.Code(Tilejson300))

// const local_0 = new RegExp(/^(.*)$/)
// const local_1 = new RegExp(/^(.*)$/)
// const local_2 = new RegExp(/^(.*)$/)
// return function check(value) {
//   return (
//     (((typeof value === 'object' && value !== null && !Array.isArray(value)) && (((value.format === 'png')) || ((value.format === 'jpg'))) && (typeof value.name === 'string') && (typeof value.tilejson === 'string') && Array.isArray(value.tiles) && value.tiles.every((value) => ((typeof value === 'string'))) && (value.vector_layers !== undefined 
// ? (Array.isArray(value.vector_layers) && value.vector_layers.every((value) => ((typeof value === 'object' && value !== null && !Array.isArray(value)) && (typeof value.id === 'string') && (typeof value.fields === 'object' && value.fields !== null && !Array.isArray(value.fields) && !(value.fields instanceof Date) && !(value.fields instanceof Uint8Array)) && (Object.entries(value.fields).every(([key, value]) => (local_0.test(key) ? (true) : true))) && (value.description !== undefined ? ((((typeof value.description === 'string')) || ((value.description === null)))) : true) && (value.maxzoom !== undefined ? ((((typeof value.maxzoom === 'number' && Number.isFinite(value.maxzoom))) || ((value.maxzoom === null)))) : true) && (value.minzoom !== undefined ? ((((typeof value.minzoom === 'number' && Number.isFinite(value.minzoom))) || ((value.minzoom === null)))) : true)))) : true) && (value.version !== undefined ? ((((typeof value.version === 'string')) || ((value.version === null)))) : true) && (value.description !== undefined ? ((((typeof value.description === 'string')) || ((value.description === null)))) : true) && (value.minzoom !== undefined ? ((((typeof value.minzoom === 'number' && Number.isFinite(value.minzoom))) || ((value.minzoom === null)))) : true) && (value.maxzoom !== undefined ? ((((typeof value.maxzoom === 'number' && Number.isFinite(value.maxzoom))) || ((value.maxzoom === null)))) : true) && (value.bounds !== undefined ? (((Array.isArray(value.bounds) && value.bounds.every((value) => ((typeof value === 'number' && Number.isFinite(value))))) || ((value.bounds === null)))) : true) && (value.center !== undefined ? (((Array.isArray(value.center) && value.center.every((value) => ((typeof value === 'number' && Number.isFinite(value))))) || ((value.center === null)))) : true) && (value.attribution !== undefined ? ((((typeof value.attribution === 'string')) || ((value.attribution === null)))) : true) && (value.template !== undefined ? ((((typeof value.template === 'string')) || ((value.template === null)))) : true) && (value.scheme !== undefined ? ((((typeof value.scheme === 'string')) || ((value.scheme === null)))) : true) && (value.legend !== undefined ? ((((typeof value.legend === 'string')) || ((value.legend === null)))) : true) && (value.grids !== undefined ? (((Array.isArray(value.grids) && value.grids.every((value) => ((typeof value === 'string')))) || ((value.grids === null)))) : true) && (value.data !== undefined ? (((Array.isArray(value.data) && value.data.every((value) => ((typeof value === 'string')))) || ((value.data === null)))) : true) && (value.fillzoom !== undefined ? ((((typeof value.fillzoom === 'number' && Number.isFinite(value.fillzoom))) || ((value.fillzoom === null)))) : true)) || ((typeof value === 'object' && value !== null && !Array.isArray(value)) && (value.format === 'pbf') && ((Array.isArray(value.vector_layers) && value.vector_layers.every((value) => ((typeof 
// value === 'object' && value !== null && !Array.isArray(value)) && (typeof value.id === 'string') && (typeof value.fields === 'object' && value.fields !== null && !Array.isArray(value.fields) && !(value.fields instanceof Date) && !(value.fields instanceof Uint8Array)) && (Object.entries(value.fields).every(([key, value]) => (local_1.test(key) ? 
// (true) : true))) && (value.description !== undefined ? ((((typeof value.description === 'string')) || ((value.description === null)))) : true) && (value.maxzoom !== undefined ? ((((typeof value.maxzoom === 'number' && Number.isFinite(value.maxzoom))) || ((value.maxzoom === null)))) : true) && (value.minzoom !== undefined ? ((((typeof value.minzoom === 'number' && Number.isFinite(value.minzoom))) || ((value.minzoom === null)))) : true)))) && (Array.isArray(value.vector_layers) && value.vector_layers.every((value) => ((typeof value === 'object' && value !== null && !Array.isArray(value)) && (typeof value.id === 'string') && (typeof value.fields === 'object' && value.fields !== null && 
// !Array.isArray(value.fields) && !(value.fields instanceof Date) && !(value.fields instanceof Uint8Array)) && (Object.entries(value.fields).every(([key, value]) => (local_2.test(key) ? (true) : true))) && (value.description !== undefined ? ((((typeof value.description === 'string')) || ((value.description === null)))) : true) && (value.maxzoom !== undefined ? ((((typeof value.maxzoom === 'number' && Number.isFinite(value.maxzoom))) || ((value.maxzoom === null)))) : true) && (value.minzoom !== undefined ? ((((typeof value.minzoom === 'number' && Number.isFinite(value.minzoom))) || ((value.minzoom === null)))) : true))))) && (typeof value.name === 'string') && (typeof value.tilejson === 'string') && Array.isArray(value.tiles) && value.tiles.every((value) => ((typeof value === 'string'))) && (value.version !== undefined ? ((((typeof value.version === 'string')) || ((value.version === null)))) : true) && (value.description !== undefined ? ((((typeof value.description === 'string')) || ((value.description === null)))) : true) && (value.minzoom !== undefined ? ((((typeof value.minzoom === 'number' && Number.isFinite(value.minzoom))) || ((value.minzoom === null)))) : true) && (value.maxzoom !== undefined ? ((((typeof value.maxzoom === 'number' && Number.isFinite(value.maxzoom))) || ((value.maxzoom === null)))) : true) && (value.bounds !== undefined ? (((Array.isArray(value.bounds) && value.bounds.every((value) => ((typeof value === 'number' && Number.isFinite(value))))) || ((value.bounds === null)))) : true) && (value.center !== undefined 
// ? (((Array.isArray(value.center) && value.center.every((value) => ((typeof value === 'number' && Number.isFinite(value))))) || ((value.center === null)))) : true) && (value.attribution !== undefined ? ((((typeof value.attribution === 'string')) || ((value.attribution === null)))) : true) && (value.template !== undefined ? ((((typeof value.template === 'string')) || ((value.template === null)))) : true) && (value.scheme !== undefined ? ((((typeof value.scheme === 'string')) || ((value.scheme === null)))) : true) && (value.legend !== undefined ? ((((typeof value.legend === 'string')) || ((value.legend === null)))) : true) && (value.grids !== undefined ? (((Array.isArray(value.grids) && value.grids.every((value) => ((typeof value === 'string')))) || ((value.grids === null)))) : true) && (value.data !== undefined ? (((Array.isArray(value.data) && value.data.every((value) => ((typeof value === 'string')))) || ((value.data === null)))) : true) && (value.fillzoom !== undefined ? ((((typeof value.fillzoom === 'number' && Number.isFinite(value.fillzoom))) || ((value.fillzoom === null)))) : true)))
//  )
// }

You should still write minimal tests around these structures if you're unsure of the validation behavior, but if you come across any issues, be sure to submit an GH issue (I will look into it).
Cheers!

[jessekrubin]

Sounds like a plan! I think typebox's type system is wildly powerful!