Type definition for properties and object literal in Typescript

This tutorial guides you on type definition for properties and object literal in Typescript and Angular. Let’s see how to declare types for properties and object literal using typescript in Angular code.

Type definition for properties – Example

To define property and its type, you need to define the name of the property and declare it’s type in the following way. For example, “name” is the property name and “string” is the type definition , the property initialized with value “sneppets“.

export class ComponentClassName implements OnInit {

  name: string = "sneppets";  
  
  constructor() { }

  ngOnInit(): void {
  }

}

Of course, you can use String Interpolation to output this data in to the template as shown below.

{{name}}

Type definition for object literal in Typescript Example

In the above section you had learnt how to define property of type string and its initialization. Similarly, there is way to define type for the property if the property is object literal. For example, userDetail is a property which represents user object and we define type using JavaScript object within curly braces as shown below.

Note, the type definition {email: string, firstName: string, lastName: string} is not the value and it is TypeScript’s syntax for defining the type to make sure that user object may have only this type.

Therefore, you need to use “:” , then type definition, then “=” and finally, initialize with the value as shown below.

export class ComponentClassName implements OnInit {

  name: string = "sneppets";  

  userDetail: {email: string, firstName: string, lastName: string} = {
    email: "[email protected]",
    firstName: "Administrator",
    lastName: "Admin"
  };
  
  constructor() { }

  ngOnInit(): void {
  }

}

Of course, you can use String Interpolation to output this object literal data in to the template of the ComponentClass as shown below.

{{userDetail.email}} {{userDetail.firstName}} {{userDetail.lastName}}

Note, to access userDetail outside this class, you need to make some more changes. For example, if you have the following declaration in your component class.

export class ComponentClassName implements OnInit {

  userDetail: {email: string, firstName: string, lastName: string};
  
  constructor() { }

  ngOnInit(): void {
  }

}

Let’s say if parent component need to pass some data to this component, then you need to add input property using @Input decorator in this component to receive the data that is passed from parent component (Let’s say AppComponent).

@Input() userDetail: {email: string, firstName: string, lastName: string};

Next, you need to use Property Binding in the parent component’s template to pass data from parent to this component as shown below.

<app-child-component *ngFor="let u of userArray"
                        [user] = "u"></app-child-component>

That’s it. You had learnt type definition for properties and object literal in Typescript i.e., how to do type definition for properties of type string and type definition for properties of type object literal in TypeScript.

Hope it helped 🙂

Also See:

References:

Angular Docs