Interfaces (within Typescript) are used in a variety of ways.<\/p>\n
Defining expectations\/restrictions<\/strong><\/p>\n We can define an interface such as IPoint<\/p>\n Just like other languages, we can then implement this interface and we’re required to duplicate the properties or methods declared on it. <\/p>\n For example here’s an implementation<\/p>\n We’ve used public constructor parameters hence implementing the IPoint interface.<\/p>\n Now we can create an instance of the Point like this<\/p>\n Within TypeScript an interface can also simply be thought of as shaping<\/em> our data, so in this example we could create an anonymous class of type IPoint like this<\/p>\n We can also declare an instance of an anonymous type like this<\/p>\n Typescript supports “duck typing” so we can create functions such as<\/p>\n and we can pass a type which implements an IPoint or a duck typed anonymous type, for example<\/p>\n Because of duck typing we do have an issue whereby the following two interfaces are structurally equivalent<\/p>\n and hence this will compile and run<\/p>\n In such a case, the interfaces have the same properties and names and are structurally equivalent.<\/p>\n Things get a little more interesting with interfaces and anonymous types, in that we can write something like this<\/p>\n Obviously it’s not an IPoint or I2d, but it could be. In this example it’d create an anonymous type but we could cast the type like this, but this will fail to compile due to the missing y<\/em> property.<\/p>\n Empty interfaces<\/strong><\/p>\n We can also define empty interfaces, such as <\/p>\n In this case this is equivalent to an any<\/em> and hence does not cause a compile time error and output<\/em> will display “Hello World”.<\/p>\n Type erasure<\/strong><\/p>\n Interfaces within Typescript are erased at compile\/transpile time, hence whilst they aid in ensuring our types are as expected, once compiled to JavaScript they’re removed.<\/p>\n Hence no runtime type checking exists for such types.<\/p>\n","protected":false},"excerpt":{"rendered":" Interfaces (within Typescript) are used in a variety of ways. Defining expectations\/restrictions We can define an interface such as IPoint interface IPoint { x: number; y: number; } Just like other languages, we can then implement this interface and we’re required to duplicate the properties or methods declared on it. For example here’s an implementation […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[46],"tags":[],"class_list":["post-7074","post","type-post","status-publish","format-standard","hentry","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7074"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7074\/revisions"}],"predecessor-version":[{"id":7150,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7074\/revisions\/7150"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\ninterface IPoint {\r\n x: number;\r\n y: number;\r\n}\r\n<\/pre>\n\r\nclass Point implements IPoint {\r\n constructor(public x: number, public y: number) { \r\n }\r\n}\r\n<\/pre>\n\r\n\/\/ p is a Point\r\nvar p = new Point(2, 3);\r\n\/\/ p is declared as an IPoint\r\nvar p: IPoint = new Point(2, 3);\r\n<\/pre>\n
\r\nvar p: IPoint = {x : 2, y: 4};\r\n<\/pre>\n\r\nvar p = {x : 2, y: 4};\r\n<\/pre>\n\r\nfunction output(p: IPoint) {\r\n \/\/\r\n}\r\n<\/pre>\n\r\noutput({x : 2, y: 4});\r\n<\/pre>\n\r\ninterface IPoint {\r\n x: number;\r\n y: number;\r\n}\r\n\r\ninterface I2d {\r\n x: number;\r\n y: number;\r\n}\r\n<\/pre>\n\r\nvar i2d: I2d = {x : 2, y: 4};\r\nvar p: IPoint = i2d;\r\n<\/pre>\n\r\nfunction whatIsThis() {\r\n return {x:2};\r\n}\r\n<\/pre>\n\r\nfunction whatIsThis() {\r\n return <IPoint>{x:2};\r\n}\r\n<\/pre>\n\r\ninterface IEmpty {}\r\n\r\nfunction output(e: IEmpty) {\r\n console.log(e);\r\n}\r\n\r\noutput("Hello World");\r\n<\/pre>\n