Warning: session_start(): open(/tmp/sess_ce4ac91946ce81cc3220f83e4beef97e, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Override The Type Of An Interface Property In TypeScript - LearnShareIT

How To Override The Type Of An Interface Property In TypeScript

Override the Type of an Interface property in TypeScript

This tutorial relates to the type of property in the interface. What can you do if you want to override the Type of an Interface property in TypeScript? Let’s go into detail.

Override the type of an interface property in TypeScript

Method: Use utility types (omit)

You can use utility types (omit) to achieve this.

Syntax:

Omit<type,keys>

Parameters:

  • type: interface that you want to extend 
  • keys: all property that you want to remove from interface when extend

Omit utility type will help you reconstruct a type by removing all properties from the type and eliminating keys.

Example:

interface person {
  address: string;
  name: string;
  age: number;
  id: number;
}
 
interface detailPerson extends Omit<person,'address'> {
  address: {
    homeNumber:number;
    country: string;
  };
}
 
const James: detailPerson= {
address:{
  homeNumber:12,
  country:'England'
},
name :'James',
age:25,
id:2314
};

Here I create an interface type ‘person’, which is the parent interface. Then I create detailPerson, a child interface that extends all properties from the person interface. Still, with omit, I remove the address property and use the new address property, which has the type as an object.

If you want to override more than one property on the interface, you can use “|” to divide all the properties you want to override type when passing in omit.

Example:

interface person {
  address: string;
  name: string;
  age: number;
  id: number;
}
 
interface detailPerson extends Omit<person,'address'| 'age'> {
  address: {
    homeNumber:number;
    country: string;
  };
  age:string
}
 
const James: detailPerson= {
address:{
  homeNumber:12,
  country:'England'
},
name :'James',
age:'25',
id:2314
};

Here I divide the address and age attribute by the “|” symbol.

If you just override without deleting the old type. You will get an error:

Example:

interface person  {
name : string;
 age : number;
country : string;
}
interface persons extends person{
  name:string[];
}

The error:

Interface 'persons' incorrectly extends interface 'person'.
Types of property 'name' are incompatible.
Type 'string[]' is not assignable to type 'string'.

If you want to create a new type instead of an interface, override the origin type. You can follow this way:

Example:  

interface person {
  address: string;
  name: string;
  age: number;
  id: number;
}
 
type detailPerson = Omit<person,'address'>&{
  address: {
    homeNumber:number;
    country: string;
  };
 };
 
const James: detailPerson= {
address:{
  homeNumber:12,
  country:'England'
},
name :'James',
age:25,
id:2314
};

Summary

In this tutorial, I showed you how to override the type of an interface property in TypeScript. You can use use utility types (omit) to create a new interface or new type. If you have any questions or problems, please comment below, I will answer as possible. Thanks for your reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *