TypeScript: 5 ways to initialize a typed object

1. Using Object Literal

The easiest way to create an object for defined types or interfaces in TypeScript is with an object literal. This can be achieved by defining an object and enclosing the properties and their values in curly braces.

Example:

interface Member {
  fullName: string
  subscriptionID: number
}

const johnny: Member = {
  fullName: 'Johnny',
  subscriptionID: 45631,
}

console.log(johnny.name) //🚫 NO ERROR: Object property is 'undefined'.

2a. Using Class: Constructor

The constructor function creates an object with types or interfaces using the new keyword. It allows us to define properties and methods for an object.

Example:

interface Member {
  fullName: string
  subscriptionID: number
}

class MemberClass implements Member {
  constructor(public fullName: string, public subscriptionID: number) {}
}

const johnny: Member = new MemberClass('Johnny', 45631)

2b. Using Class: Default Values

In TypeScript, we have the ability to define default values of a class properties.

Example:

interface Member {
  fullName: string
  subscriptionID: number
}

class MemberClass implements Member {
  fullName = 'Johnny'
  subscriptionID = 45631
}

const johnny: Member = new MemberClass()
console.log(johnny)

3. Using Typescript utility type: Record<Keys, Type>

Using theRecord we can construct an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type. The JavaScript's standard built-in object Object.create()method creates a new object with the specified prototype object and properties.

Example:

interface Member {
  fullName: string
  subscriptionID: number
}

const johnny: Record<string, unknown> | Member = Object.create(null)
johnny.fullName = 'Johnny'
johnny.subscriptionID = 45631
johnny.email = ''
console.log(johnny.email) //🚫 NO ERROR: Object property name and value is present.

4. Using Typescript utility type: Partial<Type>

Using the Partial we can construct a type with all properties of Type set to optional. This utility will return a type that represents all subsets of a given type.

Example:

interface Member {
  fullName: string
  subscriptionID: number
}

const johnny: Partial<Member> = Object.create(null)
johnny.fullName = 'Johnny'
johnny.subscriptionID = 45631
johnny.email = ''

console.log(johnny.email) //🚫 NO ERROR: Object property name and value is present.

5.Using Type Assertion

We can use type assertion {} as Member to instruct TypeScript that the empty object literal should be treated as an object that conforms to the Member interface. We can then assign values to its properties fullName and subscriptionID just like we would with any other object.

However, it's worth noting that using type assertion to initialize objects like this can be error-prone, since it relies on the developer to ensure that the object complies with the interface. Generally, it's safer to use object literal syntax to explicitly define properties and their types, as we showed in the option 1 :

Example:

interface Member {
  fullName: string
  subscriptionID: number
}

const johnny = {} as Member

johnny.fullName = 'Johnny'
johnny.subscriptionID = 45631
console.log(johnny.name) //🚫 NO ERROR: Object property name and value is present.

Note: Using option 1 instead of option 5, TypeScript compiler can help catch any type errors or missing properties at compile time, rather than relying on the programmer to catch them at runtime.

Summary:

we have seen :

• Using Object Literal
• Using Class: Constructor
• Using Class: Default Values
• Using Typescript utility type: Record<Keys, Type>
• Using Typescript utility type: Partial<Type>
• Using Type Assertion