TypeScript object Type

In this tutorial, you’ll learn about the TypeScript object type and how to write more accurate object type declarations.

Introduction to TypeScript object type

The TypeScript object type represents all values that are not in primitive types.

The following are primitive types in TypeScript:

1. string
2. number
3. bigint
4. boolean
5. null
6. undefined
7. symbol

The following shows how to declare a variable that holds an object:

let employee: object;

employee = {
    firstName: 'Narayan',
    lastName: 'Selvan',
    jobTitle: 'Front End Developer',
    age: 25
};

console.log(employee);

Output:

{
    firstName: 'Narayan',
    lastName: 'Selvan',
    jobTitle: 'Front End Developer',
    age: 25
}

If you reassign a primitive value to the employee object, you’ll get an error :

employee = "Kumar";

Error:

error TS2322: Type '"Kumar"' is not assignable to type 'object'.

The employee object is an object type with a fixed list of properties. If you attempt to access a property that doesn’t exist on the employee object, you’ll get an error:

console.log(employee.joiningDate);

Error:

error TS2339: Property 'joiningDate' does not exist on type 'object'.

Note: that the above statement works perfectly fine in JavaScript and returns undefined instead.

To explicitly specify properties of the employee object, you first use the following syntax to declare the employee object:

let employee: {
    firstName: string;
    lastName: string;
    jobTitle: string;
    age: number;
};

And then you assign the employee object to a literal object with the described properties:

employee = {
    firstName: 'Narayan',
    lastName: 'Selvan',
    jobTitle: 'Front End Developer',
    age: 25
};

Or you can combine both syntaxes in the same statement like this:

let employee: {
    firstName: string;
    lastName: string;
    jobTitle: string;
    age: number; 
} = {
    firstName: 'Narayan',
    lastName: 'Selvan',
    jobTitle: 'Front End Developer',
    age: 25
};

object vs. Object

TypeScript has another type called Object with the letter O in uppercase. It’s important to understand the differences between them.

The object type represents all non-primitive values while the Object type describes the functionality of all objects.

For example, the Object type has the toString() and valueOf() methods that can be accessible by any object.

The empty type {}

TypeScript has another type called empty type denoted by {} , which is quite similar to the object type.

The empty type {} describes an object that has no property on its own. If you try to access a property on such object, TypeScript will issue a compile-time error:

let details: {};
details.name = 'Ram';

Error:

error TS2339: Property 'name' does not exist on type '{}'.

But you can access all properties and methods declared on the Object type, which is available on the object via prototype chain:

let details: {} = {};
console.log(details.toString());

Output:

[object Object]

Conclusion

1. The empty type {} refers to an object that has no property on its own.
2. The TypeScript object type represents any value that is not a primitive value.
3. The Object type, however, describes functionality that available on all objects.