Value dependant types

[chrjohannesen]

Hey!

Just found this gem of a repo, and thought I'd give a whirl. It's working incredibly well and could potentially save a lot of work! Nice job 🎉

I've run into a headscratcher as I can't seem to find out how to solve the following TS types with Typebox. I've built a query builder of sort which means the JSON object I can pass through have different variations.

As an example:

// The type of value changes dependant on the operator value
const body = {
	set: 'dog',
	filters: [
		{
			field: 'breed',
			operator: 'in',
			value: ['Beagle', 'Labrador']
		},
		{
			field: 'weight',
			operator: 'range',
			value: {
				from: 0,
				to: 100
			}
		},
	]
};

Another variation of the same issue could be this, which can be cumbersomely handled by splitting the validation.

import Ajv from 'ajv'
import { Static, Type } from "@sinclair/typebox";

const ajv = new Ajv();

function StringEnum<T extends string[]>(values: [...T]) {
	return Type.Unsafe<T[number]>({ type: 'string', enum: values })
}

const ImportSchema = Type.Object({
	importIds: Type.Array(Type.Integer())
})

const UserSchema = Type.Object({
	userIds: Type.Array(Type.Integer())
})

const DefinitionSchemas = {
	import: ImportSchema,
	user: UserSchema,
}

const ConfigSchema = Type.Object({
	campaignId: Type.Number(),
	type: StringEnum(['import', 'user']),
	definition: Type.Unknown()
})


const segment: Static<typeof ConfigSchema> = {
	"type": "user",
	"campaignId": 1,
	"definition": {
		"userIds": [1, 2, 3]
	}
}

if (
	ajv.validate(ConfigSchema, segment)
	&& ajv.validate(DefinitionSchemas[segment.type], segment.definition)
) {
	console.log('Hooraaay!')
}

console.log(ajv.errors)

So my question really is, how do I create a type that changes dependant on a value of a sibling with validation for the TypeCompiler or ajv?

Hope to hear from anyone smarter than me! 🤞🏼

[chrjohannesen]

I've also tried something like this, which don't work:

const ImportSchema = Type.Object({
	type: Type.Literal('import'),
	definition: Type.Object({
		importIds: Type.Array(Type.Integer())
	})
})

const UserSchema = Type.Object({
	type: Type.Literal('import'),
	definition: Type.Object({
		userIds: Type.Array(Type.Integer())
	})
})

export const ConfigSchema = Type.Intersect([
	Type.Object({
		campaignId: Type.Number(),
	}),
	Type.Union([ImportSchema, UserSchema])
])

[chrjohannesen]

Hey @sinclairzx81!

Thank you so much for taking the time to compose this example. It's super neat! That actually fixes the issues I had on that part. As you also state, there's gonna be some validation errors that are not applicable in certain scenarios, as the Union type will not discard whatever filter is not in "use". I'll have a crack at that, but I think it's kinda the same issue I have here:

const ImportSchema = Type.Object({
	importIds: Type.Array(Type.Integer())
})

const UserSchema = Type.Object({
	userIds: Type.Array(Type.Integer())
})

const Definitions = Type.Object({
	import: ImportSchema,
	user: UserSchema
})

const ConfigSchema = Type.Object({
	type: Type.KeyOf(Definitions),
	campaignId: Type.Number(),
	definition: Type.Pick(Definitions, Type.KeyOf(Definitions))
});

Again the goal is to only have the definition given by the key ("import" or "user"). I think I'm treading a level of TS types and interfaces out of my league for now.

Nonetheless thank you so much for your time! 🎉

[chrjohannesen]

It's essentially this I want:

interface UserDefinition {
	userIds: Id[];
}

interface UserSegmentation {
	type: 'user';
	definition: UserDefinition
}

interface ImportDefinition {
	importIds: Id[]
}

interface ImportSegmentation {
	type: 'import',
	definition: ImportDefinition
}

type SegmentationContrains = UserSegmentation | ImportSegmentation;

interface Segmentation<T extends SegmentationContrains> {
	type: T['type'];
	referenceId: Id;
	campaignId: Id;
	definition: T['definition']
}

