How to convert your JavaScript object literals to Typescript

What is an object literal?

A JavaScript object literal is a comma-separated list of name-value pairs encapsulated inside curly braces, kind of like a JSON structure.

let student = { 
  id: 1056,
  name: 'Bazuu',
  email: '[e-mail]'
}  
console.log(student.name)
// Bazuu
console.log(student.email)
// [e-mail]
console.log(student.phone)
// undefined (javascript)

The above snippet demonstrates how you can declare an object literal and access its contents. The above only applies in a JavaScript environment so if we want to convert it to typescript we will have to first change the file extension from .js to .ts

let student = { 
  id: 1056,
  name: 'Bazuu',
  email: '[e-mail]'
}  
console.log(student.name)
// Bazuu
console.log(student.email)
// [e-mail]
console.log(student.phone)
// undefined (typescript)
// Property 'phone' does not exist on type '{ id: number; name: string; email: string; }'.ts(2339)
student1.city = 'Nairobi' 
console.log(student.city)
// Property 'city' does not exist on type '{ id: number; name: string; email: string; }'.ts(2339)

On trying to access the object member "phone" after the conversion, typescript threw an error. I wasn't also able to add a new object member "city" either.

Strategies for converting to typescript.

We can make use of two strategies when converting our object literals to typescript. The first strategy will be the any type and the second strategy will be by using an interface.

Strategy 1: using type any

let student:any = { 
  id: 1056,
  name: 'Bazuu',
  email: '[e-mail]'
}  
console.log(student.name)
// Bazuu
console.log(student.email)
// [e-mail]
console.log(student.phone)
// undefined 
student1.city = 'Nairobi' 
console.log(student.city)
// Nairobi

When you use type any, all errors which were thrown earlier will disappear, meaning that you can access the non-existing member and you can also add new members to your object literal.

Using type any will temporarily "fix" the errors thrown but is an anti-pattern because is removes all the type checking which is provided by Typescript.

Strategy 2: Using an interface

interface StudentInterface {
  id: number;
  name: string;
  email: string;
  phone?: number;
  city?: string;
}

let student1: StudentInterface = {
  id: 1056,
  name: "Bazuu",
  email: "[e-mail]"
};
console.log(student1.name);
// Bazuu

let student2: StudentInterface = {
  id: 1192,
  name: "Morio",
  email: "[e-mail]"
};
console.log(student2.id);
// 1192

let student3: StudentInterface = {
  id: 1345,
  name: "Zenga",
  email: "[e-mail]",
  city: "Nairobi"
};
console.log(student3.city);
// Nairobi

A good way to declare the member objects inside your object literals is through an interface. It makes your code look clean and you also get type safety and code documentation which improves the overall developer experience as the project grows with time.

You can also include an optional object member inside the interface so that typescript doesn't throw an error incase it doesn't get the specified object member.
You can also opt to declare your interfaces in a different file then import them in order to separate the interfaces and code logic.

I hope this short write up was helpful to you and happy coding!!

Comments

[CuriousDev]

When you are using interfaces, can you also just add a property, which is not part of the initialized object, like you can do with JavaScript? For example, if you add the phone property, which is not part of any of the initalized objects, but made optional in the interface definition.