<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Akpevwe11</title>
    <description>The latest articles on DEV Community by Akpevwe11 (@akpevwe11).</description>
    <link>https://dev.to/akpevwe11</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F855870%2F6c21ec99-9df5-449c-85a0-8ca2f14d57f0.png</url>
      <title>DEV Community: Akpevwe11</title>
      <link>https://dev.to/akpevwe11</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/akpevwe11"/>
    <language>en</language>
    <item>
      <title>The Impact of AI in Software Development: A Double-Edged Sword</title>
      <dc:creator>Akpevwe11</dc:creator>
      <pubDate>Wed, 28 May 2025 08:30:50 +0000</pubDate>
      <link>https://dev.to/akpevwe11/the-impact-of-ai-in-software-development-a-double-edged-sword-3ii</link>
      <guid>https://dev.to/akpevwe11/the-impact-of-ai-in-software-development-a-double-edged-sword-3ii</guid>
      <description>&lt;p&gt;Artificial Intelligence is reshaping software development in unprecedented ways. From code generation to bug detection and architectural design, AI tools like GitHub Copilot, ChatGPT, and Claude are accelerating developer workflows and increasing productivity.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Positive Impacts:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Enhanced Productivity:&lt;/strong&gt; AI-assisted coding reduces the time spent writing boilerplate code, enabling developers to focus more on problem-solving and creativity.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bug Detection and Testing:&lt;/strong&gt; AI tools can scan through large codebases to identify vulnerabilities and generate test cases, making software more secure and reliable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Learning and Mentorship:&lt;/strong&gt; AI is an on-demand tutor, helping new developers understand complex concepts quickly and improving the overall learning curve.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Rapid Prototyping:&lt;/strong&gt; AI can help developers iterate faster on new ideas, validate concepts, and build MVPs without getting bogged down in repetitive tasks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Negative Impacts:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Over-reliance on AI:&lt;/strong&gt; Developers may become overly dependent on AI tools and lose touch with core programming principles and logic.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Code Quality Concerns:&lt;/strong&gt; AI-generated code can be syntactically correct but semantically wrong or insecure, especially if developers fail to review and test it properly.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Job Displacement Anxiety:&lt;/strong&gt; As AI takes over repetitive tasks, there's fear that some developer roles may become redundant, particularly those focused on simple or routine coding tasks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bias and Ethical Risks:&lt;/strong&gt; AI tools are trained on vast datasets that may contain biased or unethical code patterns, which can be unknowingly propagated.&lt;/p&gt;

&lt;p&gt;AI is not here to replace developers but to empower them. When used responsibly, it can be a superpower. But like all tools, its impact depends on how wisely we wield it.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>chatgpt</category>
    </item>
    <item>
      <title>Demystify google search</title>
      <dc:creator>Akpevwe11</dc:creator>
      <pubDate>Sun, 14 Apr 2024 18:38:03 +0000</pubDate>
      <link>https://dev.to/akpevwe11/demystify-google-search-oo1</link>
      <guid>https://dev.to/akpevwe11/demystify-google-search-oo1</guid>
      <description>&lt;p&gt;As we surf the internet with our various devices, we some time pause to ponder the the complex infrastructure that takes our request to their destination.&lt;/p&gt;

&lt;p&gt;In this article, I'll take you through a journey and the various layers of the web to demystify what happens behind the scene when we type in an address like &lt;a href="https://www.google.com"&gt;https://www.google.com&lt;/a&gt; and press Enter.&lt;/p&gt;

&lt;h2&gt;
  
  
  DNS Request
&lt;/h2&gt;

&lt;p&gt;We begging surfing the internet by typing in a URL in our browser. our browser takes in whatever domain name we typed in and then send it to a DNS server. this step is carried out for DNS resolution purposes. ( is a process of converting the human friendly domain name typed into the browser to its equivalent IP address).&lt;/p&gt;

&lt;p&gt;This process is facilitated by the Domain Name System (DNS). This DNS service is typically provided by our internet service provider (ISP) or a third-party DNS service like Google DNS. The resolver simply retrieves the corresponding IP address associated with &lt;a href="http://www.google.com"&gt;www.google.com&lt;/a&gt; from a DNS server.&lt;/p&gt;

&lt;h2&gt;
  
  
  TCP/IP
&lt;/h2&gt;

&lt;p&gt;The next stage of the process is our browser establishing a TCP (Transmission Control Protocol) Connection with the resolved IP address. The essence of the TCP connection is to ensure reliable delivery of data by breaking the data into packets, and then reassembling them at the destination.&lt;/p&gt;

&lt;h2&gt;
  
  
  FireWall
&lt;/h2&gt;

&lt;p&gt;Before a request arrives at its final destination, it may encounter a firewall. a fire wall is a security measure designed to filter incoming and outgoing traffic from a server based on predetermined rules.&lt;/p&gt;

&lt;p&gt;The essence of firewall is to ensure that only legitimate traffic can pass through it. protecting the network from unauthorized access or malicious activity.&lt;/p&gt;

&lt;h2&gt;
  
  
  HTTPS/SSL
&lt;/h2&gt;

&lt;p&gt;as the browser establishes a connection with the server, it has do so securely using HTTPS (Hypertext Transfer Protocol Secure). HTTPS, is a secure communication protocol that encrypts data exchange between the client and server. This encryption is made possible through the use of SSL (Secure Sockets Layer) or its successor, TLS(Transport Layer Security), in order to ensure confidentiality and integrity of communication with the server.&lt;/p&gt;

&lt;h2&gt;
  
  
  Load Balancer
&lt;/h2&gt;

