Right now, as of TS4.1, there is no specific, concrete type in TypeScript (let's call it Values
) which represents the values assignable to that values
property. For the record, I'm interpreting this as: any string key is acceptable; if the key ends with -width
or -height
, the property must be a number
; otherwise it must be a string
. There is no requirement that such keys must show up as triplets; for example, if "key"
is a key, then it is not required that "key-height"
or "key-width"
be present.
Perhaps when microsoft/TypeScript#42192 gets addressed you'll be able to use "pattern" template literals (as implemented in microsoft/TypeScript#40598) of the form `${string}-width`
as keys. For now you cannot.
UPDATE for TS4.4: even with pattern template literal index signatures as implemented in microsoft/TypeScript#44512, you can't make a specific type for Values
. You can now represent the part where arbitrary strings ending in -height
or -width
must be number
:
type NumericValues = {
[key: `${string}-${"height" | "width"}`]: number;
}
but there's no way to represent the "everything else needs to be a string
" constraint... see microsoft/TypeScript#17867. So the following doesn't work:
type BadValues = {
[key: `${string}-${"height" | "width"}`]: number; // error! incompatible
[key: `${string}`]: string; // can't say "everything else" here
}
Oh well.
So you can only represent your restriction as a generic constraint, of the form Values<K>
for an appropriate K
:
type Values<K extends string> = {
[P in K]: P extends `${string}-${"height" | "width"}` ? number : string
};
If K
is the set of string-valued keys in Values<K>
, then each property value must be either a number
or a string
depending on whether or not K
ends in "-height"
/"-width"
.
Instead of being forced to annotate a value as type Values<K>
for some concrete K
, you could use a helper function to make the compiler infer K
for you:
const asValues = <K extends string>(values: Values<K>) => values;
Let's try it:
const sizes = asValues({
"thumbnail": "xxxx",
"thumbnail-width": 150,
"thumbnail-height": 150,
"medium": "xxx",
"medium-width": 500,
"medium-height": 500,
}); // okay
const badSizes = asValues({
"toenail": 123, // error! Type 'number' is not assignable to type 'string'
"toenail-width": 456,
"psychic": "yyy",
"psychic-height": "tall" // Type 'string' is not assignable to type 'number'
})
Looks good. sizes
is accepted, but badSizes
results in errors on the properties whose types are incorrect.
Of course the fact that we're using generics means that you have to drag around the generic type parameter K
everywhere you want to enforce this restriction. This could become unwieldy if used for your whole code base. Instead you might want to just use Values<K>
to validate object literals passed-in, and then when you manipulate them you widen to the closest specific type that TypeScript can represent, like a string
-indexable type whose properties are string | number
:
type WideValues = { [k: string]: string | number };
const wideValues: WideValues = sizes; // okay
So you use Values<K>
for validation, and WideValues
for manipulation afterward.
Playground link to code