Warning: session_start(): open(/tmp/sess_d9695533cf0783adc6fb4766edcf1d2b, 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 Extend An Interface Excluding Property In TypeScript - LearnShareIT

How To Extend An Interface Excluding Property In TypeScript

Extend an Interface excluding a Property in TypeScript

When you extend an interface excluding a property in TypeScript, learning how to remove keys from that interface helps you to config your type easier. So how to do it? Let’s go into detail now.

How to extend an interface excluding property in TypeScript

Using omit utility type

Omit utility type will help you to construct an interface by getting all properties and removing some specific property.

Syntax:

omit<type,keys>

Parametes:

  • type: the type that you want to config
  • keys: all the keys that you want to remove from the type

Example:

interface infor {
  name:string
  age: number;
  country: string;
  ready: boolean
}

type person = Omit<infor,'ready'>;
//excluded name properties
// type person {
// name:string
//   age: number;
//   country: string;
// }

You can apply to omit utility type to use exclude a property by passing in keys parameter that property.

Example:

interface infor {
  name:string
  age: number;
  country: string;
  ready: boolean
}

type person = Omit<infor,'ready'>;
// excluded name properties
// type person {
// name:string
//   age: number;
//   country: string;
// }

const Togban:person={
    name:'Togban',
    age:18,
    country:'VietNam'
}

console.log(Togban)

Output:

{ name: 'Togban', age: 18, country: 'VietNam' }

Here I create a person type that extends from the infor interface and excludes ready property. So that person only has name, age, and country property left. You can also exclude multiple properties by using the ‘|’ symbol like the example below:

interface infor {
  name:string
  age: number;
  country: string;
  ready: boolean;
favourite:string
}

type person = Omit<infor,'ready'|'favourite'>;
 
const Togban:person={
    name:'Togban',
    age:18,
    country:'VietNam'
}

console.log(Togban)

Output:

{ name: 'Togban', age: 18, country: 'VietNam' }

Here I exclude multiple properties: ‘ready’ and ‘favourite’ properties.

And when you omit property, you can also add new property when you create a new interface that extends from the parent interface like this:

interface infor {
  name:string
  age: number;
  country: string;
  ready: boolean;
favourite:string
}

interface personDetail extends Omit<infor, 'ready'|'favourite'> {
  id: number[],
  university: string,
  majors: string
}
 
const Togban:personDetail={
    name:'Togban',
    age:18,
    country:'VietNam',
    id:[0,1,2,3,4,5],
    university:'HOU',
    majors:'IT'
}

console.log(Togban)

Output:

{
  name: 'Togban',
  age: 18,
  country: 'VietNam',
  id: [ 0, 1, 2, 3, 4, 5 ],
  university: 'HOU',
  majors: 'IT'
}

You can also override the property type using this technique:


interface infor {
  name:string
  age: number;
  country: string;
  id:number
}

interface setIdType extends Omit<infor, 'id'> {
  id:number[]
}

const person: setIdType={
    name:'Togban',
    age:18,
    country:'VietNam',
    id:[0,1,2,3,4,5]
}

console.log(person)

Output:

{
  name: 'Togban',
  age: 18,
  country: 'VietNam',
  id: [ 0, 1, 2, 3, 4, 5 ]
}

Summary

In this tutorial, I showed you how to extend an interface excluding property in TypeScript. You can omit utility types to remove the property you want to exclude. If you have any questions or problems, leave your comment below. Thank you for your reading!

Maybe you are interested:

Leave a Reply

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