&lt;p&gt;Upon reaching the server's network, our request may encounter a load balancer-- a load balancer is a device that distributes incoming traffic across multiple servers in order to optimize resource usage and maximize throughput, and ensure high availability.&lt;/p&gt;

&lt;p&gt;Load balancers enhances the scalability and reliability of web applications by evenly distributing the workload among servers.&lt;/p&gt;

&lt;h2&gt;
  
  
  Web Server
&lt;/h2&gt;

&lt;p&gt;Once our request successfully traverses the load balancer, it arrives at a web server—a specialized software application responsible for serving web content in response to client requests. The web server processes our request, retrieves the requested resources (such as HTML, CSS, and JavaScript files), and sends them back to our browser for rendering.&lt;/p&gt;

&lt;h2&gt;
  
  
  Application Server
&lt;/h2&gt;

&lt;p&gt;In scenarios where dynamic content is involved, our request may be forwarded to an application server—a server-side software framework or environment capable of executing application logic, querying databases, and generating dynamic content on-the-fly. The application server interacts with databases, external services, and other resources to fulfill our request and generate a personalized response.&lt;/p&gt;

&lt;h2&gt;
  
  
  Database
&lt;/h2&gt;

&lt;p&gt;Behind the scenes, our application server may interact with a database—a structured collection of data organized for efficient retrieval and storage. Whether it's storing user information, product catalogs, or session data, databases play a crucial role in powering dynamic web applications by providing persistent storage and enabling data-driven functionalities.&lt;/p&gt;

&lt;p&gt;By understanding the intricacies of this journey, we gain insight into the fundamental workings of the web.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>devops</category>
      <category>discuss</category>
      <category>development</category>
    </item>
    <item>
      <title>Deeper Dive Into Generics In Type Script</title>
      <dc:creator>Akpevwe11</dc:creator>
      <pubDate>Fri, 23 Jun 2023 15:34:18 +0000</pubDate>
      <link>https://dev.to/akpevwe11/deeper-dive-into-generics-in-type-script-27n3</link>
      <guid>https://dev.to/akpevwe11/deeper-dive-into-generics-in-type-script-27n3</guid>
      <description>&lt;p&gt;In my previous article, I we look at an introduction to generics in typescript and we looked at a few examples of how to create a generic function, class, and interface. In this article, we're going to take a deeper dive into the world of generics. &lt;/p&gt;

&lt;p&gt;We're going to look at more advance topics such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Multiple generic types
&lt;/li&gt;
&lt;li&gt;Constraining and using the type T&lt;/li&gt;
&lt;li&gt;Generic constraints and interfaces&lt;/li&gt;
&lt;li&gt;Creating new objects within generics&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let's get started with generics.&lt;/p&gt;

&lt;p&gt;TypeScript employs an angled bracket notation along with a type symbol to indicate the use of generic syntax.&lt;/p&gt;

&lt;p&gt;let say you use the type &lt;code&gt;T&lt;/code&gt; as the generic type. to specify that is being used as a generic type, it has to be wrapped within angle brackets &lt;code&gt;&amp;lt;T&amp;gt;&lt;/code&gt;. to indicate that this code is substituting a normal type name with the symbol T.&lt;/p&gt;

&lt;p&gt;let use some code samples to make this more clearer:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arg&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`typeof T is : &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;arg&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`value is : &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;arg&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Usage&lt;/span&gt;
&lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;string&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, we are calling the &lt;code&gt;identity&lt;/code&gt; function with a wide range of values (number, string, boolean).&lt;/p&gt;

&lt;p&gt;if you print the output to the console, it will be as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;value is : 1
typeof T is : string
value is : string
typeof T is : boolean
value is : true
typeof T is : function
value is : () =&amp;gt; {}
typeof T is : object
value is : [object Object]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As we can see from this output, the&lt;code&gt;identity&lt;/code&gt; function is indeed working with pretty much every type that we can throw at it.&lt;/p&gt;

&lt;p&gt;we can also call this function as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;string&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, we are using what is known as type casting that is, the angled brackets  is used to explicitly specify what type we are calling this function with.&lt;/p&gt;

&lt;p&gt;if you look at the previous way in which we called the &lt;code&gt;indentity&lt;/code&gt; function, we did not, explicitly set the type using this long form notation, but simply called the &lt;br&gt;
function with an argument, that is, &lt;code&gt;identity(1)&lt;/code&gt;. In this instance, TypeScript is inferring the type &lt;code&gt;T&lt;/code&gt; to be a number.&lt;/p&gt;

&lt;p&gt;Note, too, that if we explicitly set the type to be used using this long form notation, type rules will apply for any usage of the type T. Consider the following example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, we are explicitly specifying that the function will be called with a type , but our single argument is actually of type number. This code will generate the following error:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;error TS2345: Argument of type '1' is not assignable to parameter of type 'string'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This error is telling us that we are attempting to call a generic function with the wrong type as an argument, as the type of T was explicitly set.&lt;/p&gt;

&lt;p&gt;If we do not explicitly specify what type the generic function&lt;br&gt;
should use, by omitting the  specifier, the typescript compiler will infer the type to be used from the type of each argument.&lt;/p&gt;
&lt;h2&gt;
  
  
  Multiple Generic Type
&lt;/h2&gt;

