Creating a Jsonifiable type that aligns with static interfaces: A step-by-step guide

Question

Creating a Jsonifiable type that aligns with static interfaces: A step-by-step guide

When working with Typescript, there are 3 types that share similarities as they are composed of primitive types, maps, and arrays:

type Color1 = { [component: string]: number }

type Color2 = {
  green: number
  red: number
  blue: number
}

interface Color3 {
  green: number
  red: number
  blue: number
}

Is it possible to create a type that encompasses all of the definitions above?

The straightforward approach does not cover Color3:

type JsonPrimitive = string | number | boolean | null
type JsonifiableObject = { [Key in string]?: Jsonifiable }
type JsonifiableArray = readonly Jsonifiable[]
type Jsonifiable = JsonPrimitive | JsonifiableObject | JsonifiableArray

const color1 = {green: 1, red: 2, blue: 3} as Color1 as Jsonifiable
const color2 = {green: 1, red: 2, blue: 3} as Color2 as Jsonifiable
const color3 = {green: 1, red: 2, blue: 3} as Color3 as Jsonifiable

This results in:

Conversion of type 'Color3' to type 'Jsonifiable' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'Color3' is not comparable to type 'JsonifiableObject'.
    Index signature for type 'string' is missing in type 'Color3'.

typescript types

Answer 1

Answer №1

It seems that there is no specific type available that functions in the desired manner. If you have an object type with a string index signature such as JsonifiableObject (which should be defined as {[k: string]: Jsonifiable} or possibly

{[k: string]: Jsonifiable | undefined}

, depending on whether you truly want to utilize the ? modifier), then it will not align with an interface that lacks an index signature. Interfaces do not automatically come with implicit index signatures. This behavior is detailed in microsoft/TypeScript#15300 and is intentional.

You will either need to concede or find a workaround for this issue.

If you require an interface type to match something like this, you must modify the index signature to use a generic key instead. This means transforming your Jsonifiable type into a JsonifiableValidate<T> type where

T extends JsonifiableValidate<T>

only if T is valid. It essentially becomes a generic constraint:

type JsonifiableValidate<T> = T extends JsonPrimitive ? T :
    T extends readonly (infer A)[] ? readonly (JsonifiableValidate<A>)[] :
    T extends Function ? never :
    T extends object ? { [K in keyof T]: JsonifiableValidate<T[K]> } : never;

Since generic types lack type argument inference (a known missing feature outlined in microsoft/TypeScript#32794), you will need to create a generic helper identity function like so:

const jsonifiable = <T,>(t: JsonifiableValidate<T>) => t;

Instead of using const color: Jsonifiable = {⋯}, you would write const color = jsonifiable({⋯}) like this:

const color = jsonifiable({ green: 1, red: 2, blue: 3 } as Color3); // fine

Access the code via the provided Playground link.

Answer 2

It seems that there is no specific type available that functions in the desired manner. If you have an object type with a string index signature such as JsonifiableObject (which should be defined as {[k: string]: Jsonifiable} or possibly

{[k: string]: Jsonifiable | undefined}

, depending on whether you truly want to utilize the ? modifier), then it will not align with an interface that lacks an index signature. Interfaces do not automatically come with implicit index signatures. This behavior is detailed in microsoft/TypeScript#15300 and is intentional.

You will either need to concede or find a workaround for this issue.

If you require an interface type to match something like this, you must modify the index signature to use a generic key instead. This means transforming your Jsonifiable type into a JsonifiableValidate<T> type where

T extends JsonifiableValidate<T>

only if T is valid. It essentially becomes a generic constraint:

type JsonifiableValidate<T> = T extends JsonPrimitive ? T :
    T extends readonly (infer A)[] ? readonly (JsonifiableValidate<A>)[] :
    T extends Function ? never :
    T extends object ? { [K in keyof T]: JsonifiableValidate<T[K]> } : never;

Since generic types lack type argument inference (a known missing feature outlined in microsoft/TypeScript#32794), you will need to create a generic helper identity function like so:

const jsonifiable = <T,>(t: JsonifiableValidate<T>) => t;

Instead of using const color: Jsonifiable = {⋯}, you would write const color = jsonifiable({⋯}) like this:

const color = jsonifiable({ green: 1, red: 2, blue: 3 } as Color3); // fine

Access the code via the provided Playground link.

Creating a Jsonifiable type that aligns with static interfaces: A step-by-step guide

Answer №1

Similar questions

Having trouble with reactjs and typescript? Getting the error message that says "Type 'string' is not assignable to type 'never'"?

Encountering the following error message: "E11000 duplicate key error collection"

The expect.objectContaining() function in Jest does not work properly when used in expect.toHaveBeenCalled()

Understanding Typescript typings and npm packages can greatly improve your development workflow

Difficulty persisting when removing accents/diacritics from a string in Angular with IE 11

AngularJS: The 'myInputName' property is not defined and cannot be read

Failure to nest interfaces in Angular when mapping JSON responses

Is it possible to invoke a function exclusively on the center item within an ngx-owl-carousel?

Ways to incorporate debounce time into an input search field in typescript

Using setState as a parameter in a personalized hook in React/Next.js while incorporating TypeScript

If I exclusively utilize TypeScript with Node, is it possible to transpile it to ES6?

What is the best way to define a category in order to utilize a saved string as a variable for referencing it?

Retrieving class properties in typescript

The use of React hooks in an application saga led to an issue where, despite using history.push, the component

Tips for Providing a Generic Type to a Component Imported Using Next.js Dynamic

What are some ways to implement Material UI's Chip array to function similar to an Angular Chip Input?

Expand the font manually

Creating TypeScript types using GraphQL code generation: Generating types without any other code

Using Vuelidate with Vue 3, vue-class-component, and TypeScript combination

Using the useRef validation can lead to errors when trying to reference the current value against an input