{"id":1351,"date":"2021-11-04T10:30:30","date_gmt":"2021-11-04T09:30:30","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1351"},"modified":"2021-11-04T10:32:00","modified_gmt":"2021-11-04T09:32:00","slug":"classes-vs-interfaces-in-typescript","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/11\/04\/classes-vs-interfaces-in-typescript\/","title":{"rendered":"Classes vs Interfaces in TypeScript"},"content":{"rendered":"\n

Classes and interfaces are powerful structures that facilitate not just object-oriented programming but also type-checking in TypeScript. A class<\/em><\/strong> is a blueprint from which we can create objects that share the same configuration – properties and methods. An interface<\/em><\/strong> is a group of related properties and methods that describe an object, but neither provides implementation nor initialisation for them.<\/p>\n\n\n\n

Since both of these structures define what an object looks like, both can be used in TypeScript to type our variables. The decision to use a class or an interface truly depends on our use case: type-checking only ? implementation details (typically via creating a new instance)? or even both!<\/strong> <\/p>\n\n\n\n

We can use classes for type-checking and the underlying implementation – whereas we cannot with an interface.<\/em> <\/span>Understanding what we can get from each structure will easily let us make the best decision that will enhance our code and improve our developer experience.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Using TypeScript class<\/h4>\n\n\n\n

ES6 introduced class<\/code> officially to the JavaScript ecosystem. TypeScript boosts JavaScript classes with extra power such as type-checking and static<\/code> properties. This also means that whenever we transpile our code to whatever target JavaScript of our choice, the transpiler will keep all of our class<\/code> code present in the transpiled file.<\/p>\n\n\n\n

Let\u2019s look at an example of defining a class named PizzaMaker<\/code>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

PizzaMaker<\/code> is a simple class. It has a static<\/code> method called create<\/code>. What makes this method special is that we can use it without creating an instance of the class. We just invoke the method on the class directly :<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Then, PizzaMaker.create()<\/code> returns a new object – not a class – with a <\/span><\/em>name<\/code><\/span><\/em> <\/strong>and toppings<\/code><\/strong><\/span><\/em> properties defined from the object passed to it as argument.<\/p>\n\n\n\n

If PizzaMaker<\/code> did not define create<\/code> as a static<\/code> method, then to use the method we would need to create an instance of PizzaMaker<\/code>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We get the same output we had with create<\/strong><\/span><\/code> as a static<\/code><\/strong><\/span> method. Being able to use TypeScript classes with and without an existing instance of a class makes them extremely versatile and flexible. Adding static<\/strong><\/span><\/code> properties and methods to a class makes them act like a singleton<\/strong><\/em> while defining non-static properties and methods make them act like a factory<\/strong><\/em>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Now, unique to TypeScript is the ability to use classes for type-checking. Let\u2019s declare a class that defines what a <\/em><\/span>Pizza<\/span><\/code><\/em> looks like:<\/em><\/span><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In the Pizza<\/strong><\/span><\/code> class definition, we are using a handy TypeScript shorthand to define class properties from the arguments of the constructor – it saves a lot of typing! Pizza<\/strong><\/span><\/code> can create objects that have a name<\/code> <\/strong><\/span>and a toppings<\/strong><\/span><\/code> property:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Therefore, we can use the <\/span>Pizza<\/span><\/code> class to type-check the <\/span>event<\/span><\/code> argument of <\/span>PizzaMaker.create(...)<\/span><\/code>:<\/span><\/em><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We\u2019ve made PizzaMaker<\/strong><\/span><\/code> much more declarative, and hence, much more readable. Not only that, but if we need to enforce the same object structure defined in Pizza<\/span><\/code> in other places, we now have a portable construct to do so! Just append export<\/strong><\/code><\/span> to the definition of Pizza<\/code> and you get access to it from anywhere in your application.<\/p>\n\n\n\n

export class Pizza {\n  constructor(public name: string, public toppings: string[]) {}\n}<\/code><\/pre>\n\n\n\n
Using Pizza<\/strong><\/span><\/code> as a class is great if we want to define and create a Pizza<\/strong><\/span><\/code>, but what if we only want to define the structure of a Pizza<\/code><\/strong><\/span> but we\u2019d never need to instantiate it? That\u2019s when interface<\/code> <\/strong><\/span>comes handy!<\/p><\/blockquote>\n\n\n\n
<\/div>\n\n\n\n
Using TypeScript interface<\/h4>\n\n\n\n
Unlike classes, an interface<\/strong><\/span><\/code> is a virtual structure that only exists within the context of TypeScript. The TypeScript compiler uses interfaces solely for type-checking purposes. Once your code is transpiled to its target language, it will be stripped from its interfaces – JavaScript isn\u2019t typed, there\u2019s no use for them there. Also we will use interface<\/strong> only on development cycle and for testing purpose .<\/p>\n\n\n\n
While a class may define a factory<\/code> or a singleton<\/code> by providing initialisation to its properties and implementation to its methods, an interface<\/code> <\/strong>is simply a structural contract that defines what the properties of an object should have as a name and as a type. How you implement or initialise the properties declared within the interface<\/code> is not relevant to it. Let\u2019s see an example by transforming our Pizza<\/code> <\/span>class into a Pizza<\/span><\/code> interface:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 our current code provides type-checking for Pizza<\/code> but can\u2019t create a pizza.  For doing that, we have to first initialise an object of type interface.  Then we can use this object with the static <\/span>function create()<\/em><\/span> of  the class PizzaMaker. <\/p>\n","protected":false},"excerpt":{"rendered":"
Classes and interfaces are powerful structures that facilitate not just object-oriented programming but also type-checking in TypeScript. A class is a blueprint from which we can create objects that share the same configuration – properties and methods. An interface is a group of related properties and methods that describe an object, but neither provides implementation […]<\/p>\n","protected":false},"author":1,"featured_media":1360,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,83],"tags":[371,374,376,372,375,373],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1351"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1351"}],"version-history":[{"count":3,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1351\/revisions"}],"predecessor-version":[{"id":1362,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1351\/revisions\/1362"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1360"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}