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

Embedding a TypeScript React component within another one

Matching TypeScript values and types does not function as intended

I am currently experiencing a problem with deleting documents in Firebase Firestore using React, Typescript, and Redux. Despite the code running, the document continues to exist in

Enable the Angular button only when the radio button has been selected

Hold on until the page is reloaded: React

Loading and unloading an Angular 6 component

Utilizing Angular Services to Share Events and Reusing Components Multiple Times on a Page

Is there a way to use Lodash to quickly return the same value if a condition is met using the ternary operator

Tips on sending various properties to makeStyles() using TypeScript

Identify the category of the component

Using href with IconButtonProps is not supported

Managing Prisma error handling in Express

Exploring Iteration of TypeScript Arrays in ReactJS

Which symbol or character corresponds to the public "get symbol" method?

Troubleshooting Next.js and Tailwind CSS Breakpoints: What's causing the

Utilizing Sharepoint Online SPFX Web parts with React: A guide to selecting scripts dynamically based on environment requirements

Presentation of information with loading and error scenarios

Finding the index of a chosen option in Angular

What could be causing the error message "why can't shows read property

What exactly does "context" refer to in the context of TypeScript and React when using getServerSideProps?