{"id":112723,"date":"2023-04-12T09:00:34","date_gmt":"2023-04-12T03:30:34","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=112723"},"modified":"2023-04-12T09:50:18","modified_gmt":"2023-04-12T04:20:18","slug":"typescript-interfaces","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/","title":{"rendered":"TypeScript Interfaces"},"content":{"rendered":"

One of the key features of TypeScript is its support for interfaces, which provide a way to define the shape of objects in your code. In this article, we’ll take a deep dive into TypeScript interfaces and how they can be used to improve the quality of your code.<\/p>\n

What is an interface in TypeScript?<\/h3>\n

In TypeScript, an interface is a way to describe the shape of an object. It defines a contract that an object must adhere to, specifying the names and types of its properties and methods. Interfaces provide a level of abstraction and ensure that code adheres to a specific set of rules.<\/p>\n

For example, let’s say we have an object representing a car. We can define an interface for the car object that specifies its properties and their types:<\/p>\n

interface DataFlair_Car {\r\n make: string;\r\n model: string;\r\n year: number;\r\n color: string;\r\n}\r\n<\/pre>\n
In this interface, we have defined a car object’s make, model, year, and color properties and their respective types. Any object that adheres to this interface must have these properties and their corresponding types. This allows us to write more robust code, any object we receive that is of type DataFlair_Car will have these properties.<\/p>\n
Using interfaces in TypeScript<\/h3>\n
We can use interfaces in TypeScript in a variety of ways. One common use case is to define function parameters and return types. Let’s say we have a function that takes a car object and returns its make and model as a string:<\/p>\n
function DataFlair_getMakeAndModel(car: Car): string {\r\n return `${car.make} ${car.model}`;\r\n}\r\n<\/pre>\n
Output<\/strong>–<\/p>\n
Toyota Camry<\/div>\n
In this example, we use the Car interface as the type for the car parameter. This ensures that any object passed to this function must adhere to the Car interface, including the make and model properties we access in the function body.<\/p>\n
Another use case for interfaces is to define classes. When we define a class that implements an interface, we say that the class must have all the properties and methods defined in the interface. For example, let’s define a class that implements the DataFlair_Car interface:<\/p>\n
class Toyota implements DataFlair_Car {\r\n make = 'Toyota';\r\n model: string;\r\n year: number;\r\n color: string;\r\n\r\n\r\n constructor(model: string, year: number, color: string) {\r\n   this.model = model;\r\n   this.year = year;\r\n   this.color = color;\r\n }\r\n}\r\n<\/pre>\n
In this example, we have defined a Toyota class that implements the DataFlair_Car interface. The class has a make property set to ‘Toyota,’ as well as the model, year, and color properties required by the interface. We also have a constructor method that takes the required parameters and assigns them to the class properties.<\/p>\n
Optional properties<\/h3>\n
Sometimes, we may want to define an interface that has optional properties. To do this, we can use the (?) operator to mark a property as optional. For example, let’s say we have an interface for a DataFlair_Person object:<\/p>\n
interface DataFlair_Person {\r\n name: string;\r\n age: number;\r\n email?: string;\r\n}\r\n<\/pre>\n
In this interface, we have defined the name and age properties as required, but the email property is optional. Any object that adheres to this interface must have a name and age property but may or may not have an email property.<\/p>\n
When we use an interface with optional properties, we need to check if the property exists before we try to access it. We can do this using the in-the operator or the optional chaining operator ?.. For example:<\/p>\n
function DataFlair_sendEmail(person: Person) {\r\n if (person.email) {\r\n   console.log(`Sending email to ${person.name} at ${person.email}`);\r\n } else {\r\n   console.log(`No email address found for ${person.name}`);\r\n }\r\n}\r\n<\/pre>\n
Output<\/strong>–<\/p>\n
Sending email to John at dataflair@gmail.com<\/div>\n
In this example, we check if the email property exists on the person object before using it. If it does exist, we log a message with the person’s name and email address. If it doesn’t exist, we log a message saying no email address was found.<\/p>\n
Read-only properties<\/h3>\n
Sometimes, we may want to define an interface with read-only properties. This means that the properties can only be set when the object is created, and cannot be changed afterward. We can do this by using the read-only keyword before the property name. For example:<\/p>\n
interface DataFlair_Point {\r\n readonly x: number;\r\n readonly y: number;\r\n}\r\n<\/pre>\n
In this interface, we have defined two read-only properties, x, and y. This means that once a DataFlair_Point object is created, the values of these properties cannot be changed.<\/p>\n
Extending interfaces in TypeScript<\/h3>\n
We can also extend interfaces in TypeScript to create new interfaces that inherit properties and methods from existing interfaces. This can be useful when we have multiple interfaces that share some common properties or methods. For example, let’s say we have an interface for a car:<\/p>\n
interface DataFlair_Car {\r\n make: string;\r\n model: string;\r\n year: number;\r\n color: string;\r\n}\r\n<\/pre>\n
We can create a new interface ElectricCar that extends the DataFlair_Car interface and adds an electricRange property:<\/p>\n
interface ElectricCar extends DataFlair_Car {\r\n electricRange: number;\r\n}\r\n<\/pre>\n
In this example, the ElectricCar interface inherits all of the properties from the DataFlair_Car interface (make, model, year, and color) and adds a new property electricRange.<\/p>\n
Use of Interface, Interface Inheritance, Interface vs inheritance<\/h3>\n
In TypeScript, interfaces are a way of defining the shape of an object, including its properties and methods. They are often used to describe the types of function parameters and return values and to enforce type safety in your code.<\/p>\n
Here are some key points about the use of interfaces in TypeScript:<\/p>\n
1. Implementing an interface in TypeScript:<\/strong><\/p>\n
To implement an interface, a class must include all of the properties and methods defined in the interface. This can be done using the implements keyword. For example:<\/p>\n
class Student implements DataFlair_Person {\r\n name = 'John';\r\n age = 21;\r\n sayHello() {\r\n   console.log(`Hello, my name is ${this.name}`);\r\n }\r\n}\r\n<\/pre>\n
2. Interface inheritance in TypeScript:<\/strong><\/p>\n
Interfaces can inherit from other interfaces using the extends keyword. This allows you to build more complex interfaces from simpler ones. For example:<\/p>\n
interface DataFlairAnimal {\r\n name: string;\r\n makeSound: () => void;\r\n}\r\n\r\n\r\ninterface Dog extends Animal {\r\n breed: string;\r\n}\r\n<\/pre>\n
3. TypeScript Interface vs inheritance:<\/strong><\/p>\n
While interfaces can describe objects’ shapes, inheritance is a way of reusing code and building more complex objects from simpler ones. In TypeScript, you can use interfaces and inheritance to achieve similar goals. Still, interfaces are often preferred for defining contracts between different parts of your code, while inheritance is more appropriate for building class hierarchies and sharing implementation details.<\/p>\n
Excess Property Checks<\/h3>\n
In TypeScript, excess property checks are a type-checking feature that helps ensure type safety when working with objects. They prevent errors that can occur when an object has additional properties that are not defined in its type.<\/p>\n
When TypeScript checks the type of an object, it performs an excess property check to ensure that the object doesn’t have any extra properties that are not defined in its type. This check can prevent errors when an object has extra properties that are not expected.<\/p>\n
For example, consider the following interface:<\/p>\n
interface DataFlair_Person {\r\n name: string;\r\n age: number;\r\n}\r\n<\/pre>\n
If we create an object that conforms to this interface, TypeScript will ensure that it has the correct properties:<\/p>\n
const person: DataFlair_Person = {\r\n name: 'John',\r\n age: 21,\r\n};\r\n<\/pre>\n
However, if we try to add an extra property to the object, TypeScript will throw an error:<\/p>\n
const person: DataFlair_Person = {\r\n name: 'John',\r\n age: 21,\r\n gender: 'male', \/\/ Error: Object literal may only specify known properties\r\n};\r\n<\/pre>\n
This error occurs because the DataFlair_Person interface doesn’t include a gender property, and TypeScript is performing an excess property check to ensure that the object doesn’t have any extra properties.<\/p>\n
To work around this error, you can use a type assertion to tell TypeScript that the object has additional properties that are not defined in its type:<\/p>\n
const person: DataFlair_Person = {\r\n name: 'John',\r\n age: 21,\r\n gender: 'male',\r\n} as DataFlair_Person;\r\n<\/pre>\n
While type assertions can be useful in some cases, they can also lead to type safety issues if used improperly. Therefore, avoid using type assertions and instead ensure that your objects conform to the expected type.<\/p>\n
Indexable Types<\/h3>\n
In TypeScript, an indexable type is an interface that describes objects that can be accessed with an index, like an array or an object. It allows you to define a type with a property that can be any type if the property name is a string or a number.<\/p>\n
To define an indexable type, you can use the following syntax:<\/p>\n
interface DataFlair_IndexableType {\r\n [key: string]: any;\r\n}\r\n<\/pre>\n
This defines an interface with any number of properties with string keys and any value type. You can also use a number key instead of a string key to define an indexable array-like object.<\/p>\n
You can use an indexable type to enforce type safety when working with objects with dynamic properties. For example, consider the following interface:<\/p>\n
interface DataFlair_Book {\r\n title: string;\r\n author: string;\r\n [key: string]: any;\r\n}\r\n<\/pre>\n
This interface defines a DataFlair_Book type with a title and author property and any additional properties with string keys.<\/p>\n
You can then create an object that conforms to this type and has additional properties:<\/p>\n
const book: DataFlair_Book = {\r\n title: 'The Lord of the Rings',\r\n author: 'J.R.R. Tolkien',\r\n pages: 1178,\r\n language: 'English',\r\n};\r\n<\/pre>\n
TypeScript will not throw an error in this example because the DataFlair_Book interface includes an index signature that allows additional properties.<\/p>\n
You can also use an indexable type to define more specific types of indexable objects. For example, if you want to define a type for an object with string keys and number values, you can use the following interface:<\/p>\n
interface DataFlair_NumberDictionary {\r\n [key: string]: number;\r\n}\r\n<\/pre>\n
This defines a type with any number of properties with string keys and values that must be numbers.<\/p>\n
In summary, indexable types in TypeScript allow you to define interfaces for objects with dynamic properties while enforcing type safety. They are useful for working with objects with additional properties unknown at compile-time.<\/p>\n
Conclusion<\/h3>\n
In this article, we’ve explored TypeScript interfaces and how they can be used to define the shape of objects in our code. We’ve seen how interfaces can ensure that our code adheres to a specific set of rules and how they can be used to create more maintainable and scalable code.<\/p>\n
By using interfaces, we can write more self-documenting code, as it makes it clear what properties and methods an object should have. Interfaces also help to catch errors at compile time rather than runtime, saving us a lot of time and effort in debugging.<\/p>\n","protected":false},"excerpt":{"rendered":"
One of the key features of TypeScript is its support for interfaces, which provide a way to define the shape of objects in your code. In this article, we’ll take a deep dive into...<\/p>\n","protected":false},"author":581,"featured_media":113025,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27319],"tags":[27353],"class_list":["post-112723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript-tutorials","tag-typescript-interfaces"],"yoast_head":"\nTypeScript Interfaces - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn about TypeScript interfaces and how they can be used to define the shape of objects in our code with examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TypeScript Interfaces - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn about TypeScript interfaces and how they can be used to define the shape of objects in our code with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-12T03:30:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-12T04:20:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-interfaces.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"TypeScript Interfaces - DataFlair","description":"Learn about TypeScript interfaces and how they can be used to define the shape of objects in our code with examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/","og_locale":"en_US","og_type":"article","og_title":"TypeScript Interfaces - DataFlair","og_description":"Learn about TypeScript interfaces and how they can be used to define the shape of objects in our code with examples.","og_url":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-04-12T03:30:34+00:00","article_modified_time":"2023-04-12T04:20:18+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-interfaces.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"TypeScript Interfaces","datePublished":"2023-04-12T03:30:34+00:00","dateModified":"2023-04-12T04:20:18+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/"},"wordCount":1513,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-interfaces.webp","keywords":["TypeScript Interfaces"],"articleSection":["TypeScript Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/typescript-interfaces\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/","url":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/","name":"TypeScript Interfaces - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-interfaces.webp","datePublished":"2023-04-12T03:30:34+00:00","dateModified":"2023-04-12T04:20:18+00:00","description":"Learn about TypeScript interfaces and how they can be used to define the shape of objects in our code with examples.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/typescript-interfaces\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-interfaces.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-interfaces.webp","width":1200,"height":628,"caption":"typescript interfaces"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/typescript-interfaces\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"TypeScript Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/typescript-tutorials\/"},{"@type":"ListItem","position":3,"name":"TypeScript Interfaces"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam6\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=112723"}],"version-history":[{"count":7,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112723\/revisions"}],"predecessor-version":[{"id":113028,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112723\/revisions\/113028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/113025"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=112723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=112723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=112723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}