In Typescript, all of these 3 types are similar, in that they are only made of primitive types, maps and arrays:
<code>type Color1 = { [component: string]: number }
type Color2 = {
green: number
red: number
blue: number
}
interface Color3 {
green: number
red: number
blue: number
}
</code>
<code>type Color1 = { [component: string]: number }
type Color2 = {
green: number
red: number
blue: number
}
interface Color3 {
green: number
red: number
blue: number
}
</code>
type Color1 = { [component: string]: number }
type Color2 = {
green: number
red: number
blue: number
}
interface Color3 {
green: number
red: number
blue: number
}
How does one design a type that will match all of the definitions above?
The obvious definition doesn’t work for Color3
:
<code>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
</code>
<code>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
</code>
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
yielding:
<code>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'.
</code>
<code>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'.
</code>
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'.