[sinclairzx81]

@chrjohannesen Hey no problem :)

I'd recommend maybe trying to implement your structures with TypeScript first and use that as a reference to guide you through the creation of the corresponding TypeBox type. In both examples, I think generics may be the most idealized way to express a common structure that is dependent on a varying type (relevant both to filters and to configs).

So, just to revisit the previous filter, here would be the TypeScript only generics approach to express that.

TypeScript

TypeScript Link Here

// -----------------------------------------------------------
// TypeScript
// -----------------------------------------------------------
type Value = string | number | boolean

export interface Equals<T> {
   operator: 'Equals',
   key: keyof T,
   value: Value
}
export interface In<T> {
   operator: 'In',
   key: keyof T,
   value: Value[]
}
export type Operator<T> = Equals<T> | In<T>

export interface Filter<T> {
   filters: Operator<T>[]
}

// -----------------------------------------------------------
// Example
// -----------------------------------------------------------

interface Vector {
  x: number,
  y: number,
  z: number
}

interface Customer {
  id: string
  name: string,
  email: string
}

type VectorFilter   = Filter<Vector>
type CustomerFilter = Filter<Customer>


function vectorFilter(value: VectorFilter) {}

vectorFilter({
  filters: [
    { operator: 'Equals', key: 'x', value: 1 },
    { operator: 'In', key: 'y', value: [1, 2, 3] }
  ]
})

function customerFilter(value: CustomerFilter) {}

customerFilter({
  filters: [
    { operator: 'Equals', key: 'id', value: 1 },
    { operator: 'In', key: 'name', value: ['dave', 'smith'] }
  ]
})

TypeBox

So once you have the TypeScript types working, representing that in TypeBox should be a lot easier. The following implements the above using TypeBox.

TypeScript Link Here

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

// -----------------------------------------------------------
// TypeBox
// -----------------------------------------------------------

export const Value = Type.Union([Type.String(), Type.Number(), Type.Boolean()])

export const Equals = <T extends TObject>(schema: T) => Type.Object({
  operator: Type.Literal('Equals'),
  key: Type.KeyOf(schema),
  value: Value
})

export const In = <T extends TObject>(schema: T) => Type.Object({
  operator: Type.Literal('In'),
  key: Type.KeyOf(schema),
  value: Type.Array(Value)
})
export const Operator = <T extends TObject>(schema: T) => Type.Union([
  Equals(schema),
  In(schema)
])

export const Filter = <T extends TObject>(schema: T) => Type.Object({
  filters: Type.Array(Operator(schema))
})


// -----------------------------------------------------------
// Example
// -----------------------------------------------------------

const Vector = Type.Object({
  x: Type.Number(),
  y: Type.Number(),
  z: Type.Number()
})
const Customer = Type.Object({
  id: Type.String(),
  name: Type.String(),
  email: Type.String()
})

export const VectorFilter   = Filter(Vector)
export const CustomerFilter = Filter(Customer)

function vectorFilter(value: Static<typeof VectorFilter>) {}

vectorFilter({
  filters: [
    { operator: 'Equals', key: 'x', value: 1 },
    { operator: 'In', key: 'y', value: [1, 2, 3] }
  ]
})

function customerFilter(value: Static<typeof CustomerFilter>) {}

customerFilter({
  filters: [
    { operator: 'Equals', key: 'id', value: 1 },
    { operator: 'In', key: 'name', value: ['dave', 'smith'] }
  ]
})

I am actually hoping to provide some tools around this to enable automatic TS > TB translation (as I do think it's generally easier to reason about complex generic types using familiar TypeScript syntax). I am hoping to provide code translation via an official website one day (likely when TypeBox reaches 1.0), but for now, manually constructing TB types is the only option (which can be quite complex)

Hope this helps

[chrjohannesen]

That's the approach I'm at right now and it's looking good, but I couldn't wrap my head around the generic types in TypeBox albeit your examples are super helpful. So this is super helpful and definitely answers the question about generic types.

I'll give it another go later. Thanks @sinclairzx81! 👍

[chrjohannesen]

I can't mark your response as the answer, so I've marked the thread!