&lt;p&gt;Type Script also allows you to define multiple type parameters for classes, interfaces, and functions. Here's an example of using multiple generic type parameters in Type Script:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;
 &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;printPair&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;T2&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;pair&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;T1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;T2&lt;/span&gt;&lt;span class="p"&gt;]):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;first&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;second&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;pair&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`First: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;first&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;, Second: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;second&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;printPair&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;42&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt; &lt;span class="c1"&gt;// Output: First: Hello, Second: 42&lt;/span&gt;
&lt;span class="nx"&gt;printPair&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mf"&gt;3.14&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt; &lt;span class="c1"&gt;// Output: First: 3.14, Second: true&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;here, we have a function &lt;code&gt;printPair&lt;/code&gt; with two generic type parameters, &lt;code&gt;T1&lt;/code&gt; and &lt;code&gt;T2&lt;/code&gt;. The function takes an array pair of two elements and logs their values to the console.&lt;/p&gt;

&lt;p&gt;When calling the &lt;code&gt;printPair&lt;/code&gt; function, we specify the types for the generic type parameters within angle brackets (&amp;lt;&amp;gt;). In the first invocation, we pass an array of type &lt;code&gt;[string, number]&lt;/code&gt; to the function, indicating that the first element is a string and the second element is a number. In the second invocation, we pass an array of type &lt;code&gt;[number, boolean]&lt;/code&gt;, specifying that the first element is a number and the second element is a boolean.&lt;/p&gt;

&lt;p&gt;let see another example where we use multiple generic type parameters in TypeScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Pair&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;T2&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="na"&gt;first&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="na"&gt;second&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;first&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;second&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;first&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;first&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;second&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;second&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;getFirst&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nx"&gt;T1&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;first&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;getSecond&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nx"&gt;T2&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;second&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;setFirst&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;first&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T1&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;first&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;first&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;setSecond&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;second&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T2&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;second&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;second&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pair1&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Pair&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Pair&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;42&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pair2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Pair&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Pair&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;3.14&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;World&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;we define a Pair class with two type parameters, &lt;code&gt;T1&lt;/code&gt; and &lt;code&gt;T2&lt;/code&gt;. The class has properties first and second of types &lt;code&gt;T1&lt;/code&gt; and &lt;code&gt;T2&lt;/code&gt;, respectively. The constructor and methods of the class are also using the generic type parameters.&lt;/p&gt;

&lt;p&gt;We can create instances of the Pair class by specifying the types for the type parameters. In the example, pair1 has a type &lt;code&gt;Pair&amp;lt;string, number&amp;gt;&lt;/code&gt; representing a pair of a string and a number, while pair2 has a type &lt;code&gt;Pair&amp;lt;number, string&amp;gt;&lt;/code&gt; representing a pair of a number and a string.&lt;/p&gt;

&lt;h2&gt;
  
  
  Constraining the type of T
&lt;/h2&gt;

&lt;p&gt;constraining is the act of limiting the type of T in order to only allow a specific set of types to be used within our generic code.  This helps enforce type safety and provides more control over the types that can be used with a generic type or function. Here are a few ways to apply constraints in TypeScript:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Type constraints with extends:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can use the extends keyword to enforce that the generic type &lt;code&gt;T&lt;/code&gt; must extend a certain type or satisfy specific conditions. For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;  &lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;Printable&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;print&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;printItem&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Printable&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;print&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Book&lt;/span&gt; &lt;span class="k"&gt;implements&lt;/span&gt; &lt;span class="nx"&gt;Printable&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;print&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Printing book...&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;printItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Book&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// Output: Printing book...&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the example above, the &lt;code&gt;printItem&lt;/code&gt; function accepts a generic parameter &lt;code&gt;T&lt;/code&gt; constrained by the Printable interface. This means that &lt;code&gt;T&lt;/code&gt; must be a type that implements the Printable interface. Therefore, we can pass an instance of the Book class (which implements Printable) to the &lt;code&gt;printItem&lt;/code&gt; function.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Using T as a return type:&lt;/strong&gt; You can use T as the return type of a function, allowing the caller to determine the specific type returned based on the input. For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// Output: HELLO&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the above example, the identity function takes a generic parameter T and returns the same value of type T. When calling the function with the string "Hello", the inferred type of result is string, and we can use string-specific methods like &lt;code&gt;toUpperCase()&lt;/code&gt; on it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Using intersection (&amp;amp;) to impose multiple constraints:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can apply multiple constraints by using the intersection type operator &lt;code&gt;(&amp;amp;)&lt;/code&gt;. This ensures that the generic type parameter satisfies all the specified conditions. Here's an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt; &lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;Printable&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;print&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;printItem&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Printable&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;print&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Book&lt;/span&gt; &lt;span class="k"&gt;implements&lt;/span&gt; &lt;span class="nx"&gt;Printable&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="nx"&gt;print&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Printing book:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;book&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Book&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;The TypeScript Guide&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;printItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;book&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: The TypeScript Guide \n Printing book: The TypeScript Guide&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this case, the &lt;code&gt;printItem&lt;/code&gt; function expects a generic type T that satisfies two conditions: it extends the Printable interface and has a name property of type string. The Book class meets these requirements, so calling &lt;code&gt;printItem(book)&lt;/code&gt; successfully prints the name of the book and invokes the print method.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Using type predicates:&lt;/strong&gt; Type predicates allow you to specify custom constraints using type assertions and logical checks. This technique is particularly useful when dealing with union types or runtime validations. Here's an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;isNumber&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;unknown&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="k"&gt;is&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;number&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;multiplyByTwo&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isNumber&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;multiplyByTwo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Output: 10&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;multiplyByTwo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Output: undefined&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the above example, the &lt;code&gt;isNumber&lt;/code&gt; function is a type predicate that checks whether the value is a number. The &lt;code&gt;multiplyByTwo&lt;/code&gt; function uses this type predicate to conditionally multiply the value by two if it's a number. Otherwise, it returns undefined. This allows for type-specific operations while maintaining type safety.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Using T to define properties or methods:&lt;/strong&gt; You can use T to define properties or methods within a class or interface. This allows the class or interface to work with different types based on the actual usage. Here's an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Container&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;getValue&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;container&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Container&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;container&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getValue&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// Output: Hello&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the Container class has a generic type parameter T, and the value property is of type T. We can create an instance of Container with a specific type, in this case, string, and retrieve the stored value using the&lt;code&gt;getValue&lt;/code&gt; method.&lt;/p&gt;

&lt;p&gt;By applying constraints in TypeScript, you can ensure that generic types adhere to specific requirements, leading to more robust and predictable code.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>typescript</category>
      <category>beginners</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Generics in typescript made easy</title>
      <dc:creator>Akpevwe11</dc:creator>
      <pubDate>Wed, 21 Jun 2023 15:23:12 +0000</pubDate>
      <link>https://dev.to/akpevwe11/generics-in-typescript-made-easy-35b1</link>
      <guid>https://dev.to/akpevwe11/generics-in-typescript-made-easy-35b1</guid>
      <description>&lt;p&gt;lets say in your house, you have different containers where you sort  different things, like toys,  books, and candies.  Then you have a container that can hold any thing (whether it be books, candies, toys) without things getting messy.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vXC_el5p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n61a5ev8z8z0qeeid0d0.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vXC_el5p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n61a5ev8z8z0qeeid0d0.jpg" alt="Image description" width="800" height="545"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Generics in Typescript is like that special box that can hold any thing. They are like magic placeholders that allow you to create a special box that can hold different types of things. Instead of specifying a specific type of thing, you can use a generic placeholder. &lt;/p&gt;

&lt;p&gt;In a much more technical term, generics  is just a "Yet to be defined" type, that obtains its' definition at the moment of use.&lt;/p&gt;

&lt;p&gt;They allow you to create reusable components and functions that can work with a variety of data types while maintaining type safety. They provide a way to define placeholders for types that will be specified when the component or function is used.&lt;/p&gt;

&lt;p&gt;To define a generic type in TypeScript, you use angle brackets (&amp;lt;&amp;gt;) and specify the generic parameter(s) inside them. Here's a basic example of a generic function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arg&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;arg&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, T is the generic parameter representing the type of the argument and the return value. The function identity takes an argument of type T and returns a value of the same type T. When the function is called, the type inference system will automatically determine the specific type based on the argument passed.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;lets look at another example that relates to our box analogy.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Imagine you have a function called &lt;code&gt;getContents&lt;/code&gt; that takes a box and tells you what's inside  it. With generics, you can write the function like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;getContents&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;box&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;box&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;&amp;lt;T&amp;gt;&lt;/code&gt; part is like a blank space where you can fill in any type you want when you  use the function. For example, you can call the function like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;toyBox&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;getContents&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Teddy Bear&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;bookBox&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;getContents&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;candyBox&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;getContents&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the &lt;code&gt;T&lt;/code&gt; in &lt;code&gt;getContents&amp;lt;T&amp;gt;&lt;/code&gt; becomes a specific type depending on what you pass to the function. The function returns the same type that you put in. So if you put a string, it will return a string. If you put a number, it will return a number.&lt;/p&gt;

&lt;h3&gt;
  
  
  Using generics with classes and interfaces.
&lt;/h3&gt;

&lt;p&gt;Just as we can create generic functions that can work with a wide variety of types, we can as well create generic interfaces and classes. &lt;/p&gt;

&lt;p&gt;A generic interface allows you to define an interface that can work with different types. It enables you to create reusable and flexible interfaces that can be used with various data types without explicitly specifying the type.&lt;/p&gt;

&lt;p&gt;Here's an example of a generic interface in TypeScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;Container&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;item&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;remove&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;item&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;getSize&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the above code, Container is a generic interface that takes a type parameter T. The interface has three methods:&lt;code&gt;add&lt;/code&gt;, &lt;code&gt;remove&lt;/code&gt;, and&lt;code&gt;getSize&lt;/code&gt;, which operate on the type T. The data property is also of type T.&lt;/p&gt;

&lt;p&gt;You can then use this generic interface with different types when implementing a class, like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;NumberContainer&lt;/span&gt; &lt;span class="k"&gt;implements&lt;/span&gt; &lt;span class="nx"&gt;Container&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

  &lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;item&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;remove&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;item&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;indexOf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;splice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;getSize&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;container&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;NumberContainer&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;container&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;container&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;container&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;container&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getSize&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// Output: 3&lt;/span&gt;
&lt;span class="nx"&gt;container&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;remove&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;container&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getSize&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// Output: 2&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the above example, the &lt;code&gt;NumberContainer&lt;/code&gt; class implements the Container interface with the type parameter number. This allows the data property and methods to work specifically with numbers.&lt;/p&gt;

&lt;p&gt;You can create additional implementations of the Container interface with different types, providing flexibility and reusability.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why Do We Need Generics in Type Script?
&lt;/h3&gt;

&lt;p&gt;Generics are important in TypeScript, for several reasons:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reusability:&lt;/strong&gt;  Generics allow you to create components, functions, and data structures that can work with different types of data. This promotes code reuse and reduces the need to write duplicate code for each specific type. By using generics, you can create versatile and flexible code that can be used with various data types.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Type Safety:&lt;/strong&gt;  TypeScript is a statically typed language, and generics help enforce type safety. By using generics, you can specify the expected type of data that a component or function should work with. This helps catch type-related errors at compile-time, reducing the chances of runtime errors and improving the overall reliability of your code.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Abstraction:&lt;/strong&gt;  Generics allow you to create abstract and generic algorithms or data structures. You can design components and functions that are independent of the specific data types they operate on, making your code more modular and easier to maintain. This level of abstraction enables you to write flexible and reusable code that can adapt to different scenarios.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Code Readability:&lt;/strong&gt;  Generics can make your code more expressive and readable. When you use generics, you provide clear intentions and expectations about the types of data being used. This helps other developers understand the purpose and requirements of your code, making it easier to collaborate and maintain the codebase in the long run.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance:&lt;/strong&gt;  Generics can help improve performance by avoiding unnecessary type conversions or type checking operations. By working directly with the specified types, you can optimize your code and reduce overhead, leading to more efficient execution.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Overall, generics provide a powerful tool for writing reusable, type-safe, and expressive code. They promote code modularity, improve maintainability, and enhance the overall quality and performance of your software projects.&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>beginners</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>What are Prototypes in JavaScript</title>
      <dc:creator>Akpevwe11</dc:creator>
      <pubDate>Fri, 28 Apr 2023 12:02:19 +0000</pubDate>
      <link>https://dev.to/akpevwe11/what-the-are-prototypes-in-javascript-50bi</link>
      <guid>https://dev.to/akpevwe11/what-the-are-prototypes-in-javascript-50bi</guid>
      <description>&lt;p&gt;Prototype is one of the most confusing concepts in JavaScript to wrap your head around. even seasoned JavaScript developers still have a hard time understanding prototyping and how to apply it in their code base. &lt;/p&gt;

&lt;p&gt;JavaScript uses Prototypes and constructors to mimic class. &lt;br&gt;
But in JavaScript, we don’t have classes, what we have is object. so how can we implement inheritance using objects?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--v_OXGecD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss1gw8kquy9tjv1wofho.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--v_OXGecD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss1gw8kquy9tjv1wofho.jpg" alt="Image description" width="800" height="557"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let say we have a &lt;code&gt;Car&lt;/code&gt; object, we can define another object called &lt;code&gt;Vehicle&lt;/code&gt; and we add all the common behavior or common method to the Vehicle object, like:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;drive(startLocation, endLocation)&lt;/code&gt; and some how, we can link the &lt;code&gt;Car&lt;/code&gt; object and the &lt;code&gt;Vehicle&lt;/code&gt; object. and now we refer to &lt;code&gt;Vehicle&lt;/code&gt; object as the prototype of the &lt;code&gt;Car&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;So prototype is just the parent of another object. most materials out there makes prototypes sounds complicated. so whenever you hear the word prototyping just know it is just parent.&lt;/p&gt;

&lt;p&gt;Every object in JavaScript has a prototype or parent except for one object. objects inherits all the members define in his prototype. let see that in action.&lt;/p&gt;

&lt;p&gt;open google chrome and go to the developer tool on the console tab, define an empty object as shown below:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--P8vw4J3j--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aljbu2ov54av5wwij0yf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--P8vw4J3j--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aljbu2ov54av5wwij0yf.png" alt="Image description" width="442" height="278"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;you will notice a property called &lt;code&gt;[[Prototype]]&lt;/code&gt; . you will also notice other properties like &lt;code&gt;constructor&lt;/code&gt;, &lt;code&gt;hasOwnProperty&lt;/code&gt;,and so on. &lt;/p&gt;

&lt;p&gt;Every object has a &lt;code&gt;constructor&lt;/code&gt; property which reference the function that was used to construct that object. &lt;/p&gt;

&lt;p&gt;let see a diagrammatic representation of the &lt;code&gt;x&lt;/code&gt; object.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YOtL8s68--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb6p94ncz2ybsz99lpgw.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YOtL8s68--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb6p94ncz2ybsz99lpgw.jpg" alt="Image description" width="800" height="557"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;so we have this x object in memory, and the x object is linked another object (lets call it the base object ). the x object inherits the properties and methods of the base object.&lt;/p&gt;

&lt;p&gt;So every object we create in JavaScript, directly or indirectly inherits from the base object.&lt;/p&gt;

&lt;p&gt;so the base object is the root of all object in JavaScript and so doing, it doesn’t have a prototype or parent.&lt;/p&gt;

&lt;p&gt;let say we create another object in memory called &lt;code&gt;myobject&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--d0CsZq4v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9xygpvm6qwu0qz064h8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--d0CsZq4v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9xygpvm6qwu0qz064h8.png" alt="Image description" width="800" height="564"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;you will observe that both &lt;code&gt;x&lt;/code&gt; object and &lt;code&gt;myobject&lt;/code&gt; have the same properties and methods, because they inherit from the same &lt;code&gt;baseobject&lt;/code&gt;. and based on the fact that they are empty objects. that is, they do not have properties and methods of their own except for the the once they inherit from the &lt;code&gt;baseobject&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--N-_ES1Tk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t34n7fr57d9gkjwb4xz.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--N-_ES1Tk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t34n7fr57d9gkjwb4xz.jpg" alt="Image description" width="800" height="557"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Back in you browser developer tool, if you type in &lt;code&gt;Object.getPrototypeOf(x)&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jbV3JChx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksbillebzkeb6cfm5k72.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jbV3JChx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksbillebzkeb6cfm5k72.png" alt="Image description" width="800" height="323"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;what you see above is the object base with its members.&lt;br&gt;
an expression like as shown below will result to true. try it out on your browser developer tool.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Object.getPrototypeOf(x) === Object.getPrototype(myobject); 
// true 

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The reason is because both &lt;code&gt;x&lt;/code&gt; and &lt;code&gt;myobject&lt;/code&gt; has exact same prototype. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7uq0OOjl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nthmawgb235cz12qimpm.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7uq0OOjl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nthmawgb235cz12qimpm.jpg" alt="Image description" width="800" height="557"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;when you access the property or method of an object, JavaScript engine first look for that property on the object if it cant find it, it looks at the  &lt;code&gt;[[prototype]]&lt;/code&gt; for that object which we called base object.  in JavaScript, this is what is referred to as prototypical inheritance. &lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Overall, prototypes are a powerful feature of JavaScript that allows objects to inherit properties and methods from other objects. They are very vital when one wants to create multiple objects with the same properties and methods, which makes your code DRY.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>oop</category>
      <category>coding</category>
    </item>
    <item>
      <title>Encapsulation Explained using JavaScript</title>
      <dc:creator>Akpevwe11</dc:creator>
      <pubDate>Sat, 15 Apr 2023 01:15:21 +0000</pubDate>
      <link>https://dev.to/akpevwe11/encapsulation-explained-using-javascript-21hl</link>
      <guid>https://dev.to/akpevwe11/encapsulation-explained-using-javascript-21hl</guid>
      <description>&lt;p&gt;Encapsulation is one of the fundamental principles of object-oriented programming (OOP) that refers to the concept of binding the data (member variable) and the methods that operate on the data (member functions) within a single unit called a class.&lt;/p&gt;

&lt;p&gt;Encapsulation enables programmers to hide the implementation details of one object from other objects and restrict direct access to the internal state of an object.&lt;/p&gt;

&lt;p&gt;Encapsulation provides several benefits, such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;improving the maintainability of the code -- making it easier to modify and extend the class's functionality.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Enhancing the security of the data by preventing unauthorized access. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It also allows the programmer to use the class's interface without knowing the implementation details, which makes it easier to use and understand.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;let look at an example of encapsulation in JavaScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return increment;
}

const counter = createCounter();

counter(); // Output: 1
counter(); // Output: 2
counter(); // Output: 3


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we have a &lt;code&gt;createCounter&lt;/code&gt; function that returns an &lt;code&gt;increment&lt;/code&gt; function. The &lt;code&gt;increment&lt;/code&gt; function has access to the &lt;code&gt;count&lt;/code&gt; variable through a closure, but the count variable is not accessible from outside the function. The only way to modify the &lt;code&gt;count&lt;/code&gt; variable is by calling the &lt;code&gt;increment&lt;/code&gt; function, which increments the count and logs it to the console.&lt;br&gt;
This is an example of encapsulation because the &lt;code&gt;count&lt;/code&gt; variable is hidden from the outside world and can only be accessed through the &lt;code&gt;increment&lt;/code&gt; function, which provides a well-defined interface for accessing and modifying the count.&lt;/p&gt;

&lt;p&gt;In addition to using closures, another way to achieve encapsulation in JavaScript is by using &lt;code&gt;setters&lt;/code&gt; and &lt;code&gt;getters&lt;/code&gt;. &lt;code&gt;Setters&lt;/code&gt; and &lt;code&gt;getters&lt;/code&gt; are methods that allow us to control how properties are set and retrieved from an object.&lt;/p&gt;

&lt;p&gt;Here's an example of encapsulation using &lt;code&gt;setters&lt;/code&gt; and &lt;code&gt;getters&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }

  get name() {
    return this._name;
  }

  set name(newName) {
    if (typeof newName === "string") {
      this._name = newName;
    } else {
      throw new Error("Name must be a string");
    }
  }

  get age() {
    return this._age;
  }

  set age(newAge) {
    if (typeof newAge === "number" &amp;amp;&amp;amp; newAge &amp;gt; 0) {
      this._age = newAge;
    } else {
      throw new Error("Age must be a positive number");
    }
  }
}

const person = new Person("John Doe", 30);
console.log(person.name); // Output: John Doe
console.log(person.age); // Output: 30

person.name = "Jane Doe";
person.age = 25;

console.log(person.name); // Output: Jane Doe
console.log(person.age); // Output: 25

person.name = 123; // Throws an error: Name must be a string
person.age = -1; // Throws an error: Age must be a positive number

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we have a Person class with name and age properties that are encapsulated using &lt;code&gt;setters&lt;/code&gt; and&lt;code&gt;getters&lt;/code&gt;. The &lt;code&gt;getters&lt;/code&gt; allow us to retrieve the values of these properties, while the &lt;code&gt;setters&lt;/code&gt; allow us to control how they are set.&lt;/p&gt;

&lt;p&gt;For instance, the name setter checks whether the new value is a string before setting the _name property, while the age setter checks whether the new value is a positive number. This allows us to enforce certain constraints on the values of these properties and ensure that they are always valid.&lt;/p&gt;

&lt;p&gt;By encapsulating the&lt;code&gt;name&lt;/code&gt; and &lt;code&gt;age&lt;/code&gt; properties using &lt;code&gt;setters&lt;/code&gt; and &lt;code&gt;getters&lt;/code&gt;, we can hide their internal implementation and control how they are accessed and modified from outside the class. This helps to maintain the integrity of the object and prevent any unexpected side-effects that could result from direct manipulation of its properties.&lt;/p&gt;

&lt;p&gt;In Summary, In encapsulation can be achieved through the use of closures and modules, as well as using &lt;code&gt;setters&lt;/code&gt; and &lt;code&gt;getters&lt;/code&gt; to control how properties are set and retrieved from an object. it also helps to improve the quality and maintainability of software systems.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>oop</category>
      <category>programming</category>
      <category>coding</category>
    </item>
    <item>
      <title>An Introduction to Object Oriented Programming in JavaScript</title>
      <dc:creator>Akpevwe11</dc:creator>
      <pubDate>Sat, 25 Mar 2023 14:51:12 +0000</pubDate>
      <link>https://dev.to/akpevwe11/an-introduction-to-object-oriented-programming-in-javascript-og1</link>
      <guid>https://dev.to/akpevwe11/an-introduction-to-object-oriented-programming-in-javascript-og1</guid>
      <description>&lt;p&gt;so what is object-oriented programming? it is a style of programming that is centered around objects .that is a kind of binding or tie that exists between data which are referred to as properties of the object and functions that operates on that data which are called methods in OOP. The combination of member variables (properties of the object) and member functions (methods that operate on the variables) is referred to as an object. OOP breaks down a problem into several entities called objects and these objects can then communicate with each other.&lt;/p&gt;

&lt;p&gt;Object Oriented Programming is not a tool or a framework but a programming paradigm. several programming languages support oop such as c#, Java, Ruby, PHP and more. many of the frameworks out there such as laravel, spring boot, and .NET framework were designed using object-oriented principles. if you want to go far in your career as a software developer, you need to understand object-oriented programming principles.&lt;/p&gt;

&lt;p&gt;In this article, I'm going to explain object-oriented principles and how to implement them in JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  Basic Concepts of Object-oriented Programming
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Objects
&lt;/h3&gt;

&lt;p&gt;An Object is a unique entity that contains properties and methods. if you take a look around you right now, you'll find many examples of real-world objects: your mobile phone, your dog (if you have one)&lt;/p&gt;

&lt;p&gt;Real-world objects share two characteristics: They all have states and behavior. Dogs have state (name, color, breed) and behavior (barking, fetching, wagging tail). Software objects are kind of similar to real-world objects: they too consist of state and related behavior. An object stores its state in fields (which can also be referred to as variables) and behaviors are expressed through methods (which can also be referred to as functions in some programming languages). Methods operate on an object's internal state. they serve as the channel for object-to-object communication. Hiding the internal state and requiring all interaction to be performed through an object's methods is known as data encapsulation.&lt;/p&gt;

&lt;p&gt;The object can be created in two ways using JavaScript&lt;/p&gt;

&lt;h4&gt;
  
  
  Object Literal
&lt;/h4&gt;

&lt;h4&gt;
  
  
  Example:
&lt;/h4&gt;

&lt;p&gt;Using Object literal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const Student = {

   // properties

name: "James",

age: 21,

gender: "Male",

Department: "Computer Science",

// method

getDetails: function() {

return `Student Name ${this.name} Student age: ${this.age}

