{"id":375,"date":"2024-07-03T10:55:01","date_gmt":"2024-07-03T10:55:01","guid":{"rendered":"https:\/\/andrearethy.com\/blog\/?p=375"},"modified":"2024-07-03T10:55:06","modified_gmt":"2024-07-03T10:55:06","slug":"how-to-understand-typescript-types-swift-structs-and-other-concepts","status":"publish","type":"post","link":"https:\/\/andrearethy.com\/blog\/how-to-understand-typescript-types-swift-structs-and-other-concepts\/","title":{"rendered":"How to Understand TypeScript Types, Swift Structs and Other Concepts"},"content":{"rendered":"\n<p>Recently, I started using both <a href=\"https:\/\/www.swift.org\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">Swift<\/a> and <a href=\"https:\/\/www.typescriptlang.org\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">TypeScript<\/a> daily for different projects. This made me think about leveraging my existing knowledge to understand new concepts in each language, as I&#8217;m still learning both. As a developer, you might need to learn multiple programming languages, so understanding their similarities and differences can ease your transition and enhance your versatility. This post will compare core concepts in TypeScript and Swift, providing clear explanations.<\/p>\n\n\n\n<p>TypeScript, a statically typed superset of JavaScript, introduces type definitions to improve code quality. We&#8217;ll explore three fundamental concepts today: type, interface, and class. Swift, used for iOS and macOS development, shares some similarities with TypeScript but also has unique features. Comparing these concepts in both languages helped me understand them better.<\/p>\n\n\n\n<p>When coding in TypeScript my biggest question was (in regards to today&#8217;s topic): What is the difference between types and interfaces? For a straightforward introduction to TypeScript types and interfaces without Swift, here&#8217;s a helpful YouTube video I recently came across:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"I Cannot Believe TypeScript Recommends You Do This!\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/oiFo2z8ILNo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">Comparison of types and interfaces in TypeScript<\/figcaption><\/figure>\n\n\n\n<p>On the other hand when I am coding with Swift the same question sounds like this: What is the difference between classes and structs? I have a handy video prepared for answering this question as well:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Swift - Class vs. Struct Explained\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/LtlbB4-6k_U?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">Comparison of classes and structs in Swift<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">TypeScript Types<\/h3>\n\n\n\n<p>The&nbsp;<code><strong>type<\/strong><\/code>&nbsp;keyword in TypeScript is a versatile feature used to define custom types. It can create aliases for primitive types, complex object types, union types, intersection types, and more. This flexibility allows you to create reusable and descriptive types, enhancing code readability and type safety.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Primitive Type Alias: basic data type\n\/\/ ID can be either a string or a number, making it easier to manage variables that can hold both types.\ntype ID = string | number;\n\n\n\/\/ Object Type: structured data type composed of key-value pairs\n\/\/ This defines Point as an object type with x and y properties, both of which are numbers. This can be particularly useful when dealing with coordinates in a 2D space.\ntype Point = {\n  x: number;\n  y: number;\n};\n\n\n\/\/ Union Type:  hold values of different specified types\n\/\/ The Status type can be one of the specified string literals, making it easy to handle different states of an operation.\ntype Status = &quot;success&quot; | &quot;failure&quot; | &quot;pending&quot;;\n\n\n\/\/ Intersection Type: combines multiple types into one\n\/\/ This combines the properties of Name and Contact into a single type Person, which includes both personal and contact information.\ntype Name = {\n  firstName: string;\n  lastName: string;\n};\n\ntype Contact = {\n  email: string;\n  phone: string;\n};\n\ntype Person = Name &amp; Contact;\n\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Primitive Type Alias: basic data type<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ ID can be either a string or a number, making it easier to manage variables that can hold both types.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">type<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">ID<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">string<\/span><span style=\"color: #ABB2BF\"> | <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Object Type: structured data type composed of key-value pairs<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ This defines Point as an object type with x and y properties, both of which are numbers. This can be particularly useful when dealing with coordinates in a 2D space.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">type<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Point<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">x<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">y<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Union Type:  hold values of different specified types<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ The Status type can be one of the specified string literals, making it easy to handle different states of an operation.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">type<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Status<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">&quot;success&quot;<\/span><span style=\"color: #ABB2BF\"> | <\/span><span style=\"color: #98C379\">&quot;failure&quot;<\/span><span style=\"color: #ABB2BF\"> | <\/span><span style=\"color: #98C379\">&quot;pending&quot;<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Intersection Type: combines multiple types into one<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ This combines the properties of Name and Contact into a single type Person, which includes both personal and contact information.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">type<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Name<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">firstName<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">string<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">lastName<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">string<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">type<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Contact<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">email<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">string<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">phone<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">string<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">type<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Person<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Name<\/span><span style=\"color: #ABB2BF\"> &amp; <\/span><span style=\"color: #E5C07B\">Contact<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Swift Struct &amp; Typealias<\/h4>\n\n\n\n<p>In Swift, similar functionality can be achieved using&nbsp;<code>struct<\/code>,&nbsp;<code>enum<\/code>, and&nbsp;<code>typealias<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Struct: For defining object-like structures.\n\/\/ This defines a Point struct with x and y properties.\nstruct Point {\n    var x: Int\n    var y: Int\n}\n\n\n\/\/ Typealias: For creating type aliases.\n\/\/ This creates a type alias ID that can be either String or Int, using a custom Either enum to handle the union type.\ntypealias ID = Either&lt;String, Int&gt;\n\nenum Either&lt;T, U&gt; {\n    case first(T)\n    case second(U)\n}\n\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Struct: For defining object-like structures.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ This defines a Point struct with x and y properties.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">struct<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Point<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">var<\/span><span style=\"color: #ABB2BF\"> x: <\/span><span style=\"color: #E5C07B\">Int<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">var<\/span><span style=\"color: #ABB2BF\"> y: <\/span><span style=\"color: #E5C07B\">Int<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Typealias: For creating type aliases.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ This creates a type alias ID that can be either String or Int, using a custom Either enum to handle the union type.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">typealias<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">ID<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> Either&lt;<\/span><span style=\"color: #E5C07B\">String<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E5C07B\">Int<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">enum<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Either<\/span><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E5C07B\">T<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E5C07B\">U<\/span><span style=\"color: #ABB2BF\">&gt; {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">case<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">first<\/span><span style=\"color: #ABB2BF\">(T)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">case<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">second<\/span><span style=\"color: #ABB2BF\">(U)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">TypeScript Interfaces<\/h3>\n\n\n\n<p>An&nbsp;<code>interface<\/code>&nbsp;in TypeScript defines the shape of an object. It specifies the types of properties an object should have and can also describe function types. Interfaces can extend other interfaces, making them reusable and extendable.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Basic Interface: outlines the structure that an object should follow\n\/\/ This interface defines Point with x and y properties, both of which are numbers. Any object implementing this interface must adhere to this structure.\ninterface Point {\n  x: number;\n  y: number;\n}\n\n\n\/\/ Interface for Function Type: defines the expected signature of a function\n\/\/ SearchFunc is an interface for a function that takes two string parameters and returns a boolean. This can be useful for type-checking functions.\ninterface SearchFunc {\n  (source: string, subString: string): boolean;\n}\n\n\n\/\/ Extending Interfaces: allows one interface to inherit properties from another\n\/\/ Square extends Shape, adding a sideLength property. This allows for a clear and concise definition of related interfaces.\ninterface Shape {\n  color: string;\n}\n\ninterface Square extends Shape {\n  sideLength: number;\n}\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Basic Interface: outlines the structure that an object should follow<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ This interface defines Point with x and y properties, both of which are numbers. Any object implementing this interface must adhere to this structure.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">interface<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Point<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">x<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">y<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Interface for Function Type: defines the expected signature of a function<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ SearchFunc is an interface for a function that takes two string parameters and returns a boolean. This can be useful for type-checking functions.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">interface<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">SearchFunc<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  (<\/span><span style=\"color: #E06C75; font-style: italic\">source<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">string<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">subString<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">string<\/span><span style=\"color: #ABB2BF\">): <\/span><span style=\"color: #E5C07B\">boolean<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Extending Interfaces: allows one interface to inherit properties from another<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Square extends Shape, adding a sideLength property. This allows for a clear and concise definition of related interfaces.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">interface<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Shape<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">color<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">string<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">interface<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Square<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">extends<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Shape<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">sideLength<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Swift Protocol<\/h4>\n\n\n\n<p>In Swift,&nbsp;<code>protocol<\/code>&nbsp;serves a similar purpose to TypeScript&#8217;s&nbsp;<code>interface<\/code>, defining a blueprint for methods, properties, and other requirements for a particular task or piece of functionality.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Protocol Definition\n\/\/ This defines a Drawable protocol with a draw method that conforming types must implement.\nprotocol Drawable {\n    func draw()\n}\n\n\n\/\/ Struct Conforming to Protocol\n\/\/ This Point struct conforms to the Drawable protocol, implementing the draw method.\nstruct Point: Drawable {\n    var x: Int\n    var y: Int\n\n    func draw() {\n        print(&quot;Drawing point at (\\(x), \\(y))&quot;)\n    }\n}\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Protocol Definition<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ This defines a Drawable protocol with a draw method that conforming types must implement.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">protocol<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Drawable<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">func<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">draw<\/span><span style=\"color: #ABB2BF\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Struct Conforming to Protocol<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ This Point struct conforms to the Drawable protocol, implementing the draw method.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">struct<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Point<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">Drawable <\/span><span style=\"color: #ABB2BF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">var<\/span><span style=\"color: #ABB2BF\"> x: <\/span><span style=\"color: #E5C07B\">Int<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">var<\/span><span style=\"color: #ABB2BF\"> y: <\/span><span style=\"color: #E5C07B\">Int<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">func<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">draw<\/span><span style=\"color: #ABB2BF\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #56B6C2\">print<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&quot;Drawing point at (<\/span><span style=\"color: #C678DD\">\\(<\/span><span style=\"color: #ABB2BF\">x<\/span><span style=\"color: #C678DD\">)<\/span><span style=\"color: #98C379\">, <\/span><span style=\"color: #C678DD\">\\(<\/span><span style=\"color: #ABB2BF\">y<\/span><span style=\"color: #C678DD\">)<\/span><span style=\"color: #98C379\">)&quot;<\/span><span style=\"color: #ABB2BF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">TypeScript Classes<\/h3>\n\n\n\n<p>A&nbsp;<code>class<\/code>&nbsp;in TypeScript is a blueprint for creating objects with specific properties and methods. Classes support inheritance, allowing one class to extend another. They can also implement interfaces to enforce a specific structure or behavior.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Basic Class\n\/\/ This Point class includes properties x and y and a move method to change the point's position.\nclass Point {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n\n  move(dx: number, dy: number): void {\n    this.x += dx;\n    this.y += dy;\n  }\n}\n\n\n\/\/ Class Inheritance\n\/\/ Dog extends Animal, overriding the makeSound method to provide a specific implementation.\nclass Animal {\n  name: string;\n\n  constructor(name: string) {\n    this.name = name;\n  }\n\n  makeSound(): void {\n    console.log(&quot;Some generic sound&quot;);\n  }\n}\n\nclass Dog extends Animal {\n  makeSound(): void {\n    console.log(&quot;Bark&quot;);\n  }\n}\n\n\n\/\/ Class Implementing Interface\n\/\/ The Square class implements the draw method as required by the Drawable interface, ensuring it adheres to the contract.\ninterface Drawable {\n  draw(): void;\n}\n\nclass Square implements Drawable {\n  draw() {\n    console.log(&quot;Drawing a square&quot;);\n  }\n}\n\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Basic Class<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ This Point class includes properties x and y and a move method to change the point&#39;s position.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">class<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Point<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">x<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">y<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #C678DD\">constructor<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75; font-style: italic\">x<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">y<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">this<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">x<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">x<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">this<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">y<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">y<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #61AFEF\">move<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75; font-style: italic\">dx<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">dy<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">number<\/span><span style=\"color: #ABB2BF\">): <\/span><span style=\"color: #E5C07B\">void<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">this<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">x<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">+=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">dx<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">this<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">y<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">+=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">dy<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Class Inheritance<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Dog extends Animal, overriding the makeSound method to provide a specific implementation.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">class<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Animal<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">name<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">string<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #C678DD\">constructor<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75; font-style: italic\">name<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">string<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">this<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">name<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">name<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #61AFEF\">makeSound<\/span><span style=\"color: #ABB2BF\">(): <\/span><span style=\"color: #E5C07B\">void<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">console<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">log<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&quot;Some generic sound&quot;<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">class<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Dog<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">extends<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Animal<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #61AFEF\">makeSound<\/span><span style=\"color: #ABB2BF\">(): <\/span><span style=\"color: #E5C07B\">void<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">console<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">log<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&quot;Bark&quot;<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Class Implementing Interface<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ The Square class implements the draw method as required by the Drawable interface, ensuring it adheres to the contract.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">interface<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Drawable<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #61AFEF\">draw<\/span><span style=\"color: #ABB2BF\">(): <\/span><span style=\"color: #E5C07B\">void<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">class<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Square<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">implements<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Drawable<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #61AFEF\">draw<\/span><span style=\"color: #ABB2BF\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">console<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">log<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&quot;Drawing a square&quot;<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Swift Classes<\/h4>\n\n\n\n<p>In Swift, classes are similar to those in TypeScript. They are used to create objects with properties and methods and support inheritance.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Basic Class\n\/\/ This Point class has properties x and y and a move method to update the point's position.\nclass Point {\n    var x: Int\n    var y: Int\n\n    init(x: Int, y: Int) {\n        self.x = x\n        self.y = y\n    }\n\n    func move(dx: Int, dy: Int) {\n        self.x += dx\n        self.y += dy\n    }\n}\n\n\n\/\/ Class Inheritance\n\/\/ The Dog class extends Animal, overriding the makeSound method.\nclass Animal {\n    var name: String\n\n    init(name: String) {\n        self.name = name\n    }\n\n    func makeSound() {\n        print(&quot;Some generic sound&quot;)\n    }\n}\n\nclass Dog: Animal {\n    override func makeSound() {\n        print(&quot;Bark&quot;)\n    }\n}\n\n\n\/\/ Class Conforming to Protocol\n\/\/ The Circle class conforms to the Drawable protocol, implementing the draw method.\nprotocol Drawable {\n    func draw()\n}\n\nclass Circle: Drawable {\n    var radius: Double\n\n    init(radius: Double) {\n        self.radius = radius\n    }\n\n    func draw() {\n        print(&quot;Drawing a circle with radius \\(radius)&quot;)\n    }\n}\n\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Basic Class<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ This Point class has properties x and y and a move method to update the point&#39;s position.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">class<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Point<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">var<\/span><span style=\"color: #ABB2BF\"> x: <\/span><span style=\"color: #E5C07B\">Int<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">var<\/span><span style=\"color: #ABB2BF\"> y: <\/span><span style=\"color: #E5C07B\">Int<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">init<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #61AFEF; font-style: italic\">x<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">Int<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #61AFEF; font-style: italic\">y<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">Int<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #E5C07B\">self<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">x<\/span><span style=\"color: #ABB2BF\"> = x<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #E5C07B\">self<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">y<\/span><span style=\"color: #ABB2BF\"> = y<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">func<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">move<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #61AFEF; font-style: italic\">dx<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">Int<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #61AFEF; font-style: italic\">dy<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">Int<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #E5C07B\">self<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">x<\/span><span style=\"color: #ABB2BF\"> += dx<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #E5C07B\">self<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">y<\/span><span style=\"color: #ABB2BF\"> += dy<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Class Inheritance<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ The Dog class extends Animal, overriding the makeSound method.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">class<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Animal<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">var<\/span><span style=\"color: #ABB2BF\"> name: <\/span><span style=\"color: #E5C07B\">String<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">init<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #61AFEF; font-style: italic\">name<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">String<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #E5C07B\">self<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">name<\/span><span style=\"color: #ABB2BF\"> = name<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">func<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">makeSound<\/span><span style=\"color: #ABB2BF\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #56B6C2\">print<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&quot;Some generic sound&quot;<\/span><span style=\"color: #ABB2BF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">class<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Dog<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">Animal <\/span><span style=\"color: #ABB2BF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">override<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">func<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">makeSound<\/span><span style=\"color: #ABB2BF\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #56B6C2\">print<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&quot;Bark&quot;<\/span><span style=\"color: #ABB2BF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ Class Conforming to Protocol<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7F848E; font-style: italic\">\/\/ The Circle class conforms to the Drawable protocol, implementing the draw method.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">protocol<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Drawable<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">func<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">draw<\/span><span style=\"color: #ABB2BF\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">class<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Circle<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">Drawable <\/span><span style=\"color: #ABB2BF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">var<\/span><span style=\"color: #ABB2BF\"> radius: <\/span><span style=\"color: #E5C07B\">Double<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">init<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #61AFEF; font-style: italic\">radius<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">Double<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #E5C07B\">self<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">radius<\/span><span style=\"color: #ABB2BF\"> = radius<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">func<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">draw<\/span><span style=\"color: #ABB2BF\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #56B6C2\">print<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&quot;Drawing a circle with radius <\/span><span style=\"color: #C678DD\">\\(<\/span><span style=\"color: #ABB2BF\">radius<\/span><span style=\"color: #C678DD\">)<\/span><span style=\"color: #98C379\">&quot;<\/span><span style=\"color: #ABB2BF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Putting It All Together<\/strong><\/h3>\n\n\n\n<p>Understanding how TypeScript concepts translate to Swift can make it easier to switch between these languages or even work on projects that require both. By recognizing the parallels and nuances between&nbsp;<code>type<\/code>,&nbsp;<code>interface<\/code>, and&nbsp;<code>class<\/code>&nbsp;in TypeScript and their Swift equivalents, you can write more robust and maintainable code.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Recap:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>TypeScript&nbsp;<code>type<\/code><\/strong>:\n<ul class=\"wp-block-list\">\n<li>Swift equivalent:&nbsp;<code>struct<\/code>&nbsp;for object types,&nbsp;<code>typealias<\/code>&nbsp;for type aliases.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>TypeScript&nbsp;<code>interface<\/code><\/strong>:\n<ul class=\"wp-block-list\">\n<li>Swift equivalent:&nbsp;<code>protocol<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>TypeScript&nbsp;<code>class<\/code><\/strong>:\n<ul class=\"wp-block-list\">\n<li>Swift equivalent:&nbsp;<code>class<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>By leveraging these concepts effectively, you can enhance your development skills and become more proficient in both TypeScript and Swift. This knowledge not only broadens your programming capabilities but also prepares you for diverse development challenges.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h3>\n\n\n\n<p>Mastering both TypeScript and Swift opens up numerous opportunities in the fields of web and mobile development. Understanding the core concepts and their equivalents between these languages is a crucial step in becoming a versatile and effective developer. Whether you&#8217;re managing complex types in TypeScript or adhering to strict protocols in Swift, the ability to translate these ideas across languages will significantly enhance your coding prowess.<\/p>\n\n\n\n<p><a href=\"https:\/\/andrearethy.com\/blog\/how-to-set-up-your-first-typescript-project-with-tdd-and-ci-macos\/\" target=\"_blank\" rel=\"noopener\" title=\"\">If you are looking for starting with TypeScript here is a guide on how to set up your first project \ud83d\ude42<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a developer, you might need to learn multiple programming languages, so understanding their similarities and differences can enhance your versatility.<\/p>\n","protected":false},"author":1,"featured_media":386,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_siteseo_robots_primary_cat":"none","footnotes":""},"categories":[40],"tags":[66,70,69,64,72,71,65,68,46,22],"class_list":["post-375","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","tag-class","tag-inheritence","tag-interface","tag-mobile-development","tag-object-oriented-programming","tag-oop","tag-swift","tag-type","tag-typescript","tag-webdevelopment"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/posts\/375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/comments?post=375"}],"version-history":[{"count":10,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/posts\/375\/revisions"}],"predecessor-version":[{"id":387,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/posts\/375\/revisions\/387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/media\/386"}],"wp:attachment":[{"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/media?parent=375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/categories?post=375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/tags?post=375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}