{"id":1412,"date":"2021-11-17T22:38:59","date_gmt":"2021-11-17T21:38:59","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1412"},"modified":"2021-11-17T22:42:04","modified_gmt":"2021-11-17T21:42:04","slug":"extend-vs-implements-in-typescript","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/11\/17\/extend-vs-implements-in-typescript\/","title":{"rendered":"‘extend’ VS ‘implements’ in TypeScript"},"content":{"rendered":"\n

What is the difference between extends<\/code> and implements<\/code> ?<\/p>\n\n\n\n

class Media {\n  format: string;\n}\nclass Video extends Media {}\nclass Image implements Media {}<\/code><\/pre>\n\n\n\n
To put in simpler terms:<\/p>\n\n\n\n
extends: <\/strong><\/em>The class get all these methods and properties from the parent, so you don’t have to implement.<\/p>\n\n\n\n
implements<\/strong><\/em>: The class has to implement methods and properties.<\/p>\n\n\n\n
other said :<\/p>\n\n\n\n
  • extends<\/code><\/strong> means:<\/li><\/ul>\n\n\n\n
    The\u00a0new class is a child<\/strong>. It gets benefits coming with inheritance. It has all properties, methods as its parent. It can override some of these and implement new, but the parent stuff is already included. The child class (which is extended) will\u00a0inherit<\/strong>\u00a0all the properties and methods of the class it extends<\/p>\n\n\n\n
    • implements<\/code><\/strong> means:<\/li><\/ul>\n\n\n\n
      The new class<\/strong> can be treated as the same “shape”<\/em><\/strong>, while it is not a child<\/strong> : The class which uses the implements<\/code> keyword will need to implement<\/strong> all the properties and methods of the class which it implements<\/code><\/p>\n\n\n\n
      <\/div>\n\n\n\n
      Example<\/h4>\n\n\n\n
      Let\u00b4s observe this short line of code<\/p>\n\n\n\n
      class Person {\n    name: string;\n    age: number;\n}\nclass Child  extends Person {}\n\nclass Man implements Person {}<\/code><\/pre>\n\n\n\n
      When transpiling, we will have a compilation error saying:<\/p>\n\n\n\n
      Class ‘Man’ incorrectly implements interface ‘Person’.<\/p>
      Property ‘name’ is missing in type ‘Man’.<\/p><\/blockquote>\n\n\n\n
      And that’s because interfaces lack implementation.
      So When we implement<\/code> a class then we only take its “contract” without the implementation. In the current example, to fix the issues, we  need to do this :<\/p>\n\n\n\n
      class Man implements Person {\n    name: string;\n    age: number;\n}<\/code><\/pre>\n\n\n\n
      <\/p>\n\n\n\n
      Bottom line is that in most cases we will want to extend<\/code> another class and not to implement<\/code> it.<\/p>\n","protected":false},"excerpt":{"rendered":"
      What is the difference between extends and implements ? To put in simpler terms: extends: The class get all these methods and properties from the parent, so you don’t have to implement. implements: The class has to implement methods and properties. other said : extends means: The\u00a0new class is a child. It gets benefits coming with inheritance. It has […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[83],"tags":[331,393,395,394,372],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1412"}],"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=1412"}],"version-history":[{"count":3,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1412\/revisions"}],"predecessor-version":[{"id":1415,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1412\/revisions\/1415"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}