gender: ${this.gender} Department: ${this.Department}`;

     }

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Constructor Function
&lt;/h4&gt;

&lt;h4&gt;
  
  
  Examples:
&lt;/h4&gt;

&lt;p&gt;using object constructor:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
function Student(name, age, gender, Department) {

this.name = name;

this.age = age;

this.gender = gender;

this.Department = Department;

this.getDetails = function() { return Student Name ${this.name}, Student age: ${this.age}, gender: ${this.gender}, Department: ${this.Department};
   }

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Classes
&lt;/h3&gt;

&lt;p&gt;In the real world, you'll often find many individual objects all of the same kind. let's say for example your mobile phone. there may be thousands of other phones in existence, all of the same make and model. Each phone was built from the same set of blueprints and therefore contains the same components. In object-oriented terms, we say that your phone is an instance of the class of objects known as a Phone. A class is a blueprint from which individual objects are created. another scenario is that a real estate developer can use a single architectural blueprint to make multiple replicas of the same type of building.&lt;/p&gt;

&lt;p&gt;There is something I want you to take note of, unlike other Object Oriented languages there are no classes in JavaScript we have only Object. JavaScript is a prototype-based language, meaning that it doesn't have classes, rather it defines behaviors using a constructor function and then reuses it using the prototype.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.&lt;/em&gt;&lt;br&gt;
-Mozilla Developer Network&lt;br&gt;
let's look at the two ways in which one can obtain a class-like behavior in JavaScript.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  Example 1: Using ES6 Class Syntax
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Defining class using ES6

class Vehicle {

constructor(name, model, maker)

{

this.name = name;

this.model = model;

this.maker = maker;

}
 getDetails() {

return The name of the Vehicle is ${this. name}.

}

} // Making object with the help of the constructor let vehicle1 = new Vehicle('corolla', 2010, 'Toyota'); console.log(vehicle1.name); console.log(vehicle1.maker); console.log(vehicle1.model); console.log(vehicle1.getDetails());

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Example 2
&lt;/h4&gt;

&lt;p&gt;: Simulating Classes Using Constructor functions&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Defining class using Object Constructor function Vehicle(name, model, maker) {

this.name = name;

this.model = model;

this.maker = maker;

this.getDetails = function() {

console.log('The name of the bike is ' + this.name);

}

}; let vehicle1 = new Vehicle('corolla', 2018, 'Toyota');

vehicle1.getDetails();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Pillars of Object-oriented Programming
&lt;/h2&gt;

&lt;p&gt;There are four main pillars of Object-oriented programming, they are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Abstraction&lt;/li&gt;
&lt;li&gt;Polymorphism&lt;/li&gt;
&lt;li&gt;Encapsulation&lt;/li&gt;
&lt;li&gt;Inheritance&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Abstraction
&lt;/h3&gt;

&lt;p&gt;Think of your mobile device or your computer as an object, your mobile device or computer has a complex circuit board inside of it and buttons or touch screens on the outside that you interact with (interface). as a computer user, you don't need to know the working principles behind its operation to use it for your purpose or use case. all the complexities of the circuit board are hidden from you. This is what is referred to as abstraction. displaying only essential information and hiding the details.&lt;/p&gt;

&lt;p&gt;We can do the same thing for our object in a computer program by hiding some properties and methods from outside usage and exposing only the essentials.&lt;/p&gt;

&lt;p&gt;The way to hide the details of a class is by creating private properties and methods.&lt;/p&gt;

&lt;h4&gt;
  
  
  Example:
&lt;/h4&gt;

&lt;p&gt;let's understand abstraction using an example.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function Box(length, breadth, height) {

this.length = length;

this.breadth = breadth;

this.height = height;

this.defaultPosition = { x: 0, y: 0};

this.computeOptimumPosition = function() {

console.log('compute the best positon');

} this.draw = function() {

this.computeOptimumPosition();

console.log('draw');

}

} const box1 = new Box(55, 22, 35);

console.log(box1.defaultPosition)

box1.computeOptimumPosition()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;let's say for example we don't want consumers of this object to have access to &lt;code&gt;computeOptimumPosition()&lt;/code&gt; function and the &lt;code&gt;defaultPosition&lt;/code&gt; property, we can do that by abstracting it way (that is by declaring them as private properties so that consumers of the class can't have direct access to it). the process of making these properties private is known as &lt;strong&gt;abstraction&lt;/strong&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Example:
&lt;/h4&gt;

&lt;p&gt;let's make these properties private&lt;/p&gt;

&lt;p&gt;the way to make&lt;code&gt;computeOptimumPosition()&lt;/code&gt;function and the &lt;code&gt;defaultPosition&lt;/code&gt; variable private is by declaring them as local variables inside of the constructor function making them go out of scope outside of the function. with this technique, we can hide certain members of the class from the outside.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function Box(length, breadth, height) {

this.length = length;

this.breadth = breadth;

this.height = height;

let defaultPosition = { x: 0, y: 0};

let computeOptimumPosition = function() {

console.log('compute the best positon');

} this.draw = function() {

// ensure you remove this keyword here too

computeOptimumPosition();

console.log('draw');

}

} const box1 = new Box(55, 22, 35);

console.log(box1.defaultPosition) // trying this out will result in an error

box1.computeOptimumPosition() // trying to do this will result in an error

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;so by removing the&lt;code&gt;this&lt;/code&gt; keyword and declaring them as local variables using the &lt;code&gt;let&lt;/code&gt; the keyword, we've been able to make them private.&lt;/p&gt;

&lt;p&gt;Benefits of abstractions&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Simpler Interface:&lt;/strong&gt; simple interface by exposing only the essentials&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;helps to reduce the impact of change:&lt;/strong&gt; that is changing a private property or method won't have any external effect.&lt;/p&gt;

&lt;h3&gt;
  
  
  Encapsulation
&lt;/h3&gt;

&lt;p&gt;Encapsulation is the wrapping up/binding of data and function into a single unit called a class. encapsulation helps keep an object's internal state (member variables or data) private so that it can only be accessed by the object's methods (member functions), and not from other objects. These functions (member methods) facilitate object-to-object communication within your program.&lt;/p&gt;

&lt;h3&gt;
  
  
  Inheritance
&lt;/h3&gt;

&lt;p&gt;Inheritance is a way of reducing redundant code and ensuring reusability within your program. It is a phenomenon in which some properties and methods of an Object are being used by another Object. In other object-oriented programming languages, classes inherit from other classes, but in JavaScript, it is quite different (Objects inherit from other Objects ( certain features; properties and methods of one object can be reused by other Objects).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt; let's understand inheritance with an example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Inheritance example -- the function of the constructor method is to initialize the member variables of the class (name and gender)

class Person {

constructor(name, gender) {

this.name = name;

this.gender = gender;

// method to return the string

toString() {

return `Name of Person: ${this.name} and he is a ${this.gender}`

}

}

class Student extends Person {

constructor(name,gender, id) {

// super keyword for calling the above class constructor

super(name,gender);

this.id = id;

}

toString() {

return ${super.toString()}, Student Gender: ${this.gender}, Student Id: ${this.id}; }

}

let student1 = new Student('James', 'Male', 552);

console.log(student1.toString());
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the above example, we define a &lt;code&gt;Person&lt;/code&gt; Object with properties; name, gender and method &lt;code&gt;toString()&lt;/code&gt; and then we inherit the &lt;code&gt;Person&lt;/code&gt; Object in the &lt;code&gt;Student&lt;/code&gt; Object and use all the properties and methods of the&lt;code&gt;Person&lt;/code&gt; Object as well as define certain properties and methods for the&lt;code&gt;Student&lt;/code&gt; Object.&lt;/p&gt;

&lt;h3&gt;
  
  
  Polymorphism
&lt;/h3&gt;

&lt;p&gt;Polymorphism is one of the core concepts of object-oriented programming languages. The Word Poly means many and morph means forms. so polymorphism means many forms. in object-oriented programming, it means various objects can share the same method, but also can override shared methods with a more specific implementation. using a real-life example, a Man can be a Student, a Doctor, etc. So a Man can perform different operations at the same time. Polymorphism can be achieved by method overriding and method** overloading**.&lt;/p&gt;

&lt;p&gt;overloading means the same function with different signatures (parameters and return values are referred to as signatures of a function).&lt;/p&gt;

&lt;p&gt;In the above code example, The &lt;code&gt;Person&lt;/code&gt; and &lt;code&gt;Student&lt;/code&gt; objects both have the same method (i.e &lt;code&gt;toString()&lt;/code&gt;), this is called Method Overriding. Method Overriding allows a method in a child class to have the same name** (polymorphism) **and method signature as that of a parent class.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;This article has described the basic features of object-oriented programming using JavaScript. In the next article, we'll look at the features JavaScript provides to support object-oriented programming.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
