Introduction
Objects are one of the most common data types to work with in JavaScript. An object has key-value pairs. The keys represents properties. And each property has a corresponding value. TypeScript has Object Types too.
Defining an Object in JavaScript
First, let's see an example of an object in JavaScript. The example below is a simple object that has name and age properties.
// JavaScript
let person = {
name: "Maria",
age: 23
}
Defining an Object in TypeScript
Now, let's take a look at how object types are defined in TypeScript.
// TypeScript
let person: { name: string; age: number } = {
name: "Maria",
age: 23
}
What exactly is happening here? We first assigned an object type { name: string; age: number } to the person variable. And then we defined the object based on the object type.
Two Things Worth Noting
First. The object type definition { name: string; age: number } appears similar to how an object is written. However, take note that after each property there's a semi-colon (;), instead of a comma (,) as it is with an actual object.
The second thing to note is that the type of each property has been assigned to it using the : Type syntax. The name property has been assigned a string type while the age property has been assigned a number type.
Example Scenarios
If you add a new property to the person object which is not in the type definition, TypeScript will prompt us. Let's see what happens when we add a new property isFriendly to the person object.
// TypeScript
let person: { name: string; age: number } = {
name: "Maria",
age: 23
isFriendly: true
} // Object literal may only specify known properties,
// and 'isFriendly' does not exist in type '{ name: string; age: number; }'
Read the TypeScript prompt added as a comment in the code snippet above. This prompt is due to the absence of the isFriendly property in the object type definition { name: string; age: number }.
To fix this, you need to add the isFriendly property to the object type definition (as shown below). Since the value of the new property is true (which is a boolean), you will assign to it a type of boolean. Once you do this, the prompt will disappear.
// TypeScript
let person: { name: string; age: number; isFriendly: boolean } = {
name: "Maria",
age: 23,
isFriendly: true
}
Let's consider another scenario. If you were to pass a string to the age property, which is assigned a number type, TypeScript will throw an error.
TypeScript
let person: { name: string; age: number; isFriendly: boolean } = {
name: "Maria",
age: "Twenty three",
isFriendly: true
}
// Type 'string' is not assignable to type 'number'.
TypeScript prompts us that it is expecting a number for the age property but you have instead passed a string to it.
Conclusion
In this article, you have learned how to define and use object types in TypeScript. You also learned some scenarios where explicitly defining object types might be useful.
Technically, in simple programs, you don't need to do this. TypeScript can automatically infer the types of the properties for you. However, when working with a library like React, when we need to pass props from one components to another, this knowledge will come in handy.
Thanks for reading.