In Typescript you can declare that all elements in an array are of the same type like this:
const theArray: MyInterface[]
Is there anything similar you can do that declares that ALL of an object's property values must be of the same type? (without specifying every property name)
For example, I'm currently doing this:
interface MyInterface {
name:string;
}
const allTheThingsCurrently = {
first: <MyInterface>{name: 'first thing name' },
second: <MyInterface>{name: 'second thing name' },
third: <MyInterface>{name: 'third thing name' },
//...
};
...note how I have to specify <MyInterface>
for every single property. Is there any kind of shortcut for this? i.e. I'm imagining something like this...
const allTheThingsWanted:MyInterface{} = {
first: {name: 'first thing name' },
second: {name: 'second thing name' },
third: {name: 'third thing name' },
//...
};
MyInterface{}
is the part that's invalid code and I'm looking for a way to do with less redundancy, and optionally the extra strictness that prevents any other properties being adding to the object of a differing type.
In TypeScript, object is the type of all non-primitive values (primitive values are undefined , null , booleans, numbers, bigints, strings). With this type, we can't access any properties of a value.
To dynamically access an object's property:Use keyof typeof obj as the type of the dynamic key, e.g. type ObjectKey = keyof typeof obj; . Use bracket notation to access the object's property, e.g. obj[myVar] .
Built-in Type Definitions TypeScript includes declaration files for all of the standardized built-in APIs available in JavaScript runtimes. This includes things like methods and properties of built-in types like string or function , top-level names like Math and Object , and their associated types.
In typescript the type keyword defines an alias to a type. We can also use the type keyword to define user defined types.
interface Thing {
name: string
}
interface ThingMap {
[thingName: string]: Thing
}
const allTheThings: ThingMap = {
first: { name: "first thing name" },
second: { name: "second thing name" },
third: { name: "third thing name" },
}
The downside here is that you'd be able to access any property off of allTheThings
without any error:
allTheThings.nonexistent // type is Thing
This can be made safer by defining ThingMap
as [thingName: string]: Thing | void
, but that would require null checks all over the place, even if you were accessing a property you know is there.
const createThings = <M extends ThingMap>(things: M) => things
const allTheThings = createThings({
first: { name: "first thing name" },
second: { name: "second thing name" },
third: { name: "third thing name" },
fourth: { oops: 'lol!' }, // error here
})
allTheThings.first
allTheThings.nonexistent // comment out "fourth" above, error here
The createThings
function has a generic M
, and M
can be anything, as long as all of the values are Thing
, then it returns M
. When you pass in an object, it'll validate the object against the type after the extends
, while returning the same shape of what you passed in.
This is the "smartest" solution, but uses a somewhat clever-looking hack to actually get it working. Regardless, until TS adds a better pattern to support cases like this, this would be my preferred route.
Some alternatives for single level (flat) objects:
const exampleObj: { [k: string]: string } = {
first: 'premier',
second: 'deuxieme',
third: 'troisieme',
}
const exampleObj: Record<string, string> = {
first: 'premier',
second: 'deuxieme',
third: 'troisieme',
}
const exampleObj: Record<'first' | 'second' | 'third', string> = {
first: 'premier',
second: 'deuxieme',
third: 'troisieme',
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With