TypeScript: Should I use Types or Interfaces?

Should I use Types or Interfaces?🤔 Most developers still have confusion when it comes to selecting between types or interfaces. Some people say interfaces are more performant (is it ?🧐), types and interfaces are similar (that’s incorrect !🫣). Let’s dig…


This content originally appeared on Level Up Coding - Medium and was authored by Chamith Madusanka

Should I use Types or Interfaces?🤔 Most developers still have confusion when it comes to selecting between types or interfaces. Some people say interfaces are more performant (is it ?🧐), types and interfaces are similar (that’s incorrect !🫣). Let’s dig deep to clear up those confusions and determine what to use for your next TypeScript project🤞.

Performance and Spee‍️d ️🎛️

I have seen some posts suggest interfaces are faster than types. If you prioritise speed in your code, it may be more beneficial to use Interfaces instead of types. When we refer to ‘speed’ in this context, we’re actually talking about the speed of the type checker rather than the speed of your actual code. In this case, using interfaces may result in faster type checking compared to types. This distinction is particularly important in large projects, where the type checking process can become slow and cumbersome if there are a high number of items to type check🤔.

If you want to verify above, you can conduct a benchmark test by comparing the compilation speed of a thousand types versus a thousand interfaces to determine which one compiles faster.
If you conduct this benchmark test, you may observe that there is no significant difference in the compilation speed between types and interfaces. Both interfaces and types are compiled to similar JavaScript code by the TypeScript compiler and do not significantly affect the compilation time👌😎.

Therefore, the choice between interfaces and types should not be based solely on their impact on compilation time. No performance difference between Interfaces and Types✅.

Define the structure of an object 🛠️

The main reason for defining a particular structure for an object is to enable static type checking, which ensures that the variable holding your data and the data you expect to be stored in it match, especially in the case of complex data.

Let’s explore two approaches for defining an TypeScript object structure.

Describing shape of Person object using type and interface

Using Types and Interfaces, we can accomplish similar things when defining an object structure✅.

Extending Types and Interfaces 🖇️

Extending a type or interface can be useful when creating a new interface that inherits the properties and methods of an existing interface, while also adding its own unique properties and methods.

Let’s see how we can do this for types and interfaces,

Extending a interface
Extending an interface

According to TypeScript docs, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.🤔

But we can indirectly extend a type by using intersection.🫣

Extending a types using intersection

However, it is usually better to use interface when you have a type that needs to be extended from another type or class that needs to be implemented from another interface✅.

Adding new fields to an existing Type, Interface ➕

If you define an interface or type, and later want to add a new field to it, types and interfaces work in different ways.

Let’s see how we can do this for types and interfaces,

Adding new fields to an existing interface

Here you can see two interfaces having same name got merged✅. That is called Declaration merging.

A type cannot be changed after being created

Here you can see, Types cannot be appended to after they have been created.✅.

Types and Interfaces have different ways of handling merging. You can use these two approaches depending on your use case. If you want to create an interface that is apeneded through multiple places of your code base then use an interface. If you want to restrict modification once an interface is created, use a type.

Summary 🧳

  • There is no performance difference between types and interfaces.
  • It’s generally recommended to use types instead of interfaces, unless you require a particular feature that is unique to interfaces.
  • If you need a type to extend another type, then consider using an interface.
  • If you want to create an interface that is apeneded through multiple places of your code base then use an interface.(Declaration merging)
  • If you want to restrict modification once an interface is created, use a type.
  • If you want something predictable that will never behave unexpectedly or exhibit strange behaviour in certain situations, then you should probably use types.

Thank you for reading this post. If you do have any questions please add as a comment. If you like this post, give a Cheer!!! 👏

Happy Learning ❤️!


TypeScript: Should I use Types or Interfaces? was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Chamith Madusanka


Print Share Comment Cite Upload Translate Updates
APA

Chamith Madusanka | Sciencx (2023-04-12T13:57:59+00:00) TypeScript: Should I use Types or Interfaces?. Retrieved from https://www.scien.cx/2023/04/12/typescript-should-i-use-types-or-interfaces/

MLA
" » TypeScript: Should I use Types or Interfaces?." Chamith Madusanka | Sciencx - Wednesday April 12, 2023, https://www.scien.cx/2023/04/12/typescript-should-i-use-types-or-interfaces/
HARVARD
Chamith Madusanka | Sciencx Wednesday April 12, 2023 » TypeScript: Should I use Types or Interfaces?., viewed ,<https://www.scien.cx/2023/04/12/typescript-should-i-use-types-or-interfaces/>
VANCOUVER
Chamith Madusanka | Sciencx - » TypeScript: Should I use Types or Interfaces?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/12/typescript-should-i-use-types-or-interfaces/
CHICAGO
" » TypeScript: Should I use Types or Interfaces?." Chamith Madusanka | Sciencx - Accessed . https://www.scien.cx/2023/04/12/typescript-should-i-use-types-or-interfaces/
IEEE
" » TypeScript: Should I use Types or Interfaces?." Chamith Madusanka | Sciencx [Online]. Available: https://www.scien.cx/2023/04/12/typescript-should-i-use-types-or-interfaces/. [Accessed: ]
rf:citation
» TypeScript: Should I use Types or Interfaces? | Chamith Madusanka | Sciencx | https://www.scien.cx/2023/04/12/typescript-should-i-use-types-or-interfaces/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.