<?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: Rajesh Rathore</title>
    <description>The latest articles on DEV Community by Rajesh Rathore (@rajrathod).</description>
    <link>https://dev.to/rajrathod</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%2F942218%2F8cfb57e8-c2f6-482a-b94b-e480a08829e2.png</url>
      <title>DEV Community: Rajesh Rathore</title>
      <link>https://dev.to/rajrathod</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/rajrathod"/>
    <language>en</language>
    <item>
      <title>Observables and Observers in RxJS</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Tue, 09 Jan 2024 08:47:39 +0000</pubDate>
      <link>https://dev.to/rajrathod/observables-and-observers-in-rxjs-1jk5</link>
      <guid>https://dev.to/rajrathod/observables-and-observers-in-rxjs-1jk5</guid>
      <description>&lt;p&gt;RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array methods (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Think of RxJS as &lt;a href="https://lodash.com/"&gt;Lodash&lt;/a&gt; for events.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The essential concepts in RxJS which solve async event management are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Observable&lt;/strong&gt;: represents the idea of an invokable collection of future values or events.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Observer&lt;/strong&gt;: is a collection of callbacks that knows how to listen to values delivered by the Observable.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Subscription&lt;/strong&gt;: represents the execution of an Observable, is primarily useful for cancelling the execution.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Operators&lt;/strong&gt;: are pure functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, reduce, etc.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Subject&lt;/strong&gt;: is equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Schedulers&lt;/strong&gt;: are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Before going to deep understanding of Oberservables and promises. We need to know about Pull and Push&lt;/p&gt;

&lt;h3&gt;
  
  
  Pull versus Push
&lt;/h3&gt;

&lt;p&gt;Pull and Push are two different protocols that describe how a data Producer can communicate with a data Consumer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Pull?&lt;/strong&gt; In Pull systems, the Consumer determines when it receives data from the data Producer. The Producer itself is unaware of when the data will be delivered to the Consumer.&lt;/p&gt;

&lt;p&gt;Every JavaScript Function is a Pull system. The function is a Producer of data, and the code that calls the function is consuming it by "pulling" out a single return value from its call.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Push?&lt;/strong&gt; In Push systems, the Producer determines when to send data to the Consumer. The Consumer is unaware of when it will receive that data.&lt;/p&gt;

&lt;p&gt;Promises are the most common type of Push system in JavaScript today. A Promise (the Producer) delivers a resolved value to registered callbacks (the Consumers), but unlike functions, it is the Promise which is in charge of determining precisely when that value is "pushed" to the callbacks&lt;/p&gt;

&lt;p&gt;RxJS introduces Observables, a new Push system for JavaScript. An Observable is a Producer of multiple values, "pushing" them to Observers (Consumers).&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;SINGLE Value&lt;/th&gt;
&lt;th&gt;MULTIPLE Value&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Pull&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Function&lt;/td&gt;
&lt;td&gt;Iterator&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Push&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Promise&lt;/td&gt;
&lt;td&gt;Observable&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Observable :
&lt;/h3&gt;

&lt;p&gt;Observables are lazy Push collections of multiple values.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Observables are like functions with zero arguments, but generalize those to allow multiple values.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Consider the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;foo&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;42&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;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;call&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// same as foo()&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&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;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;call&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// same as foo()&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We expect to see as output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"Hello"
42
"Hello"
42
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can write the same behavior above, but with Observables:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Observable&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rxjs&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;foo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Observable&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;subscriber&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;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&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;subscriber&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;next&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="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;subscribe&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;x&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;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;subscribe&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;y&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;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;y&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;And the output is the same:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"Hello"
42
"Hello"
42
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This happens because both functions and Observables are lazy computations. If you don't call the function, the console.log('Hello') won't happen. Also with Observables, if you don't "call" it (with subscribe), the console.log('Hello') won't happen&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Subscribing to an Observable is analogous to calling a Function.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Some people claim that Observables are asynchronous. That is not true. If you surround a function call with logs, like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;before&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;call&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;after&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;You will see the output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"before"
"Hello"
42
"after"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And this is the same behavior with Observables:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;before&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;subscribe&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;x&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;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;after&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;And the output is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"before"
"Hello"
42
"after"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Which proves the subscription of foo was entirely synchronous, just like a function.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Observables are able to deliver values either synchronously or asynchronously.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;What is the difference between an Observable and a function? Observables can "return" multiple values over time, something which functions cannot. You can't do this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;foo&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;42&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// dead code. will never happen&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Functions can only return one value. Observables, however, can do this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Observable&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rxjs&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;foo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Observable&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;subscriber&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;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&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;subscriber&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;next&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="nx"&gt;subscriber&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "return" another value&lt;/span&gt;
  &lt;span class="nx"&gt;subscriber&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "return" yet another&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;before&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;subscribe&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;x&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;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;after&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;With synchronous output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"before"
"Hello"
42
100
200
"after"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But you can also "return" values asynchronously:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Observable&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rxjs&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;foo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Observable&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;subscriber&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;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&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;subscriber&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;next&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="nx"&gt;subscriber&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;subscriber&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nf"&gt;setTimeout&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;subscriber&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;300&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// happens asynchronously&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;before&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;subscribe&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;x&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;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;after&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;Output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"before"
"Hello"
42
100
200
"after"
300
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Conclusion:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;func.call() means "give me one value synchronously"&lt;/li&gt;
&lt;li&gt;observable.subscribe() means "give me any amount of values, either synchronously or asynchronously"&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Core Observable concerns:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Creating Observables:&lt;/strong&gt;
The Observable constructor takes one argument: the subscribe function.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Observable&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rxjs&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;observable&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Observable&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;subscribe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;subscriber&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;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;setInterval&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;subscriber&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hi&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="mi"&gt;1000&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;blockquote&gt;
&lt;p&gt;Observables can be created with new Observable. Most commonly, observables are created using creation functions, like of, from, interval, etc.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Subscribing to Observables:&lt;/strong&gt; The Observable observable in the example can be subscribed to, like this:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;observable.subscribe((x) =&amp;gt; console.log(x));
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Subscribing to an Observable is like calling a function, providing callbacks where the data will be delivered to.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Executing the Observable:&lt;/strong&gt; The code inside new Observable(function subscribe(subscriber) {...}) represents an "Observable execution", a lazy computation that only happens for each Observer that subscribes. The execution produces multiple values over time, either synchronously or asynchronously.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are three types of values an Observable Execution can deliver:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;"Next" notification: sends a value such as a Number, a String, an Object, etc.&lt;/li&gt;
&lt;li&gt;"Error" notification: sends a JavaScript Error or exception.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;"Complete" notification: does not send a value.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;In an Observable Execution, zero to infinite Next notifications may be delivered. If either an Error or Complete notification is delivered, then nothing else can be delivered afterwards.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Disposing Observables:&lt;/strong&gt;&lt;br&gt;
Because Observable Executions may be infinite, and it's common for an Observer to want to abort execution in finite time, we need an API for canceling an execution. Since each execution is exclusive to one Observer only, once the Observer is done receiving values, it has to have a way to stop the execution, in order to avoid wasting computation power or memory resources.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rxjs&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;observable&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;30&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;subscription&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;observable&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;subscribe&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="c1"&gt;// Later:&lt;/span&gt;
&lt;span class="nx"&gt;subscription&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;unsubscribe&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;When you subscribe, you get back a Subscription, which represents the ongoing execution. Just call unsubscribe() to cancel the execution.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Observer:
&lt;/h3&gt;

&lt;p&gt;What is an Observer? An Observer is a consumer of values delivered by an Observable. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable: next, error, and complete. The following is an example of a typical Observer object:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;observer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;next&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Observer got a next value: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;err&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Observer got an error: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="na"&gt;complete&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Observer got a complete notification&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To use the Observer, provide it to the subscribe of an Observable:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;observable.subscribe(observer);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Observers are just objects with three callbacks, one for each type of notification that an Observable may deliver.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;NOTE:&lt;/strong&gt; Observers in RxJS may also be partial. If you don't provide one of the callbacks, the execution of the Observable will still happen normally, except some types of notifications will be ignored, because they don't have a corresponding callback in the Observer.&lt;/p&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




</description>
    </item>
    <item>
      <title>Introduction to Reactive Programming</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Wed, 03 Jan 2024 00:30:00 +0000</pubDate>
      <link>https://dev.to/rajrathod/introduction-to-reactive-programming-3bcf</link>
      <guid>https://dev.to/rajrathod/introduction-to-reactive-programming-3bcf</guid>
      <description>&lt;p&gt;Reactive Programming is a programming paradigm that deals with asynchronous data streams and the propagation of changes. It provides a way to handle and respond to events, user inputs, and data changes in a declarative and efficient manner. Reactive programming is widely used in modern software development, especially in the context of building responsive and interactive user interfaces, as well as in systems that involve real-time data processing.&lt;/p&gt;

&lt;p&gt;Here are some key concepts and principles associated with Reactive Programming:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Observable&lt;/strong&gt;: At the core of reactive programming is the concept of an "observable." An observable is a sequence of values over time. It represents a stream of data that can be observed. Observables can emit three types of events: next (data is emitted), error (an error occurs), and complete (the stream is complete).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Observer&lt;/strong&gt;: An observer is an entity that subscribes to an observable to receive notifications about changes in the observable's state. The observer pattern is fundamental to reactive programming. When the state of the observable changes, the subscribed observer is notified, and it can react accordingly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Operators&lt;/strong&gt;: Operators are functions or methods that can be applied to observables to transform, filter, or combine the data in the stream. Operators allow developers to compose complex operations by chaining them together, creating a more declarative and readable code.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Subscription&lt;/strong&gt;: The act of connecting an observer to an observable is called subscription. This establishes a relationship between the observer and the observable, allowing the observer to receive notifications when the observable's state changes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reactive Streams&lt;/strong&gt;: Reactive Streams is a standard for asynchronous stream processing with non-blocking backpressure. It defines a set of interfaces and rules for building reactive systems that can handle data streams efficiently and with low resource consumption.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Declarative Programming&lt;/strong&gt;: Reactive programming is often associated with declarative programming paradigms. Instead of specifying how to achieve a particular result (imperative programming), developers declare what the result should be, and the reactive system automatically takes care of managing the underlying changes and updates.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Backpressure&lt;/strong&gt;: In the context of reactive programming, backpressure is a mechanism to handle situations where the rate of incoming data is higher than the rate at which the system can process it. Backpressure allows the system to communicate to the data source to slow down or stop producing data temporarily.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  How reactive programming differs from imperative programming
&lt;/h2&gt;

&lt;p&gt;Reactive programming and imperative programming are two distinct programming paradigms that approach the development of software in different ways. Here are key differences between reactive programming and imperative programming:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Programming Model:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Imperative Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Focuses on describing step-by-step procedures and instructions for the computer to follow.&lt;/li&gt;
&lt;li&gt;Developers explicitly specify the sequence of operations to achieve a desired outcome.&lt;/li&gt;
&lt;li&gt;The emphasis is on "how" to perform tasks.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Reactive Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Focuses on the flow of data and the propagation of changes.&lt;/li&gt;
&lt;li&gt;Programs are structured around reacting to changes in data and events.&lt;/li&gt;
&lt;li&gt;The emphasis is on "what" to achieve, allowing the system to automatically react to changes.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. State Handling:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Imperative Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Involves the manipulation of mutable state.&lt;/li&gt;
&lt;li&gt;Variables are updated over time to reflect changes in the program's state.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Reactive Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Emphasizes the use of immutable data and reactive streams.&lt;/li&gt;
&lt;li&gt;Changes in state are propagated through the system using observable streams, allowing for a more declarative approach.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Control Flow:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Imperative Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Control flow structures such as loops and conditionals are used to dictate the order of execution.&lt;/li&gt;
&lt;li&gt;Execution follows a sequential path of statements.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Reactive Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Control flow is implicit and driven by the flow of data and events.&lt;/li&gt;
&lt;li&gt;Reactive systems react to changes automatically, leading to a more event-driven and asynchronous approach.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. Code Readability and Maintainability:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Imperative Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Code can become more complex with increased reliance on mutable state and explicit control flow.&lt;/li&gt;
&lt;li&gt;Debugging and understanding the flow of execution are crucial.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Reactive Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Emphasizes a more declarative and concise style of coding.&lt;/li&gt;
&lt;li&gt;Reactive pipelines and transformations make it easier to understand and reason about the flow of data.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  5. Concurrency and Asynchrony:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Imperative Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Concurrency and asynchronous operations may require explicit handling through callbacks, promises, or threading.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Reactive Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Built-in support for handling asynchronous operations and managing concurrency through reactive streams.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  6. Error Handling:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Imperative Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Error handling often involves explicit checks and branching in the code.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Reactive Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Provides a more centralized and composable approach to error handling, often using operators within the reactive pipeline.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  7. Use Cases:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Imperative Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Well-suited for procedural tasks and algorithms where the step-by-step execution is important.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Reactive Programming:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Particularly effective in scenarios involving real-time data, user interfaces, and event-driven applications.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Data Communication : System design</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Mon, 11 Sep 2023 01:59:00 +0000</pubDate>
      <link>https://dev.to/rajrathod/data-communication-system-design-3hgf</link>
      <guid>https://dev.to/rajrathod/data-communication-system-design-3hgf</guid>
      <description>&lt;h2&gt;
  
  
  Data Communication:
&lt;/h2&gt;

&lt;p&gt;Data communication, also known as data networking or network communication, refers to the transmission of digital data between devices or systems over a network. It is a fundamental concept in computer science and telecommunications and plays a crucial role in enabling communication and data exchange in today's interconnected world. Here are key aspects and components of data communication:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Data Transmission Medium&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Physical Media&lt;/strong&gt;: Data can be transmitted over various physical mediums, including:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Copper Wire&lt;/strong&gt;: Used in Ethernet and telephone connections.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Fiber Optic Cable&lt;/strong&gt;: Provides high-speed and long-distance data transmission.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Wireless&lt;/strong&gt;: Radio waves, microwaves, and satellite links are used for wireless communication.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Coaxial Cable&lt;/strong&gt;: Often used for cable television and some data networks.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;&lt;p&gt;&lt;strong&gt;Wireless Technologies&lt;/strong&gt;: Wireless data communication includes Wi-Fi, cellular networks (3G, 4G, 5G), Bluetooth, and satellite communication.&lt;/p&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Data Transmission Methods&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Serial vs. Parallel&lt;/strong&gt;: Data can be transmitted serially (one bit at a time) or in parallel (multiple bits simultaneously).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Synchronous vs. Asynchronous&lt;/strong&gt;: In synchronous transmission, data is sent in synchronized frames, while asynchronous transmission does not require strict synchronization.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. Network Protocols and Standards&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Protocols&lt;/strong&gt;: Network protocols define rules and conventions for data communication. Examples include TCP/IP, HTTP, FTP, SMTP, and more.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Standards&lt;/strong&gt;: Standards organizations like the IEEE, ISO, and ITU develop specifications for networking and communication technologies, ensuring interoperability.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;4. Network Topologies&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Physical Topology&lt;/strong&gt;: Describes the physical layout of devices in a network, such as star, bus, ring, or mesh topologies.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Logical Topology&lt;/strong&gt;: Defines how data flows in the network, often based on protocols (e.g., Ethernet, Token Ring).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;5. Network Devices&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Routers&lt;/strong&gt;: Devices that connect different networks and route data between them.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Switches&lt;/strong&gt;: Devices that forward data within a local network based on MAC addresses.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Firewalls&lt;/strong&gt;: Network security devices that filter incoming and outgoing traffic.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Modems&lt;/strong&gt;: Devices that modulate and demodulate signals to enable digital data transmission over analog lines (e.g., DSL modems).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;6. Network Layers&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;OSI Model&lt;/strong&gt;: The OSI (Open Systems Interconnection) model defines seven layers, each responsible for specific functions in data communication. These layers include physical, data link, network, transport, session, presentation, and application layers.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;7. Transmission Modes&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Simplex&lt;/strong&gt;: Data flows in one direction only (e.g., TV broadcast).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Half-Duplex&lt;/strong&gt;: Data can flow in both directions but not simultaneously (e.g., walkie-talkies).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Full-Duplex&lt;/strong&gt;: Data can flow in both directions simultaneously (e.g., phone conversation).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;8. Error Detection and Correction&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Techniques like checksums and error-correcting codes are used to detect and correct errors in transmitted data.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;9. Data Encoding and Modulation&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Data is often encoded into electrical, optical, or radio wave signals for transmission. Techniques like modulation are used to represent digital data in analog signals.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;10. Network Security and Encryption&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Data communication often involves security measures to protect data from unauthorized access and eavesdropping. Encryption and secure protocols are used for secure communication.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;11. Bandwidth and Data Rate&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bandwidth represents the capacity of a communication channel, while data rate refers to the speed at which data is transmitted.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;12. Data Routing&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Data is routed through networks using routing algorithms and tables that determine the best path from the source to the destination.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Data communication is the foundation of the internet, telecommunication networks, and various other communication systems. It enables the exchange of information, multimedia content, and real-time interactions across the globe, impacting various aspects of modern life, from business and education to entertainment and healthcare.&lt;/p&gt;

&lt;h2&gt;
  
  
  Application Layer:
&lt;/h2&gt;

&lt;p&gt;The application layer is one of the seven layers in the OSI (Open Systems Interconnection) model and one of the five layers in the TCP/IP model. It is the topmost layer in both models and plays a fundamental role in network communication, as it focuses on end-user services and applications. Here's an overview of the application layer:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fopg7tsvapbmdpcssq9fj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fopg7tsvapbmdpcssq9fj.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Functions of the Application Layer&lt;/strong&gt;:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;End-User Services&lt;/strong&gt;: The primary purpose of the application layer is to provide various network services directly to end-users or applications. It acts as an interface between the network and the user, ensuring that applications can communicate over the network.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Application Protocols&lt;/strong&gt;: The application layer defines various protocols and standards for specific applications and services to communicate with one another. These protocols determine how data is formatted, transmitted, and received by applications.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Presentation and Translation&lt;/strong&gt;: The application layer is responsible for data presentation and conversion. It ensures that data is in a format that the receiving application can understand and interpret. This includes tasks like data encryption, compression, and character set conversion.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Session Management&lt;/strong&gt;: The application layer can establish, maintain, and terminate communication sessions between applications. It helps manage the flow of data and ensures that information is synchronized between sender and receiver.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Application Identification and Addressing&lt;/strong&gt;: The application layer defines mechanisms for identifying applications and services on a network, typically using port numbers or other identifiers. This enables routers and switches to forward data to the appropriate destination.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;User Authentication and Authorization&lt;/strong&gt;: Some application layer protocols and services handle user authentication and authorization, ensuring that only authorized users can access certain resources or services.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;File Transfer and Remote Access&lt;/strong&gt;: Protocols like FTP (File Transfer Protocol) and SSH (Secure Shell) operate at the application layer and enable file transfer and remote access to servers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Email Services&lt;/strong&gt;: Email protocols such as SMTP (Simple Mail Transfer Protocol) for sending emails and POP3/IMAP for receiving emails operate at the application layer.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Web Services&lt;/strong&gt;: HTTP (Hypertext Transfer Protocol), used for web browsing and web-based applications, is a key application layer protocol.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Examples of Application Layer Protocols and Services&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;HTTP/HTTPS&lt;/strong&gt;: Hypertext Transfer Protocol and its secure version are used for web browsing and web services.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SMTP&lt;/strong&gt;: Simple Mail Transfer Protocol is used for sending email.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;POP3/IMAP&lt;/strong&gt;: Post Office Protocol and Internet Message Access Protocol are used for receiving email.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;FTP&lt;/strong&gt;: File Transfer Protocol is used for transferring files.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SSH&lt;/strong&gt;: Secure Shell is used for secure remote access and management of network devices.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;DNS&lt;/strong&gt;: Domain Name System resolves domain names into IP addresses.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SNMP&lt;/strong&gt;: Simple Network Management Protocol is used for managing and monitoring network devices.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TELNET&lt;/strong&gt;: Used for remote terminal access (not secure).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The application layer is critical for enabling communication between different software applications and services across a network. It provides the necessary abstractions and protocols to facilitate this communication, ensuring that data is exchanged accurately and efficiently.&lt;/p&gt;

&lt;h2&gt;
  
  
  Network Protocols:
&lt;/h2&gt;

&lt;p&gt;HTTP (Hypertext Transfer Protocol), TCP (Transmission Control Protocol), and UDP (User Datagram Protocol) are fundamental protocols in computer networking that play essential roles in data communication and web services. Each protocol serves a specific purpose and has its characteristics and use cases. Here's an overview of each:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb0l6a19qac8dhho1l3sj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb0l6a19qac8dhho1l3sj.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;HTTP (Hypertext Transfer Protocol)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Purpose&lt;/strong&gt;: HTTP is an application layer protocol used for transferring hypertext (text-based documents with links) and other data between a client (typically a web browser) and a web server.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Characteristics&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Request-Response Model: HTTP follows a client-server model where a client sends requests to a web server, and the server responds with the requested content.&lt;/li&gt;
&lt;li&gt;Stateless: HTTP is stateless, meaning each request-response cycle is independent, and the server doesn't retain information about previous requests from the same client.&lt;/li&gt;
&lt;li&gt;Connectionless: By default, HTTP uses a connectionless model where each request/response is a separate connection. However, HTTP/1.1 introduced the option to reuse connections (HTTP Keep-Alive) for multiple requests.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Use Cases&lt;/strong&gt;: HTTP is the foundation of the World Wide Web and is used for browsing websites, fetching resources like HTML pages, images, videos, and interacting with web services through APIs (e.g., RESTful APIs).&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;TCP (Transmission Control Protocol)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Purpose&lt;/strong&gt;: TCP is a transport layer protocol that provides reliable, connection-oriented, and stream-oriented data communication between two devices in a network.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Characteristics&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Reliable: TCP ensures the reliable delivery of data by acknowledging received packets, retransmitting lost packets, and ordering received packets.&lt;/li&gt;
&lt;li&gt;Connection-Oriented: TCP establishes a connection before data exchange and terminates the connection after communication.&lt;/li&gt;
&lt;li&gt;Stream-Oriented: TCP treats data as a continuous stream of bytes, providing a byte-stream interface to applications.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Use Cases&lt;/strong&gt;: TCP is commonly used for applications where data reliability and ordering are critical, such as web browsing, email, file transfer (e.g., FTP), and remote access (e.g., SSH).&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;UDP (User Datagram Protocol)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Purpose&lt;/strong&gt;: UDP is a transport layer protocol that provides a connectionless and lightweight method for sending datagrams (packets) of data between devices in a network.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Characteristics&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Connectionless: UDP does not establish a connection before sending data and does not guarantee the delivery or ordering of data packets.&lt;/li&gt;
&lt;li&gt;Lightweight: UDP has lower overhead compared to TCP because it lacks features like flow control and error correction.&lt;/li&gt;
&lt;li&gt;Low Latency: UDP is preferred for real-time applications where low latency is crucial, such as VoIP, online gaming, and multimedia streaming.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Use Cases&lt;/strong&gt;: UDP is suitable for applications where real-time communication is more important than data integrity, such as video conferencing, DNS, DHCP, and various real-time protocols.
Remote Procedure Call (RPC), gRPC, REST, and GraphQL are all protocols and technologies used for building APIs and enabling communication between clients and servers in distributed systems. Each of these technologies has its own characteristics and use cases. Here's an in-depth explanation of each:&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Remote Procedure Call (RPC)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Purpose&lt;/strong&gt;: RPC is a protocol that allows a program or function to execute code on a remote server or service as if it were a local function call. It abstracts the complexities of network communication, making it appear as if the client is invoking a function on the server.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Characteristics&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Synchronous: RPC calls are typically synchronous, meaning the client waits for the remote procedure to complete and return a response.&lt;/li&gt;
&lt;li&gt;Language Agnostic: RPC can work across different programming languages, allowing clients and servers to be written in different languages.&lt;/li&gt;
&lt;li&gt;Communication Overhead: RPC may involve serialization/deserialization of data and network communication, which can add overhead.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Use Cases&lt;/strong&gt;: RPC is commonly used in scenarios where you need direct control over remote services and want to make remote calls feel like local calls. Examples include remote method invocation in Java RMI and gRPC.&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;gRPC&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Purpose&lt;/strong&gt;: gRPC is an open-source RPC framework developed by Google. It uses HTTP/2 as the transport protocol and Protocol Buffers (protobuf) as the interface definition language (IDL) to define services and message structures.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Characteristics&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Strongly Typed: gRPC uses Protocol Buffers to define APIs and data structures, providing strong typing and code generation.&lt;/li&gt;
&lt;li&gt;Language Agnostic: Similar to RPC, gRPC allows communication between clients and servers implemented in different programming languages.&lt;/li&gt;
&lt;li&gt;Bidirectional Streaming: gRPC supports bidirectional streaming, enabling both clients and servers to send multiple messages in a single RPC.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Use Cases&lt;/strong&gt;: gRPC is well-suited for building efficient and performant APIs in microservices architectures. It's commonly used in scenarios where high performance, strong typing, and bidirectional communication are important.&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;REST (Representational State Transfer)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Purpose&lt;/strong&gt;: REST is an architectural style for designing networked applications. It is based on a set of principles and constraints that define how resources are identified and addressed via URLs, and how they can be manipulated using a limited set of standardized HTTP methods.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Characteristics&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Stateless: RESTful services are stateless, meaning each request from a client to a server must contain all the information needed to understand and process the request.&lt;/li&gt;
&lt;li&gt;CRUD Operations: REST maps CRUD (Create, Read, Update, Delete) operations to HTTP methods (POST, GET, PUT, DELETE) for resource manipulation.&lt;/li&gt;
&lt;li&gt;Representations: Resources in REST can have multiple representations (e.g., JSON, XML, HTML), and clients can specify their preferred representation.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Use Cases&lt;/strong&gt;: REST is widely used for building APIs on the web, including web services, social media APIs, and any scenario where stateless communication over HTTP is appropriate.&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;GraphQL&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Purpose&lt;/strong&gt;: GraphQL is a query language and runtime for APIs that allows clients to request only the data they need and nothing more. It provides a flexible and efficient approach to data retrieval and manipulation.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Characteristics&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Flexible Queries: Clients can specify exactly what data they need in their queries, reducing over-fetching or under-fetching of data.&lt;/li&gt;
&lt;li&gt;Strongly Typed: GraphQL APIs are strongly typed and introspective, meaning the schema is self-documenting, and clients can discover available operations and types.&lt;/li&gt;
&lt;li&gt;Single Endpoint: GraphQL typically exposes a single endpoint for all API operations, making it easier to manage and optimize.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Use Cases&lt;/strong&gt;: GraphQL is suitable for scenarios where clients have diverse data needs, need to reduce over-fetching of data, or want to consolidate multiple API endpoints into a single endpoint. It is often used in modern web and mobile app development.&lt;/li&gt;

&lt;/ul&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/" rel="noopener noreferrer"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055" rel="noopener noreferrer"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en" rel="noopener noreferrer"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/" rel="noopener noreferrer"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod" rel="noopener noreferrer"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




</description>
      <category>beginners</category>
      <category>programming</category>
      <category>tutorial</category>
      <category>systemdesign</category>
    </item>
    <item>
      <title>Load Balancers and Reverse Proxy: System design</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Mon, 04 Sep 2023 10:51:35 +0000</pubDate>
      <link>https://dev.to/rajrathod/load-balancers-and-reverse-proxy-system-design-k51</link>
      <guid>https://dev.to/rajrathod/load-balancers-and-reverse-proxy-system-design-k51</guid>
      <description>&lt;h2&gt;
  
  
  Load Balancers ?
&lt;/h2&gt;

&lt;p&gt;Load balancers are essential components in computer networking and web services infrastructure. They play a crucial role in distributing incoming network traffic or requests across multiple servers or resources to ensure efficient and reliable system operation. The primary purpose of load balancers is to optimize resource utilization, improve application availability, and enhance system scalability. Here are some key aspects and types of load balancers:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg9frw09j4yzn2lf0phkf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg9frw09j4yzn2lf0phkf.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Traffic Distribution&lt;/strong&gt;: Load balancers evenly distribute incoming network traffic, such as HTTP requests, TCP connections, or UDP packets, among a group of backend servers. This distribution prevents any single server from being overwhelmed while ensuring that all servers are utilized effectively.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;High Availability&lt;/strong&gt;: Load balancers enhance system availability by directing traffic away from unhealthy or unresponsive servers. In the event of a server failure, a load balancer can detect the issue and automatically reroute traffic to healthy servers, minimizing downtime.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scalability&lt;/strong&gt;: Load balancers facilitate horizontal scaling by allowing new servers to be added to the server pool without disrupting the service. As the load increases, additional servers can be introduced, and the load balancer will distribute traffic proportionally.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Session Persistence&lt;/strong&gt;: Some applications require that user sessions remain connected to the same backend server for the duration of their session. Load balancers can support session persistence by using techniques like cookie-based or IP-based affinity to ensure requests from the same client go to the same server.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Types of Load Balancers&lt;/strong&gt;:&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Layer 4 Load Balancer&lt;/strong&gt;: These operate at the transport layer (Layer 4) of the OSI model and are based on IP addresses and ports. They distribute traffic based on factors like source IP, destination IP, and port numbers. Examples include HAProxy and Amazon Network Load Balancer (NLB).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Layer 7 Load Balancer&lt;/strong&gt;: These operate at the application layer (Layer 7) and can make routing decisions based on content, such as HTTP headers or URL paths. They are more application-aware and can perform advanced routing and content-based load balancing. Examples include NGINX and Application Load Balancer (ALB) from AWS.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Global Load Balancer&lt;/strong&gt;: These distribute traffic across multiple data centers or regions, providing high availability and disaster recovery. They can also route traffic based on geographic proximity or other criteria. Examples include Google Cloud Load Balancing and Azure Traffic Manager.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Hardware Load Balancer&lt;/strong&gt;: These are dedicated physical appliances designed for load balancing. They offer high performance and are suitable for large-scale deployments. Examples include F5 BIG-IP and Citrix NetScaler.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Software Load Balancer&lt;/strong&gt;: These are software-based load balancers that run on standard server hardware or virtual machines. They are often used in virtualized or cloud environments. Examples include HAProxy and NGINX.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Health Checks&lt;/strong&gt;: Load balancers continuously monitor the health of backend servers by periodically sending health checks (e.g., ICMP ping, HTTP requests) to ensure that servers are responsive and functioning correctly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Security&lt;/strong&gt;: Load balancers can provide an additional layer of security by hiding the internal IP addresses of backend servers and mitigating some common security threats, such as Distributed Denial of Service (DDoS) attacks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;SSL/TLS Termination&lt;/strong&gt;: Load balancers can offload SSL/TLS encryption and decryption, reducing the computational load on backend servers and improving performance.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Load balancers are a fundamental component of modern web applications, cloud services, and large-scale network architectures, helping to ensure reliability, scalability, and optimal performance. The choice of a load balancer type and configuration depends on the specific requirements and constraints of the application or network environment.&lt;/p&gt;

&lt;h2&gt;
  
  
  Load Balancing Algorithms
&lt;/h2&gt;

&lt;p&gt;Load balancing algorithms are used by load balancers to distribute incoming network traffic or requests across multiple backend servers or resources. These algorithms determine how traffic is allocated to ensure even distribution, optimize resource utilization, and improve application performance. Several load balancing algorithms are available, each with its own characteristics and use cases. Here are some commonly used load balancing algorithms:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Round Robin&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Description&lt;/strong&gt;: Round robin is one of the simplest load balancing algorithms. It evenly distributes requests to each server in a cyclic fashion, ensuring that each server gets an equal share of the traffic.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use Cases&lt;/strong&gt;: Round robin is suitable when all backend servers have similar processing capabilities, and there are no significant differences in their performance or capacity.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Least Connections&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Description&lt;/strong&gt;: This algorithm directs incoming requests to the server with the fewest active connections at the moment. It aims to distribute traffic based on the current server load.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use Cases&lt;/strong&gt;: Least connections is useful when backend servers have varying processing capacities, and you want to avoid overloading any server. It helps distribute requests to servers with available resources.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;IP Hash&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Description&lt;/strong&gt;: IP hash load balancing uses the client's IP address to determine which backend server to route the request to. Each unique IP address consistently maps to a specific server.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use Cases&lt;/strong&gt;: This algorithm is suitable for scenarios where maintaining session persistence is crucial, as it ensures that requests from the same client always go to the same server.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Weighted Round Robin&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Description&lt;/strong&gt;: In weighted round robin, each server is assigned a weight or priority value. Servers with higher weights receive more traffic compared to those with lower weights. It allows you to allocate resources proportionally.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use Cases&lt;/strong&gt;: Weighted round robin is beneficial when servers have different capacities or performance levels. You can assign higher weights to more powerful servers.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Weighted Least Connections&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Description&lt;/strong&gt;: Similar to weighted round robin, this algorithm assigns weights to servers but considers the number of active connections instead of the server's load. Servers with both lower connection counts and higher weights receive more requests.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use Cases&lt;/strong&gt;: It's helpful in scenarios where servers have different capacities and the goal is to distribute traffic based on both capacity and current load.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Random&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Description&lt;/strong&gt;: The random load balancing algorithm selects a backend server at random for each new request. While simple, it doesn't guarantee even distribution and may not be suitable for all use cases.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use Cases&lt;/strong&gt;: Random load balancing is used when an element of unpredictability is acceptable or when other algorithms aren't necessary due to uniform server capacity and load.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Least Response Time&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Description&lt;/strong&gt;: This algorithm directs traffic to the server with the quickest response time based on previous performance metrics. It aims to reduce latency by selecting the fastest server.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use Cases&lt;/strong&gt;: Least response time is suitable when you want to minimize latency and ensure that requests are served by the server with the lowest response time.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Chaos Monkey&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Description&lt;/strong&gt;: A Chaos Monkey approach involves intentionally introducing faults or random disruptions into the system to test its resilience. While not a traditional load balancing algorithm, it's a concept used for chaos engineering and ensuring system robustness.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The choice of load balancing algorithm depends on your specific requirements, the characteristics of your backend servers, and the goals you want to achieve, such as load distribution, performance optimization, or session persistence. In many cases, load balancers support multiple algorithms, allowing you to select the most appropriate one for your application or service.&lt;/p&gt;

&lt;h2&gt;
  
  
  Load Balancing vs Reverse Proxy
&lt;/h2&gt;

&lt;p&gt;Load balancing and reverse proxy are two closely related but distinct concepts often used together to improve the performance, scalability, and security of web applications and services. Here's an explanation of each concept and how they work together:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Load Balancing&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Purpose&lt;/strong&gt;: Load balancing is a technique used to distribute incoming network traffic or requests across multiple servers or resources to ensure efficient resource utilization and high availability.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;How it Works&lt;/strong&gt;: Load balancers receive incoming traffic and then decide how to distribute it among a group of backend servers. The distribution can be based on various algorithms, such as round-robin, least connections, or weighted distribution, depending on the load balancer's configuration.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Benefits&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Scalability&lt;/strong&gt;: Load balancers allow you to add or remove servers from the server pool dynamically, helping to scale your application horizontally.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;High Availability&lt;/strong&gt;: They can detect and route traffic away from unhealthy or unresponsive servers, ensuring that the service remains available even if some servers fail.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Performance Optimization&lt;/strong&gt;: Load balancing evenly distributes traffic, preventing any single server from being overwhelmed, which can lead to improved response times.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Types&lt;/strong&gt;: Layer 4 and Layer 7 load balancers are commonly used, as mentioned in the previous response.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Reverse Proxy&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Purpose&lt;/strong&gt;: A reverse proxy is a server or software component that sits between client devices (such as web browsers) and a group of backend servers. It acts as an intermediary, handling client requests and forwarding them to the appropriate backend server, and then returning the server's response to the client.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F04zbzwx977i1zyxmuxzt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F04zbzwx977i1zyxmuxzt.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;How it Works&lt;/strong&gt;: When a client sends a request to access a web application or service, the request is first received by the reverse proxy. The reverse proxy can then perform various tasks before forwarding the request to the appropriate backend server. These tasks can include SSL/TLS termination, load balancing, caching, and security checks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Benefits&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Security&lt;/strong&gt;: Reverse proxies can protect backend servers by hiding their internal IP addresses and protecting against common web vulnerabilities like SQL injection and Cross-Site Scripting (XSS) attacks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Caching&lt;/strong&gt;: They can cache static content, reducing the load on backend servers and improving response times for frequently requested resources.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Load Balancing&lt;/strong&gt;: Reverse proxies often include load balancing functionality, distributing incoming requests to backend servers based on predefined rules.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SSL/TLS Termination&lt;/strong&gt;: They can handle SSL/TLS encryption and decryption, offloading this resource-intensive task from backend servers.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Popular Reverse Proxy Software&lt;/strong&gt;: Nginx and Apache HTTP Server with mod_proxy are commonly used reverse proxy solutions.&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Load balancing and reverse proxy often work together&lt;/strong&gt; in modern web architectures. A reverse proxy can act as the entry point for incoming requests, handling SSL/TLS termination, routing requests to the appropriate backend servers, and possibly applying security measures. It can also perform load balancing by distributing requests among multiple backend servers. This combination helps ensure high availability, scalability, and security for web applications and services.&lt;/p&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/" rel="noopener noreferrer"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055" rel="noopener noreferrer"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en" rel="noopener noreferrer"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/" rel="noopener noreferrer"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod" rel="noopener noreferrer"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




</description>
      <category>beginners</category>
      <category>programming</category>
      <category>tutorial</category>
      <category>systemdesign</category>
    </item>
    <item>
      <title>What is DNS and CDN ?</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Fri, 01 Sep 2023 01:01:33 +0000</pubDate>
      <link>https://dev.to/rajrathod/what-is-dns-and-cdn--3o38</link>
      <guid>https://dev.to/rajrathod/what-is-dns-and-cdn--3o38</guid>
      <description>&lt;h2&gt;
  
  
  What is the DNS?
&lt;/h2&gt;

&lt;p&gt;The Domain Name System (DNS) is a fundamental component of the internet that plays a crucial role in translating human-readable domain names into machine-readable IP addresses. This translation is essential for communication between devices on a network. DNS acts as a distributed database and naming system, providing a way to associate domain names (like &lt;a href="http://www.example.com" rel="noopener noreferrer"&gt;www.example.com&lt;/a&gt;) with their corresponding IP addresses (like 192.0.2.1).&lt;/p&gt;

&lt;p&gt;Here's a deeper explanation of the various aspects of the Domain Name System:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Hierarchical Structure:&lt;/strong&gt; DNS is organized in a hierarchical structure that resembles an inverted tree. At the root of this tree is the "root domain," represented by a dot (.). Below the root, there are top-level domains (TLDs), such as .com, .org, .net, and country-code TLDs like .us, .uk, etc. These TLDs are managed by specific organizations called domain registries.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Domain Names:&lt;/strong&gt; Domain names are human-readable labels used to identify resources on the internet. They consist of multiple parts, separated by dots, which are called labels or segments. The rightmost label is the top-level domain (TLD), followed by the second-level domain (SLD), and optionally more subdomains. For example, in &lt;a href="http://www.example.com" rel="noopener noreferrer"&gt;www.example.com&lt;/a&gt;, "www" is a subdomain, "example" is the second-level domain, and ".com" is the top-level domain.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Name Servers:&lt;/strong&gt; DNS operates through a network of servers called name servers. These servers store and distribute DNS records that map domain names to IP addresses. There are different types of name servers, including authoritative name servers, recursive name servers, and caching name servers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Authoritative Name Servers:&lt;/strong&gt; These servers hold the official DNS records for a specific domain. Each domain has a set of authoritative name servers responsible for storing and providing information about that domain. When a query is made for a domain's DNS records, the authoritative name servers are queried for the most up-to-date information.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Recursive Name Servers:&lt;/strong&gt; Also known as resolving name servers, these servers are responsible for handling DNS queries from clients (such as your computer or smartphone). If a recursive name server receives a query for a domain's IP address, it starts the process of resolving the query by contacting the authoritative name servers and fetching the necessary DNS records.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Caching Name Servers:&lt;/strong&gt; Caching name servers store DNS records temporarily to reduce the load on authoritative name servers and speed up subsequent queries for the same domain. When a caching name server receives a query, it checks if it already has the required DNS records in its cache. If the records are present and not expired, the caching server provides the IP address without needing to contact authoritative name servers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;DNS Records:&lt;/strong&gt; DNS records are the actual data stored in DNS databases. They contain information like IP addresses, mail server addresses, text records (TXT), service location records (SRV), and more. Common DNS record types include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A Record: Maps a domain name to an IPv4 address.&lt;/li&gt;
&lt;li&gt;AAAA Record: Maps a domain name to an IPv6 address.&lt;/li&gt;
&lt;li&gt;MX Record: Specifies mail servers responsible for receiving email.&lt;/li&gt;
&lt;li&gt;CNAME Record: Creates an alias for a domain (canonical name).&lt;/li&gt;
&lt;li&gt;TXT Record: Holds arbitrary text data, often used for verification and authentication.&lt;/li&gt;
&lt;li&gt;NS Record: Lists the authoritative name servers for a domain.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;DNS Resolution Process:&lt;/strong&gt; When you enter a domain name in your browser or an application, the following steps occur for DNS resolution:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Your device queries a local recursive name server.&lt;/li&gt;
&lt;li&gt;If the local server has the answer in its cache, it returns the IP address.&lt;/li&gt;
&lt;li&gt;If not, the local server acts as a resolver and contacts the authoritative name server responsible for the domain.&lt;/li&gt;
&lt;li&gt;The authoritative server provides the IP address to the local server.&lt;/li&gt;
&lt;li&gt;The local server caches the result and returns the IP address to your device.&lt;/li&gt;
&lt;li&gt;Your device can now use the IP address to establish a connection with the appropriate server.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;DNS Hierarchy and Zones:&lt;/strong&gt; The DNS hierarchy is divided into zones, where each zone represents a portion of the DNS namespace. A zone is typically associated with a domain name and contains the authoritative name servers for that domain. Zones can be further divided into subzones, and this hierarchy allows for efficient management and distribution of DNS information.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;DNSSEC (Domain Name System Security Extensions):&lt;/strong&gt; DNSSEC is a set of extensions to DNS that adds cryptographic integrity and authentication to DNS data. It helps prevent various attacks, such as DNS spoofing and cache poisoning, by ensuring that the DNS records you receive are authentic and haven't been tampered with.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Anycast DNS:&lt;/strong&gt; Anycast is a technique where multiple DNS servers share the same IP address and respond to queries based on proximity. This improves response times by directing queries to the closest available server, reducing network latency.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The Domain Name System is a critical infrastructure that translates human-readable domain names into IP addresses, facilitating seamless communication on the internet. It operates through a hierarchy of servers, uses various types of DNS records, and employs caching mechanisms for efficient data retrieval. DNS security, hierarchy, and distributed nature are all key elements that contribute to the reliability and functionality of this system.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is the CDN ?
&lt;/h2&gt;

&lt;p&gt;A Content Delivery Network (CDN) is a network of geographically distributed servers designed to optimize the delivery of web content, such as images, videos, scripts, stylesheets, and other assets, to users based on their location. CDNs are utilized to improve website performance, reduce latency, enhance scalability, and provide a better user experience. Here's a detailed explanation of how CDNs work and their benefits:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftg78vthy68dr6k6xkobw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftg78vthy68dr6k6xkobw.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How CDNs Work:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Content Replication:&lt;/strong&gt; When a website is integrated with a CDN, the CDN provider replicates and stores copies of the website's static content on multiple servers across various locations (points of presence or PoPs) around the world. These servers are strategically positioned to be closer to end-users, reducing the distance data needs to travel.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Domain Name Resolution:&lt;/strong&gt; CDNs use a technique known as "Anycast" to route users' requests to the nearest CDN server. When a user types a URL in their browser, the DNS resolution process identifies the nearest CDN server by selecting the optimal PoP based on factors such as network proximity and server health.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Caching:&lt;/strong&gt; CDN servers cache static content, like images and videos, for a specified period of time. When a user requests a particular piece of content, the CDN server checks if it has a cached copy. If it does, the server delivers the content directly to the user, bypassing the need to retrieve it from the original website's server.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Dynamic Content Acceleration:&lt;/strong&gt; While CDNs are known for caching static content, they also offer acceleration for dynamic content. Some CDNs can optimize the delivery of dynamic content by employing techniques like content pre-fetching, connection pooling, and TCP optimization.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Load Balancing:&lt;/strong&gt; CDNs distribute user requests across multiple servers to prevent any single server from becoming overwhelmed with traffic. This load balancing improves website performance and ensures smooth user experiences even during traffic spikes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Content Compression and Optimization:&lt;/strong&gt; CDNs can automatically compress and optimize content before delivering it to users. This minimizes data transfer and reduces page load times, particularly for users on slower network connections or mobile devices.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Benefits of CDNs:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Improved Website Performance:&lt;/strong&gt; By serving content from servers closer to users, CDNs significantly reduce latency and page load times. This improvement is especially noticeable for users located far away from the website's origin server.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scalability:&lt;/strong&gt; CDNs provide scalability by handling traffic spikes and distributing the load across multiple servers. This ensures that websites can handle sudden surges in traffic without experiencing slowdowns or crashes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reduced Bandwidth Costs:&lt;/strong&gt; CDNs can help reduce bandwidth usage on the origin server. Since CDN servers handle a significant portion of content delivery, less data needs to travel between the origin server and end-users.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Global Reach:&lt;/strong&gt; CDNs allow websites to have a global reach without the need to set up and maintain data centers in multiple locations. This is particularly beneficial for websites targeting international audiences.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Enhanced Security:&lt;/strong&gt; CDNs often offer security features such as DDoS protection, SSL/TLS encryption, and web application firewall (WAF) services, which can help protect websites from various online threats.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Content Optimization:&lt;/strong&gt; CDNs can optimize images, videos, and other assets for different devices and network conditions, providing an optimal viewing experience across a range of devices.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Better User Experience:&lt;/strong&gt; Faster load times, reduced latency, and consistent performance contribute to an overall improved user experience. Users are more likely to engage with websites that load quickly and seamlessly.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Content Delivery Networks (CDNs) play a vital role in enhancing the performance, scalability, and security of websites by distributing content to geographically dispersed servers. By reducing latency, optimizing content, and providing global coverage, CDNs contribute to a better user experience and improved website reliability.&lt;/p&gt;

&lt;h2&gt;
  
  
  Push CDN
&lt;/h2&gt;

&lt;p&gt;A Push CDN, also known as a "Push Content Delivery Network," is a type of content delivery network that focuses on proactively distributing and replicating content from the origin server to multiple edge servers across various geographic locations. Unlike traditional CDNs that primarily rely on user requests to cache and distribute content, a Push CDN takes a more proactive approach by pushing content to edge servers in advance. Here's a detailed explanation of how Push CDNs work and their benefits:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How Push CDNs Work:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Content Upload and Replication:&lt;/strong&gt; With a Push CDN, the content provider (such as a website owner) uploads and pushes their content to the CDN's servers in advance. This content includes static assets like images, videos, scripts, stylesheets, and other files that make up a website.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Replication to Edge Servers:&lt;/strong&gt; The Push CDN then replicates this uploaded content across its network of edge servers, strategically positioned in various geographic locations. These edge servers store cached copies of the content, ready to be delivered to end-users.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Content Updates and Purging:&lt;/strong&gt; Whenever there are updates or changes to the content on the origin server, the content provider must manually push the updated content to the CDN. Some Push CDNs also provide mechanisms for automatic purging of old or outdated content from the edge servers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Domain Name Resolution:&lt;/strong&gt; Similar to traditional CDNs, Push CDNs use Anycast or other routing techniques to route users' requests to the nearest edge server. This reduces latency and improves content delivery speeds.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Benefits of Push CDNs:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance Control:&lt;/strong&gt; Push CDNs offer greater control over content distribution and caching. Content providers can ensure that specific content is readily available on edge servers, which can improve load times and user experience.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Consistency:&lt;/strong&gt; Since content is pushed in advance to edge servers, there's less variability in load times. Users receive consistently fast load times regardless of whether the content is already cached on the edge server or not.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Better Handling of Traffic Spikes:&lt;/strong&gt; Push CDNs are particularly effective in handling sudden traffic spikes. By pushing content ahead of time, the CDN can ensure that the edge servers are well-prepared to deliver content to a large number of users simultaneously.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Optimized Delivery:&lt;/strong&gt; Push CDNs allow for more efficient delivery of dynamic content and personalized experiences. Content providers can ensure that complex or dynamic content is readily available at edge servers, reducing the need for round-trip requests to the origin server.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Customization:&lt;/strong&gt; Content providers have more control over content delivery rules and policies. They can decide which content is pushed, how often updates occur, and when purging old content is necessary.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reduced Origin Server Load:&lt;/strong&gt; By offloading content delivery to edge servers, Push CDNs can significantly reduce the load on the origin server, improving its performance and scalability.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Use Cases for Push CDNs:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Media Streaming:&lt;/strong&gt; Push CDNs are commonly used for streaming video and audio content, ensuring that media assets are prepositioned on edge servers for smoother playback and reduced buffering.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Software Distribution:&lt;/strong&gt; Push CDNs are suitable for distributing software updates, patches, and downloadable files to a large user base efficiently.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;E-Commerce:&lt;/strong&gt; E-commerce websites can use Push CDNs to ensure that product images, descriptions, and other content are readily available on edge servers, improving page load times and conversion rates.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Global Websites:&lt;/strong&gt; Websites targeting a global audience can use Push CDNs to preposition content in different regions, providing consistent performance to users worldwide.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;High-Traffic Events:&lt;/strong&gt; Push CDNs are valuable for delivering content related to high-traffic events, such as live broadcasts, product launches, or major announcements.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Pull CDN
&lt;/h2&gt;

&lt;p&gt;A Pull CDN, also referred to as a "Pull Content Delivery Network," is a type of content delivery network that operates by responding to user requests for content. Unlike Push CDNs that proactively distribute content to edge servers in advance, Pull CDNs only cache and deliver content when a user requests it. Here's a detailed explanation of how Pull CDNs work and their benefits:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How Pull CDNs Work:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;User Request:&lt;/strong&gt; When a user accesses a website, their browser or device sends a request for specific content, such as images, videos, scripts, or other assets, to the Pull CDN's network.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;DNS Resolution:&lt;/strong&gt; The user's request triggers a DNS lookup to determine the closest edge server to the user's location. The DNS server responds with the IP address of the nearest edge server, directing the user's request to that server.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Edge Server Response:&lt;/strong&gt; The user's request arrives at the selected edge server within the Pull CDN network. If the edge server has a cached copy of the requested content, it delivers that content directly to the user's device.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Origin Server Interaction:&lt;/strong&gt; If the edge server does not have a cached copy of the content or if the content has expired from the cache, the edge server sends a request to the origin server hosting the original content.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Content Retrieval:&lt;/strong&gt; The origin server responds to the edge server's request by providing the requested content. The edge server then caches the content for a certain period of time, allowing it to serve subsequent requests for the same content without needing to contact the origin server.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Content Delivery:&lt;/strong&gt; Once the edge server has cached the content, it delivers the requested content to the user's device. Subsequent requests for the same content from other users in the same geographic area can also be served directly from the cached copy on the edge server.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Benefits of Pull CDNs:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Efficient Resource Utilization:&lt;/strong&gt; Pull CDNs conserve resources by only caching and distributing content when there is a demand for it. This allows the CDN to focus on delivering the most relevant and frequently accessed content.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reduced Latency for Popular Content:&lt;/strong&gt; Popular content that is requested frequently benefits from being cached on edge servers, reducing the distance the content needs to travel and minimizing latency.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Flexible and Dynamic:&lt;/strong&gt; Pull CDNs are well-suited for websites with frequently changing content. Content updates on the origin server are automatically reflected in the cache once the content is requested, ensuring users receive the latest version.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scalability:&lt;/strong&gt; Pull CDNs can handle traffic spikes more efficiently since they only deliver content upon request. This ability to scale on-demand can be particularly useful during events that generate high traffic.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Simplified Setup:&lt;/strong&gt; Content providers do not need to preposition content on edge servers, making the setup process simpler compared to Push CDNs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Cost-Effective:&lt;/strong&gt; Pull CDNs are cost-effective because they only utilize resources as needed. There is no need to maintain large amounts of cached content on edge servers in advance.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Use Cases for Pull CDNs:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Content-Heavy Websites:&lt;/strong&gt; Websites that offer a wide range of content types, such as news articles, images, videos, and interactive elements, can benefit from a Pull CDN's ability to deliver content upon request.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Frequently Changing Content:&lt;/strong&gt; Websites that frequently update their content, such as news sites, blogs, and e-commerce platforms, can benefit from the dynamic nature of Pull CDNs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Global Distribution:&lt;/strong&gt; Pull CDNs can effectively serve content to users worldwide, ensuring that users receive content from the nearest edge server.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Content Personalization:&lt;/strong&gt; Websites that provide personalized content based on user preferences or location can use Pull CDNs to ensure that users receive the most relevant content in real-time.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/" rel="noopener noreferrer"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055" rel="noopener noreferrer"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en" rel="noopener noreferrer"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/" rel="noopener noreferrer"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod" rel="noopener noreferrer"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




</description>
      <category>beginners</category>
      <category>programming</category>
      <category>systemdesign</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Background Jobs</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Sun, 20 Aug 2023 18:53:34 +0000</pubDate>
      <link>https://dev.to/rajrathod/background-jobs-473j</link>
      <guid>https://dev.to/rajrathod/background-jobs-473j</guid>
      <description>&lt;h2&gt;
  
  
  Background jobs
&lt;/h2&gt;

&lt;p&gt;Background jobs, also known as asynchronous tasks or jobs, are a common technique in software development for handling tasks that can be executed independently of the main user interaction or request-response cycle. These tasks are typically performed in the "background," separate from the immediate user experience. Background jobs are used to improve system responsiveness, handle time-consuming tasks, and offload resource-intensive operations from the main application thread or process.&lt;/p&gt;

&lt;p&gt;Background jobs are especially useful for tasks that might take a significant amount of time to complete, such as data processing, file uploads, sending emails, generating reports, or performing system maintenance. By offloading these tasks to background processing, the main application can remain responsive to user interactions and maintain a smooth user experience.&lt;/p&gt;

&lt;p&gt;Here are some key concepts and benefits related to background jobs:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Asynchronous Execution:&lt;/strong&gt;&lt;br&gt;
Background jobs are executed asynchronously, meaning they are started and managed independently of the main execution flow. This allows the main application to continue serving user requests while the background job runs in the background.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Queueing Systems:&lt;/strong&gt;&lt;br&gt;
Many background jobs are managed using queueing systems. These systems prioritize, schedule, and distribute tasks to workers that execute them. Popular queueing systems include RabbitMQ, Apache Kafka, and Redis with its built-in queueing features.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Worker Processes:&lt;/strong&gt;&lt;br&gt;
Worker processes are responsible for executing background jobs. They consume tasks from the queue and perform the required operations. Workers can run on separate machines or be part of a distributed setup.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Fault Tolerance and Retry Mechanisms:&lt;/strong&gt;&lt;br&gt;
Background job systems often include built-in mechanisms to handle failures. If a job fails to execute, it can be retried a certain number of times before being marked as failed. Failed jobs can be monitored and manually reviewed if needed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Delayed Execution:&lt;/strong&gt;&lt;br&gt;
Background jobs can be scheduled for delayed execution. For example, an email notification might be scheduled to be sent a few hours after a user's action.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scalability:&lt;/strong&gt;&lt;br&gt;
Using background jobs can improve the scalability of an application. By distributing tasks among multiple worker processes or machines, the system can handle a higher load of tasks and ensure timely execution.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Batch Processing:&lt;/strong&gt;&lt;br&gt;
Background jobs are often used for batch processing tasks, such as bulk data import, data transformation, or report generation. These tasks might not require immediate user interaction and can be more efficiently handled in the background.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Long-Running Tasks:&lt;/strong&gt;&lt;br&gt;
Some tasks, such as video transcoding or machine learning model training, can take a long time to complete. Background jobs allow these tasks to be processed without impacting the responsiveness of the main application.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Monitoring and Reporting:&lt;/strong&gt;&lt;br&gt;
Background job systems often provide monitoring tools and dashboards to track the status and progress of running jobs. This helps developers ensure that tasks are being executed as expected.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Popular frameworks and libraries exist for implementing background jobs in various programming languages and platforms. Examples include Sidekiq (Ruby), Celery (Python), Hangfire (C#), and Resque (Ruby). Cloud platforms like AWS, Azure, and Google Cloud also offer managed services for background job processing.&lt;/p&gt;

&lt;p&gt;Using background jobs effectively can enhance the overall performance, user experience, and scalability of applications by allowing resource-intensive or time-consuming tasks to be executed without blocking the main application flow.&lt;/p&gt;

&lt;h2&gt;
  
  
  Scheduled-driven
&lt;/h2&gt;

&lt;p&gt;"Scheduled-driven" refers to a type of process or task execution that is triggered or initiated based on a predefined schedule or time interval. In software development and system design, scheduled-driven tasks are often used to automate repetitive actions, maintenance tasks, data synchronization, and other operations that need to occur at specific times or intervals. These tasks are typically implemented using scheduling mechanisms and background job processing.&lt;/p&gt;

&lt;p&gt;Here are some key aspects and benefits of schedule-driven tasks:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Automation:&lt;/strong&gt; Scheduled-driven tasks automate recurring tasks, reducing the need for manual intervention and ensuring that important operations are carried out consistently.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Maintenance:&lt;/strong&gt; Scheduled-driven tasks are commonly used for system maintenance activities such as database backups, log rotation, and cache clearing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Synchronization:&lt;/strong&gt; Many applications require data synchronization between different systems or databases. Scheduled-driven tasks can be used to synchronize data on a regular basis.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Batch Processing:&lt;/strong&gt; Scheduled-driven tasks are often used for batch processing scenarios where certain operations need to be performed periodically on a set of data.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Report Generation:&lt;/strong&gt; Generating reports or summaries at specific intervals is a common use case for scheduled-driven tasks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Cleanup:&lt;/strong&gt; Scheduled-driven tasks can be used to clean up stale or unnecessary data, ensuring that the system remains optimized and efficient.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Notification Delivery:&lt;/strong&gt; Sending notifications, reminders, or emails to users at specific times or intervals can be achieved using scheduled-driven tasks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Resource Management:&lt;/strong&gt; Scheduled-driven tasks can help manage resources such as memory, disk space, and system load by performing cleanup or optimization tasks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Integration:&lt;/strong&gt; Integrating with third-party APIs or services can involve scheduled-driven tasks to ensure data is exchanged regularly and accurately.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Processing:&lt;/strong&gt; Tasks that involve data processing, transformation, or enrichment can be scheduled to occur at specific times to avoid interfering with real-time user interactions.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Examples of scheduled-driven tasks include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A daily backup of a database.&lt;/li&gt;
&lt;li&gt;Sending a weekly email newsletter to subscribers.&lt;/li&gt;
&lt;li&gt;Clearing cache files every hour.&lt;/li&gt;
&lt;li&gt;Updating stock prices from external sources every minute.&lt;/li&gt;
&lt;li&gt;Running a batch process to calculate monthly sales reports.&lt;/li&gt;
&lt;li&gt;Performing system health checks every 15 minutes.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To implement scheduled-driven tasks, various technologies and tools are available. Some programming languages have libraries or frameworks designed specifically for scheduling tasks, while many operating systems and cloud platforms offer built-in scheduling features. Popular tools include cron jobs (for Unix-like systems), Windows Task Scheduler (for Windows systems), and cloud-based scheduling services.&lt;/p&gt;

&lt;p&gt;Overall, schedule-driven tasks enhance system automation, reduce manual effort, and improve the consistency and reliability of important operations in various software applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  Event-driven
&lt;/h2&gt;

&lt;p&gt;Event-driven architecture is a design approach in software development where the flow of a system is determined by events or messages that are produced, consumed, and processed by different components or services. In event-driven systems, components are decoupled and interact through events, enabling loosely-coupled, scalable, and flexible architectures. This approach is commonly used in various types of applications, including microservices, real-time systems, and user interfaces.&lt;/p&gt;

&lt;p&gt;Here are some key concepts and benefits of event-driven architecture:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Events:&lt;/strong&gt; An event is a signal or notification that something has occurred in the system. Events can represent a wide range of occurrences, such as user actions, system state changes, sensor readings, and external interactions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Publish-Subscribe Pattern:&lt;/strong&gt; In event-driven architecture, the publish-subscribe pattern is often used. Publishers generate events and send them to a message broker or event bus. Subscribers register their interest in certain types of events and receive notifications when those events occur.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Loose Coupling:&lt;/strong&gt; Components in an event-driven architecture are decoupled, meaning they don't need to know the details of each other's implementations. This allows for easier maintenance, scalability, and changes to individual components without affecting the entire system.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scalability:&lt;/strong&gt; Event-driven architectures can be highly scalable. New components can be added to handle specific types of events, and load can be distributed among multiple components.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Flexibility:&lt;/strong&gt; Event-driven systems are adaptable and flexible. New features or services can be introduced by simply adding new event producers and consumers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Real-Time Processing:&lt;/strong&gt; Event-driven architectures are well-suited for real-time and reactive systems that need to respond quickly to changing conditions or user interactions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Asynchronous Processing:&lt;/strong&gt; Events are processed asynchronously, allowing components to perform tasks without waiting for immediate responses. This can improve system performance and responsiveness.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Event Sourcing and CQRS:&lt;/strong&gt; Event-driven architectures are often used in combination with event sourcing and Command Query Responsibility Segregation (CQRS) patterns, which enable storing and processing events to reconstruct the state of the system and optimize read and write operations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Fault Tolerance:&lt;/strong&gt; In the event of component failures, other components can still continue to operate as long as they can handle events. This enhances fault tolerance and resilience.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Complex Workflows:&lt;/strong&gt; Event-driven architectures can handle complex workflows and interactions between components, allowing for the coordination of various actions across the system.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Examples of event-driven architecture include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A microservices-based e-commerce platform where different services communicate through events for order processing, inventory updates, and payment notifications.&lt;/li&gt;
&lt;li&gt;Internet of Things (IoT) applications where sensor readings trigger events for data analysis, alerts, and automation.&lt;/li&gt;
&lt;li&gt;User interface interactions, such as updating a dashboard in real-time when data changes.&lt;/li&gt;
&lt;li&gt;Financial systems that react to market data changes and trigger automated trading actions.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To implement event-driven architectures, various technologies and tools are available, including message brokers like RabbitMQ, Apache Kafka, and cloud-based event hubs. Additionally, many programming languages and frameworks offer libraries for building event-driven systems.&lt;/p&gt;

&lt;p&gt;Event-driven architecture promotes modularity, scalability, and responsiveness by designing systems around meaningful events and interactions, making it a valuable approach for building modern, distributed applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  Returning results
&lt;/h2&gt;

&lt;p&gt;Returning results in a software context refers to the process of providing output or responses to users, clients, or other components after a request or task has been processed. The way results are returned depends on the nature of the application, the communication protocol being used, and the specific requirements of the system. Here are a few common approaches for returning results:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Synchronous Response:&lt;/strong&gt;&lt;br&gt;
In a synchronous response model, the requester waits for a response from the system before continuing its operations. This is common in traditional request-response interactions. For example, when you make an HTTP request to a web server, the server processes the request and sends back a response with the result (e.g., a web page or data).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Asynchronous Response:&lt;/strong&gt;&lt;br&gt;
In an asynchronous response model, the requester doesn't wait for an immediate response. Instead, the system acknowledges the request and processes it in the background. The requester might later check for the results or receive a notification when the results are available. Asynchronous responses are often used in long-running tasks or when immediate results are not critical.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Callback Functions:&lt;/strong&gt;&lt;br&gt;
In programming, callback functions are used to handle asynchronous responses. Instead of waiting for the result, the requester provides a callback function that the system will invoke when the result is ready. This approach is common in event-driven architectures and asynchronous programming paradigms.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Webhooks:&lt;/strong&gt;&lt;br&gt;
Webhooks are a way to receive asynchronous notifications from external systems. When an event occurs in a remote system, it sends an HTTP request to a predefined URL (the webhook), allowing the system to process the event and return a response.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Push Notifications:&lt;/strong&gt;&lt;br&gt;
Push notifications are used to deliver real-time updates or information to users' devices or applications. They're often used in mobile apps to alert users about new messages, updates, or events.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Streaming:&lt;/strong&gt;&lt;br&gt;
Streaming is used to provide continuous, real-time updates to clients. It's common in scenarios where data is constantly changing, such as live feeds or financial data.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Batch Processing:&lt;/strong&gt;&lt;br&gt;
For tasks that involve processing large amounts of data, results might be returned as batches. The system processes data in chunks and then returns the results in bulk.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Distributed Systems:&lt;/strong&gt;&lt;br&gt;
In distributed systems, results might be returned through messaging systems, message queues, or event buses. This allows components to communicate and exchange results across different parts of the system.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The choice of how to return results depends on factors such as the system's architecture, the nature of the task, the user experience requirements, and the scalability needs. Modern applications often use a combination of these approaches to provide a seamless and efficient user experience while handling various types of tasks and interactions.&lt;/p&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




</description>
      <category>beginners</category>
      <category>systemdesign</category>
      <category>tutorial</category>
      <category>programming</category>
    </item>
    <item>
      <title>CAP Theorem : System Design</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Fri, 18 Aug 2023 13:31:18 +0000</pubDate>
      <link>https://dev.to/rajrathod/cap-theorem-2681</link>
      <guid>https://dev.to/rajrathod/cap-theorem-2681</guid>
      <description>&lt;h2&gt;
  
  
  CAP Theorem
&lt;/h2&gt;

&lt;p&gt;The CAP theorem, also known as Brewer's theorem, is a fundamental concept in distributed systems that outlines the limitations of achieving three important properties simultaneously: Consistency, Availability, and Partition tolerance. It was introduced by computer scientist Eric Brewer in 2000. The theorem states that in a distributed system, it's impossible to achieve all three of these properties under certain conditions. Here's a detailed explanation of the CAP theorem:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Consistency:&lt;/strong&gt;&lt;br&gt;
Consistency refers to the property that all nodes in a distributed system have the same view of data at any given time. In other words, if a value is written to one node, any subsequent reads from any node should return that same value. Achieving strong consistency ensures that all nodes agree on the current state of the data. This property is crucial in scenarios where data accuracy and correctness are of utmost importance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Availability:&lt;/strong&gt;&lt;br&gt;
Availability refers to the system's ability to respond to requests and provide meaningful responses, even in the presence of failures. A highly available system ensures that users can interact with the system and receive responses to their requests, regardless of failures or other issues that might occur in the system.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Partition Tolerance:&lt;/strong&gt;&lt;br&gt;
Partition tolerance refers to the system's ability to continue functioning despite network partitions or communication failures between nodes. In a distributed system, network failures or partitions can occur, causing some nodes to be isolated from others. Partition tolerance ensures that even when network communication breaks down between certain nodes, the system can continue to operate and serve requests.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The CAP theorem states that in a distributed system, it's possible to achieve at most two out of the three properties simultaneously. However, it's not possible to achieve all three properties. In other words:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If a distributed system prioritizes Consistency and Availability (CA), it might need to sacrifice Partition Tolerance. This means that in the event of a network partition, the system might have to become temporarily unavailable to maintain consistency.&lt;/li&gt;
&lt;li&gt;If a distributed system prioritizes Consistency and Partition Tolerance (CP), it might need to sacrifice Availability. This means that the system could remain available but might return inconsistent data in certain scenarios.&lt;/li&gt;
&lt;li&gt;If a distributed system prioritizes Availability and Partition Tolerance (AP), it might need to sacrifice strong Consistency. This means that the system could provide quick responses and remain operational even in the presence of network partitions, but it might provide slightly outdated or inconsistent data.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It's important to note that the CAP theorem is not about making binary choices between the properties; rather, it highlights the trade-offs that need to be considered when designing and operating distributed systems. Different systems have different requirements and priorities, and the choice of which two properties to prioritize depends on the specific use case and desired system behavior.&lt;/p&gt;

&lt;p&gt;In practice, many modern distributed systems and databases offer configurable levels of consistency and availability to allow developers to make informed choices based on their application's needs. Some systems also leverage techniques like eventual consistency, where data might be temporarily inconsistent but eventually converges to a consistent state over time.&lt;/p&gt;

&lt;p&gt;The CAP theorem provides valuable insights into the challenges of designing and operating distributed systems and helps guide decisions about how to balance consistency, availability, and partition tolerance based on the requirements of a given application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Consistency Patterns
&lt;/h2&gt;

&lt;p&gt;In distributed systems, achieving strong consistency across all nodes is challenging due to factors like network failures, latency, and the need for high availability. As a result, various consistency patterns have been developed to handle different trade-offs between strong consistency and other system requirements. Here are some key consistency patterns:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Strong Consistency:&lt;/strong&gt;&lt;br&gt;
Strong consistency ensures that all nodes in a distributed system have the same view of data at all times. Achieving strong consistency involves synchronous communication and coordination between nodes, which can lead to increased latency and reduced availability. Two common strong consistency models are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Linearizability (Atomic Consistency):&lt;/strong&gt; Every operation appears to take effect instantly at a single point in time, creating a linear ordering of operations as if they were executed serially.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Serializability:&lt;/strong&gt; Transactions appear to execute one after another, even in a distributed environment, ensuring that the system behaves as if it were executing transactions in a serial order.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Eventual Consistency:&lt;/strong&gt;&lt;br&gt;
Eventual consistency is a relaxed form of consistency that allows data to be temporarily inconsistent across nodes but guarantees that all nodes will eventually converge to a consistent state. This pattern is often used in systems where strong consistency would lead to excessive latency or limited availability. Eventual consistency models include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Read-your-writes consistency:&lt;/strong&gt; Any read operation following a write operation should return the value written by that operation.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Monotonic reads and monotonic writes consistency:&lt;/strong&gt; The system ensures that once a value is read, subsequent reads will never return older values. Similarly, writes are committed in order.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Causal Consistency:&lt;/strong&gt;&lt;br&gt;
Causal consistency maintains a causal relationship between related events, ensuring that operations that are causally related are seen by all nodes in a consistent order. This pattern strikes a balance between strong consistency and availability, offering better performance than strong consistency while still ensuring a certain level of ordering.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Bounded Staleness Consistency:&lt;/strong&gt;&lt;br&gt;
Bounded staleness consistency allows a system to be consistent within a certain time window or bound. This pattern relaxes the requirement for immediate consistency but ensures that data does not become too outdated. It's particularly useful in scenarios where real-time consistency is not critical.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Read/Write Quorums:&lt;/strong&gt;&lt;br&gt;
Quorum-based approaches involve requiring a certain number of nodes (a quorum) to agree before a read or write operation is considered successful. This allows for a trade-off between consistency and availability. For example, a system might require a quorum of nodes to agree on a write before considering it committed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Consistent Hashing:&lt;/strong&gt;&lt;br&gt;
Consistent hashing is a technique used in distributed systems to efficiently distribute data across nodes while maintaining a level of data consistency. It enables scaling out by adding new nodes or removing nodes without causing significant data reorganization.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Tunable Consistency:&lt;/strong&gt;&lt;br&gt;
Some distributed databases and systems provide configurable levels of consistency, allowing developers to choose the consistency model that best fits their application's requirements. This provides flexibility to balance between strong consistency and system performance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Weak Consistency:&lt;/strong&gt;&lt;br&gt;
Weak consistency is a form of data consistency in distributed systems that allows for more relaxed synchronization and ordering of data updates across nodes. Unlike strong consistency, which guarantees that all nodes have an identical view of data at all times, weak consistency permits temporary inconsistencies that can be resolved over time. Weak consistency is often used to improve system performance, availability, and fault tolerance in exchange for slightly less strict data synchronization. There are a few variations of weak consistency models:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Read-your-Writes Consistency:&lt;/strong&gt;
In this weak consistency model, if a client performs a write operation and subsequently performs a read operation, the read operation is guaranteed to return the value written by the preceding write operation. This pattern ensures that a client always sees its own updates immediately.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Monotonic Reads Consistency:&lt;/strong&gt;
Monotonic reads consistency guarantees that if a client reads a particular value, it will never see older values in subsequent read operations. This ensures that the client's view of data is monotonic, meaning it only sees increasingly recent values.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Monotonic Writes Consistency:&lt;/strong&gt;
Monotonic writes consistency ensures that write operations from a particular client are seen in the same order by all nodes in the system. This means that if a client performs a write operation A followed by a write operation B, all nodes will see operation A before operation B.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Causal Consistency (Partial Order Consistency):&lt;/strong&gt;
Causal consistency ensures that causally related operations (where one operation logically depends on another) are seen by all nodes in a consistent order. This means that if one operation causally precedes another, all nodes will see the operations in the same order. However, operations that are not causally related can be observed in different orders on different nodes.&lt;/li&gt;
&lt;/ol&gt;


&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Weak consistency is particularly suitable for distributed systems that prioritize availability and performance over strict data synchronization. It allows systems to operate effectively in the presence of network partitions and failures. However, developers need to be aware of the potential for temporary data inconsistencies and design their applications accordingly.&lt;/p&gt;

&lt;p&gt;These consistency patterns provide various ways to manage the trade-offs between strong consistency, availability, and partition tolerance in distributed systems. The choice of which pattern to use depends on the specific requirements of the application, the desired level of data accuracy, and the constraints of the underlying distributed architecture.&lt;/p&gt;

&lt;h2&gt;
  
  
  Availability Patterns
&lt;/h2&gt;

&lt;p&gt;In distributed systems, ensuring high availability is crucial to maintain system functionality even in the presence of failures. Various availability patterns and strategies are employed to achieve this goal. Here are some key availability patterns:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Redundancy:&lt;/strong&gt;&lt;br&gt;
Redundancy involves duplicating critical components, services, or data across multiple nodes or locations. If one node or service fails, another can take over the workload without disrupting the system's availability. Redundancy can be achieved through approaches like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Active-Active Replication:&lt;/strong&gt; Multiple nodes actively handle incoming requests and share the load, ensuring that if one node fails, others can continue to serve requests.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Active-Passive Replication:&lt;/strong&gt; One node actively handles requests while another node remains in standby. If the active node fails, the passive node takes over.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Load Balancing:&lt;/strong&gt;&lt;br&gt;
Load balancing distributes incoming traffic across multiple nodes to ensure that no single node becomes overwhelmed. This pattern improves the system's capacity to handle increased load and provides better response times. Load balancing can be achieved through hardware or software load balancers that distribute requests based on various algorithms.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Failover:&lt;/strong&gt;&lt;br&gt;
Failover is the process of automatically shifting the workload from a failed node to a backup node. This pattern is commonly used in scenarios where high availability is critical. Failover can be manual, triggered by administrators, or automatic, triggered by monitoring systems detecting a failure.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Replication:&lt;/strong&gt;&lt;br&gt;
Replication involves creating copies of data across multiple nodes to ensure that data remains available even if one node fails. Different types of replication include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Master-Slave Replication:&lt;/strong&gt; One node (master) handles write operations, and the changes are asynchronously replicated to slave nodes for read operations.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Multi-Master Replication:&lt;/strong&gt; Multiple nodes can handle both read and write operations, requiring synchronization mechanisms to maintain data consistency.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Elastic Scaling:&lt;/strong&gt;&lt;br&gt;
Elastic scaling involves dynamically adding or removing resources (such as nodes) based on demand. This pattern allows the system to automatically adjust its capacity to handle varying workloads, ensuring availability during traffic spikes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Microservices Architecture:&lt;/strong&gt;&lt;br&gt;
Microservices break down the system into small, independently deployable services. If one service becomes unavailable, other services can continue to function, minimizing the impact on the entire system's availability.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Distributed Databases:&lt;/strong&gt;&lt;br&gt;
Distributed databases replicate and distribute data across multiple nodes, improving data availability and fault tolerance. They often offer mechanisms like sharding, partitioning, and data replication to achieve high availability.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Caching:&lt;/strong&gt;&lt;br&gt;
Caching involves storing frequently accessed data in memory to reduce the load on backend services and improve response times. Caches can be distributed across nodes to enhance availability and performance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Health Monitoring and Recovery:&lt;/strong&gt;&lt;br&gt;
Implementing monitoring and recovery mechanisms allows the system to detect failures and automatically initiate recovery processes. This includes health checks, automatic restarts, and self-healing mechanisms.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Global Server Load Balancing:&lt;/strong&gt;&lt;br&gt;
In global server load balancing, traffic is routed to the nearest or most available data center based on the user's location or other factors. This pattern improves availability by directing users to operational data centers.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;These availability patterns help distributed systems maintain operational status, even in the face of hardware failures, software bugs, network issues, and other unforeseen problems. Combining these patterns with effective monitoring, alerting, and incident response strategies can significantly enhance the overall availability and reliability of a system.&lt;/p&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




</description>
      <category>systemdesign</category>
      <category>beginners</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>System Design Introduction</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Thu, 17 Aug 2023 16:44:58 +0000</pubDate>
      <link>https://dev.to/rajrathod/system-design-introduction-9o8</link>
      <guid>https://dev.to/rajrathod/system-design-introduction-9o8</guid>
      <description>&lt;h2&gt;
  
  
  What is system design ?
&lt;/h2&gt;

&lt;p&gt;System design is the process of defining and planning the architecture, components, modules, interfaces, and interactions of a complex software or hardware system. It involves making decisions about how different parts of a system will work together to achieve the desired functionality, performance, scalability, reliability, and maintainability.&lt;/p&gt;

&lt;p&gt;The goal of system design is to create a blueprint or roadmap for building a system that meets the requirements and objectives of a project. This includes breaking down the system into smaller subsystems, modules, or components, and determining how they will communicate and collaborate to accomplish the overall goals. System design takes into consideration various technical and non-technical aspects, such as:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Architecture&lt;/strong&gt;: Deciding on the overall structure of the system, including high-level components, their relationships, and how data flows between them. This can involve choosing between different architectural patterns like monolithic, microservices, client-server, etc.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Components and Modules&lt;/strong&gt;: Identifying the individual pieces that will make up the system and defining their responsibilities and interactions. This could include databases, application servers, user interfaces, external APIs, and more.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Management&lt;/strong&gt;: Designing the data model and storage mechanisms that will be used to store, retrieve, and manipulate data within the system. This involves choosing appropriate databases, data formats, and storage strategies.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Communication and Interfaces&lt;/strong&gt;: Specifying how different components will communicate with each other, including the protocols, APIs, and data formats they will use to exchange information.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scalability and Performance&lt;/strong&gt;: Planning for the system's ability to handle increased load and traffic over time. This might involve considerations for load balancing, caching, database optimization, and other performance-enhancing techniques.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Security&lt;/strong&gt;: Addressing potential security vulnerabilities and implementing measures to protect the system from unauthorized access, data breaches, and other security threats.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reliability and Fault Tolerance&lt;/strong&gt;: Designing the system to be resilient in the face of failures, ensuring that it can continue to function properly even when certain components or services fail.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Deployment and Infrastructure&lt;/strong&gt;: Defining how the system will be deployed on various environments (development, testing, production) and determining the required infrastructure, such as servers, networking, and cloud services.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;User Experience (UX)&lt;/strong&gt;: Considering how users will interact with the system, including designing intuitive interfaces and workflows that provide a positive user experience.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Maintainability and Extensibility&lt;/strong&gt;: Creating a design that allows for easy maintenance, updates, and future enhancements without major disruptions to the system.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;System design often involves collaboration among software architects, engineers, product managers, and other stakeholders. It's a crucial phase in the software development lifecycle, as the decisions made during this stage have a significant impact on the system's overall quality and success.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to approach System Design
&lt;/h2&gt;

&lt;p&gt;Approaching system design requires a structured and thoughtful approach to ensure that you create a well-designed and effective solution. Here's a step-by-step guide to help you approach system design effectively:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Understand Requirements and Constraints&lt;/strong&gt;: Begin by thoroughly understanding the project requirements, user needs, and any constraints you need to work within. This includes functional requirements (what the system should do) and non-functional requirements (how the system should perform).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Gather Information&lt;/strong&gt;: Research and gather information about the domain, existing solutions, and technologies that could be relevant to your system. This helps you make informed design decisions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Define Use Cases and User Stories&lt;/strong&gt;: Create a set of use cases or user stories that describe how different users will interact with the system. This helps in identifying key features and workflows.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Identify Key Components&lt;/strong&gt;: Break down the system into high-level components or modules. Identify the major building blocks that will make up your system's architecture.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Choose Architecture and Patterns&lt;/strong&gt;: Select an appropriate architectural pattern (e.g., monolithic, microservices, event-driven) based on the project's needs. This choice influences how components interact and communicate.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Design Component Interfaces&lt;/strong&gt;: Define the interfaces and APIs for each component. This includes specifying how data will be exchanged and how different modules will interact.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Modeling&lt;/strong&gt;: Design the data model that represents the structure of your application's data. Choose appropriate databases and storage solutions based on the data requirements.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;System Communication&lt;/strong&gt;: Plan how different components will communicate. Consider protocols, message formats, and communication patterns.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scalability and Performance&lt;/strong&gt;: Consider how the system will handle varying levels of load and traffic. Design for scalability by incorporating techniques like load balancing, caching, and distributed architectures.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Security Measures&lt;/strong&gt;: Identify potential security risks and plan security measures, such as authentication, authorization, encryption, and data protection mechanisms.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Fault Tolerance and Reliability&lt;/strong&gt;: Design the system to handle failures gracefully. Implement strategies like redundancy, failover, and error handling.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;User Experience (UX)&lt;/strong&gt;: Design user interfaces that are intuitive, user-friendly, and aligned with user expectations. Consider user journeys and workflows.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Deployment Strategy&lt;/strong&gt;: Plan how the system will be deployed in different environments (development, testing, production). Consider deployment pipelines, continuous integration, and deployment automation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Monitoring and Logging&lt;/strong&gt;: Define how you will monitor the system's performance, collect logs, and track metrics. This is crucial for troubleshooting and optimizing the system.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Documentation&lt;/strong&gt;: Create detailed documentation that explains the system's design, architecture, components, and interactions. This helps with future maintenance and onboarding new team members.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Review and Iterate&lt;/strong&gt;: Conduct regular design reviews with your team to gather feedback and refine the design. Be open to making adjustments based on insights from reviews.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Prototyping and Proof of Concept&lt;/strong&gt;: Depending on the complexity, consider creating prototypes or proof-of-concept implementations to validate critical design decisions before proceeding with full development.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Testing Strategy&lt;/strong&gt;: Plan how you will test the system's functionality, performance, security, and other aspects. Consider automated testing approaches.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Feedback and Optimization&lt;/strong&gt;: Gather feedback from stakeholders and users as you implement the design. Use this feedback to make improvements and optimizations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Continuous Improvement&lt;/strong&gt;: System design is an ongoing process. As the system evolves, continue to assess and update the design to accommodate new features, technologies, and user needs.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Remember that effective system design requires collaboration, creativity, and a balance between various considerations. It's also important to keep the system's goals and user needs at the forefront of your design decisions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Performance vs Scalability
&lt;/h2&gt;

&lt;p&gt;Performance and scalability are both important considerations in designing and building software systems, but they address different aspects of system behavior. Let's explore the differences between performance and scalability:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Performance:&lt;/strong&gt;&lt;br&gt;
Performance refers to how well a system performs a specific task or set of tasks. It's a measure of how fast or responsive a system is in executing its operations. Performance is often evaluated in terms of response time, throughput, latency, and resource utilization. High performance means that the system can handle a certain load while providing fast and efficient responses to user requests.&lt;/p&gt;

&lt;p&gt;Factors that affect performance include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Efficient algorithms and data structures&lt;/li&gt;
&lt;li&gt;Optimized code&lt;/li&gt;
&lt;li&gt;Proper resource management (CPU, memory, disk I/O)&lt;/li&gt;
&lt;li&gt;Caching mechanisms&lt;/li&gt;
&lt;li&gt;Minimized network latency&lt;/li&gt;
&lt;li&gt;Hardware capabilities&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Scalability:&lt;/strong&gt;&lt;br&gt;
Scalability, on the other hand, is the system's ability to handle an increasing amount of work or traffic as demand grows. It's about the system's capacity to handle more users, requests, or data without sacrificing performance. Scalability is crucial to ensure that a system can accommodate growth without experiencing performance degradation.&lt;/p&gt;

&lt;p&gt;Scalability can be categorized into two types:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Vertical Scalability (Scaling Up):&lt;/strong&gt; This involves increasing the resources of a single server, such as adding more CPU cores, memory, or storage. It's a simpler approach but has limitations in terms of how much a single server can scale.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Horizontal Scalability (Scaling Out):&lt;/strong&gt; This involves adding more servers to the system, distributing the workload across multiple machines. This approach allows for greater potential scalability, but it often requires more complex architecture and handling of data synchronization.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Factors that affect scalability include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Distributed architecture (e.g., microservices)&lt;/li&gt;
&lt;li&gt;Load balancing mechanisms&lt;/li&gt;
&lt;li&gt;Data partitioning and sharding&lt;/li&gt;
&lt;li&gt;Elastic scaling (auto-scaling based on demand)&lt;/li&gt;
&lt;li&gt;Replication and synchronization strategies&lt;/li&gt;
&lt;li&gt;Caching strategies&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In summary, performance focuses on how well a system performs specific tasks in terms of speed and efficiency, while scalability addresses the system's ability to handle increased load or demand. Both factors are crucial, and the challenge is to strike a balance between them. A system that is highly performant but lacks scalability might perform well under light load but struggle when user numbers grow. Conversely, a highly scalable system might handle increased load, but its performance might suffer due to the complexity of distributed processing.&lt;/p&gt;

&lt;p&gt;Effective system design considers both performance and scalability requirements based on the anticipated usage patterns and growth projections of the application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Latency vs Throughput
&lt;/h2&gt;

&lt;p&gt;Latency and throughput are two important concepts in the realm of computing and system design, especially when it comes to evaluating the performance of software systems. Let's delve into the differences between latency and throughput:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Latency:&lt;/strong&gt;&lt;br&gt;
Latency refers to the amount of time it takes for a single unit of data (such as a request) to travel from the source to the destination and receive a response. It is often measured in milliseconds (ms) or microseconds (μs) and is a key indicator of the responsiveness or speed of a system. Low latency means that the system responds quickly to requests, resulting in minimal delays.&lt;/p&gt;

&lt;p&gt;In terms of latency, it's important to consider:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Network Latency:&lt;/strong&gt; The time it takes for data to travel across a network. This can be affected by factors like physical distance, network congestion, and routing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Processing Latency:&lt;/strong&gt; The time it takes for a system to process a request or perform a computation. This includes time spent executing code, accessing data from memory or storage, and any other processing steps.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;User Experience:&lt;/strong&gt; Lower latency leads to a more responsive and interactive user experience, which is critical for applications where real-time or near-real-time interactions are important (e.g., online gaming, video conferencing, financial trading platforms).&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Throughput:&lt;/strong&gt;&lt;br&gt;
Throughput refers to the rate at which a system can process or handle a certain amount of work within a given period. It's often measured in transactions per second (TPS) or requests per second (RPS). Throughput is an indicator of the system's capacity to handle a large number of requests or transactions effectively.&lt;/p&gt;

&lt;p&gt;In terms of throughput, it's important to consider:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Concurrency:&lt;/strong&gt; The ability of the system to handle multiple requests simultaneously. Higher concurrency generally leads to higher throughput.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Processing Capacity:&lt;/strong&gt; The processing power of the system's components, including CPU, memory, and storage. A system with higher processing capacity can handle more requests per unit of time.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Parallelism:&lt;/strong&gt; The ability to perform multiple tasks in parallel. Systems that can process tasks in parallel can achieve higher throughput.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Bottlenecks:&lt;/strong&gt; Identifying and addressing bottlenecks in the system's architecture, such as network congestion, slow database queries, or resource limitations, can improve overall throughput.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In summary, latency focuses on the time it takes for a single unit of data to travel and receive a response, affecting the system's responsiveness. Throughput, on the other hand, focuses on the rate at which the system can handle a larger volume of work, indicating its capacity. Both concepts are crucial for designing and optimizing systems to provide a balance between responsiveness and processing capacity.&lt;/p&gt;

&lt;h2&gt;
  
  
  Availability vs Consistency
&lt;/h2&gt;

&lt;p&gt;"Availability" and "Consistency" are fundamental concepts in distributed systems and databases, particularly in the context of the CAP theorem. The CAP theorem, also known as Brewer's theorem, states that in a distributed system, it's impossible to simultaneously achieve all three of the following goals: Consistency, Availability, and Partition tolerance. Here's a breakdown of these concepts:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Availability:&lt;/strong&gt;&lt;br&gt;
Availability refers to the system's ability to respond to requests and provide a meaningful response even in the presence of failures. A highly available system is one that is operational and accessible most of the time, ensuring that users can interact with it and receive responses to their requests. Achieving high availability often involves redundancy, fault tolerance, load balancing, and mechanisms for failover.&lt;/p&gt;

&lt;p&gt;In an availability-focused system:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Data might not be fully up-to-date or consistent across all nodes in the system at all times.&lt;/li&gt;
&lt;li&gt;The system prioritizes remaining operational and providing responses, even if those responses might not reflect the latest state of the system.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Consistency:&lt;/strong&gt;&lt;br&gt;
Consistency refers to the property that all nodes in a distributed system have the same view of the data at any given time. In a consistent system, all nodes will provide the same data in response to a query, regardless of which node is queried. Achieving strong consistency often involves synchronization mechanisms and coordination between nodes to ensure that updates are propagated consistently.&lt;/p&gt;

&lt;p&gt;In a consistency-focused system:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;All nodes agree on the most recent data value, providing a single version of the truth.&lt;/li&gt;
&lt;li&gt;Ensuring consistency might involve trade-offs in terms of availability and response times, especially in the presence of network partitions or failures.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




</description>
      <category>systemdesign</category>
      <category>programming</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Mastering TypeScript Modules: Organize, Reuse, and Collaborate with Ease</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Sat, 22 Jul 2023 06:56:39 +0000</pubDate>
      <link>https://dev.to/rajrathod/mastering-typescript-modules-organize-reuse-and-collaborate-with-ease-5334</link>
      <guid>https://dev.to/rajrathod/mastering-typescript-modules-organize-reuse-and-collaborate-with-ease-5334</guid>
      <description>&lt;p&gt;TypeScript modules are an essential feature of the TypeScript language that help organize and manage code in larger projects. Modules provide a way to encapsulate and share code across different files while avoiding naming conflicts and keeping the codebase maintainable. In this explanation, I'll cover the different aspects of TypeScript modules in detail.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Module Definitions:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;In TypeScript, a module is a separate file that contains code and declarations that can be imported and used in other files. A module can be a single class, function, interface, variable, or a combination of these entities. Modules are defined using the &lt;code&gt;export&lt;/code&gt; keyword.&lt;/p&gt;

&lt;p&gt;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="c1"&gt;// mathOperations.ts&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&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="nx"&gt;b&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="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="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;subtract&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&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="nx"&gt;b&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="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="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&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;h3&gt;
  
  
  2. &lt;strong&gt;Exporting Declarations:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;To make entities (functions, classes, variables, etc.) accessible outside the module, we use the &lt;code&gt;export&lt;/code&gt; keyword before their declaration. You can either export them inline or use named exports.&lt;/p&gt;

&lt;p&gt;Example (Inline Export):&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="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;PI&lt;/span&gt; &lt;span class="o"&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="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;doubleNumber&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num&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="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="nx"&gt;num&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example (Named Exports):&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;PI&lt;/span&gt; &lt;span class="o"&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="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;doubleNumber&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num&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="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="nx"&gt;num&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;export&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;PI&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;doubleNumber&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. &lt;strong&gt;Default Exports:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;A module can have a default export, which is the primary entity that is exported from the module. Unlike named exports, there can only be one default export per module. When importing a default export, you can choose any name for the imported entity.&lt;/p&gt;

&lt;p&gt;Example (Default Export):&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="c1"&gt;// person.ts&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Person&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="k"&gt;public&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="k"&gt;public&lt;/span&gt; &lt;span class="nx"&gt;age&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;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// main.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;MyPerson&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./person&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;person&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;MyPerson&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  4. &lt;strong&gt;Importing Declarations:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;To use the exported entities from a module, you import them in another file. You can use &lt;code&gt;import&lt;/code&gt; statements to bring in specific named exports or the default export. The imported entities are then available for use within the importing file.&lt;/p&gt;

&lt;p&gt;Example (Named Imports):&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="k"&gt;import&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="nx"&gt;subtract&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./mathOperations&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;add&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="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;      &lt;span class="c1"&gt;// Output: 8&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;subtract&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="mi"&gt;3&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;Example (Default Import):&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="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;MyPerson&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./person&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;person&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;MyPerson&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5. &lt;strong&gt;Module Resolution:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Module resolution is the process through which TypeScript finds and loads the modules. There are two main types of module resolution in TypeScript:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Classic:&lt;/strong&gt; In this mode, TypeScript uses the &lt;code&gt;tsconfig.json&lt;/code&gt; file's &lt;code&gt;module&lt;/code&gt; field to determine the module resolution strategy. CommonJS and AMD are typical choices in this mode.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Node:&lt;/strong&gt; In this mode, TypeScript uses Node.js module resolution strategy, which follows the CommonJS pattern.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  6. &lt;strong&gt;Re-Exports:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;You can also re-export entities from one module into another module using &lt;code&gt;export&lt;/code&gt; statements. This helps to create a cleaner API surface for consumers.&lt;/p&gt;

&lt;p&gt;Example (Re-export):&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="c1"&gt;// utils.ts&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&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;message&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="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;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// logger.ts&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;log&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./utils&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// main.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;logger&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./logger&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;logger&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello, world!&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: Hello, world!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  7. &lt;strong&gt;Module Aliases:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;You can define module aliases to create shorter and more convenient names when importing modules. This is especially useful for lengthy file paths.&lt;/p&gt;

&lt;p&gt;Example (Module Alias):&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="c1"&gt;// tsconfig.json&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;compilerOptions&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;baseUrl&lt;/span&gt;&lt;span class="dl"&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;./src&lt;/span&gt;&lt;span class="dl"&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;paths&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@utils/*&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;utils/*&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="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// main.ts&lt;/span&gt;
&lt;span class="k"&gt;import&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="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@utils/logger&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;h3&gt;
  
  
  8. &lt;strong&gt;Ambient Modules:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Ambient modules allow you to describe the shape of modules in external libraries that may not have TypeScript declarations. This is useful for achieving better type safety when using JavaScript libraries in a TypeScript project.&lt;/p&gt;

&lt;p&gt;Example (Ambient Module):&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="c1"&gt;// ambient.d.ts&lt;/span&gt;
&lt;span class="kr"&gt;declare&lt;/span&gt; &lt;span class="kr"&gt;module&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;some-library&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;doSomething&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="kr"&gt;string&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="c1"&gt;// main.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;doSomething&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;some-library&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;doSomething&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&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;// TypeScript knows that doSomething function exists.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;TypeScript modules play a crucial role in organizing and structuring your codebase, making it easier to maintain, reuse, and collaborate with others in larger projects.&lt;/p&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Mastering Object-Oriented Programming with TypeScript: Encapsulation, Abstraction, Inheritance, and Polymorphism Explained</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Fri, 21 Jul 2023 16:22:54 +0000</pubDate>
      <link>https://dev.to/rajrathod/mastering-object-oriented-programming-with-typescript-encapsulation-abstraction-inheritance-and-polymorphism-explained-c6p</link>
      <guid>https://dev.to/rajrathod/mastering-object-oriented-programming-with-typescript-encapsulation-abstraction-inheritance-and-polymorphism-explained-c6p</guid>
      <description>&lt;h2&gt;
  
  
  What is OOPS?
&lt;/h2&gt;

&lt;p&gt;Object-Oriented Programming is a programming paradigm that revolves around the concept of "objects." An object is a self-contained unit that encapsulates data (attributes) and behaviors (methods) that operate on that data. The primary principles of OOP include:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Encapsulation:&lt;/strong&gt; Encapsulation refers to the bundling of data (attributes) and the methods that operate on that data within a single unit (object). It hides the internal implementation details of the object, allowing the object to be treated as a black box, and only exposing a public interface through which other parts of the code can interact with it.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Abstraction:&lt;/strong&gt; Abstraction allows you to focus on the essential aspects of an object while hiding the unnecessary complexities. It helps in creating a clear separation between the interface (how an object is used) and the implementation (how it is internally defined).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Inheritance:&lt;/strong&gt; Inheritance is a mechanism that enables a class (subclass) to inherit the properties and methods of another class (superclass). This promotes code reusability and hierarchical relationships between classes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Polymorphism:&lt;/strong&gt; Polymorphism allows objects of different classes to be treated as objects of a common superclass. It enables a single interface to represent different types of objects, providing flexibility and extensibility to the codebase.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In TypeScript, you can create classes and interfaces to implement object-oriented programming concepts. Here's a basic example of a TypeScript class:&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;Animal&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;private&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="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;makeSound&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;`&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="s2"&gt; makes a sound.`&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;class&lt;/span&gt; &lt;span class="nx"&gt;Dog&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Animal&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;super&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="nx"&gt;makeSound&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;`&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="s2"&gt; barks.`&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;dog&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;Dog&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Buddy&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;makeSound&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Buddy barks."&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we define an &lt;code&gt;Animal&lt;/code&gt; class with a &lt;code&gt;makeSound&lt;/code&gt; method, and then a &lt;code&gt;Dog&lt;/code&gt; class that extends &lt;code&gt;Animal&lt;/code&gt;. The &lt;code&gt;Dog&lt;/code&gt; class overrides the &lt;code&gt;makeSound&lt;/code&gt; method to provide a specialized implementation.&lt;/p&gt;

&lt;p&gt;By using OOP principles in TypeScript, you can create more organized, maintainable, and scalable applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is the class and obeject?
&lt;/h2&gt;

&lt;p&gt;A class is a blueprint for creating objects. It defines the structure and behavior of objects that will be instantiated based on the class. A class in TypeScript contains properties (also known as fields or attributes) and methods (functions associated with the class). It encapsulates the data and operations that are related to a particular concept or entity.&lt;/p&gt;

&lt;p&gt;Here's the basic syntax for creating a class 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;ClassName&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Properties (attributes)&lt;/span&gt;
  &lt;span class="nl"&gt;propertyName1&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;propertyName2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// Constructor&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;parameter1&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;parameter2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;type&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;propertyName1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;parameter1&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;propertyName2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;parameter2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="c1"&gt;// Methods&lt;/span&gt;
  &lt;span class="nx"&gt;methodName1&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Method implementation&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;methodName2&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Method implementation&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;Let's create a simple class in TypeScript representing a basic car:&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;Car&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Properties&lt;/span&gt;
  &lt;span class="nl"&gt;make&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="nl"&gt;model&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="nl"&gt;year&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="c1"&gt;// Constructor&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;make&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="nx"&gt;model&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="nx"&gt;year&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;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;make&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;make&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;model&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;model&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;year&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;year&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="c1"&gt;// Method&lt;/span&gt;
  &lt;span class="nx"&gt;start&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;`Starting the &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;make&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="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;model&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="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, an object is an instance of a class. Once you have defined a class, you can create objects based on that class blueprint. Objects represent specific instances of the entity described by the class. Each object has its own set of properties and can invoke methods defined in the class.&lt;/p&gt;

&lt;p&gt;Here's how you create an object based on the &lt;code&gt;Car&lt;/code&gt; class we defined earlier:&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;myCar&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;Car&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Toyota&lt;/span&gt;&lt;span class="dl"&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;Camry&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2022&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;anotherCar&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;Car&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Honda&lt;/span&gt;&lt;span class="dl"&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;Accord&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2023&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;myCar&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Starting the Toyota Camry."&lt;/span&gt;
&lt;span class="nx"&gt;anotherCar&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Starting the Honda Accord."&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we created two separate instances of the &lt;code&gt;Car&lt;/code&gt; class, &lt;code&gt;myCar&lt;/code&gt; and &lt;code&gt;anotherCar&lt;/code&gt;, each with its own set of properties (&lt;code&gt;make&lt;/code&gt;, &lt;code&gt;model&lt;/code&gt;, and &lt;code&gt;year&lt;/code&gt;) and the ability to call the &lt;code&gt;start&lt;/code&gt; method.&lt;/p&gt;

&lt;p&gt;Using classes and objects in TypeScript allows you to structure your code more efficiently, promote code reuse through inheritance, and take advantage of object-oriented programming principles.&lt;/p&gt;

&lt;h2&gt;
  
  
  Encapsulation
&lt;/h2&gt;

&lt;p&gt;Encapsulation is one of the fundamental principles of Object-Oriented Programming (OOP). It refers to the bundling of data (attributes) and the methods (functions) that operate on that data within a single unit, known as a class. The main goal of encapsulation is to hide the internal implementation details of an object and only expose a well-defined public interface through which other parts of the code can interact with the object. This concept is often summarized with the phrase "data hiding."&lt;/p&gt;

&lt;p&gt;Encapsulation provides several benefits:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Modularity:&lt;/strong&gt; By encapsulating related data and behavior within a class, you create a self-contained module that can be reused and maintained independently.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Protection:&lt;/strong&gt; By making the internal data private (or protected), you prevent unauthorized access and modification from outside the class, ensuring data integrity and security.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Code Flexibility:&lt;/strong&gt; Encapsulation allows you to change the internal implementation of a class without affecting the code that uses the class, as long as the public interface remains unchanged.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Now, let's see an example of encapsulation 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;BankAccount&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;accountNumber&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="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;balance&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="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;accountNumber&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="nx"&gt;initialBalance&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;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;accountNumber&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;accountNumber&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;balance&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;initialBalance&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="nx"&gt;getAccountNumber&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="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;accountNumber&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="nx"&gt;getBalance&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;balance&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="nx"&gt;deposit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;amount&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;balance&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;amount&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;`Deposited &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;amount&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;. New balance: &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;balance&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="k"&gt;public&lt;/span&gt; &lt;span class="nx"&gt;withdraw&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;amount&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;if&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;balance&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="nx"&gt;amount&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;balance&lt;/span&gt; &lt;span class="o"&gt;-=&lt;/span&gt; &lt;span class="nx"&gt;amount&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;`Withdrawn &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;amount&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;. New balance: &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;balance&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="k"&gt;else&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;Insufficient balance&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="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we have a &lt;code&gt;BankAccount&lt;/code&gt; class that represents a simple bank account. The class has two private properties: &lt;code&gt;accountNumber&lt;/code&gt; and &lt;code&gt;balance&lt;/code&gt;. These properties are marked as private, so they are not accessible from outside the class. This ensures that other parts of the code cannot directly access or modify these properties.&lt;/p&gt;

&lt;p&gt;To interact with the private properties, the class provides public methods: &lt;code&gt;getAccountNumber&lt;/code&gt;, &lt;code&gt;getBalance&lt;/code&gt;, &lt;code&gt;deposit&lt;/code&gt;, and &lt;code&gt;withdraw&lt;/code&gt;. These methods serve as the public interface through which other parts of the code can interact with the &lt;code&gt;BankAccount&lt;/code&gt; object.&lt;/p&gt;

&lt;p&gt;Now, let's use this class:&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;account&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;BankAccount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;123456789&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1000&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;Account Number:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getAccountNumber&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Account Number: 123456789"&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;Balance:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getBalance&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Balance: 1000"&lt;/span&gt;

&lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;deposit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Deposited 500. New balance: 1500"&lt;/span&gt;
&lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;withdraw&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Withdrawn 200. New balance: 1300"&lt;/span&gt;
&lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;withdraw&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1500&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Insufficient balance"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this usage example, we can see that we can access the account number and balance through the public methods, but we cannot directly modify them. This is due to the encapsulation, which protects the internal state of the &lt;code&gt;BankAccount&lt;/code&gt; object and allows controlled access through the defined public interface.&lt;/p&gt;

&lt;p&gt;By encapsulating the data within the class and providing well-defined methods to interact with it, we ensure that the state of the object remains consistent and secure, making the code easier to maintain and less prone to bugs or accidental misuse.&lt;/p&gt;

&lt;h2&gt;
  
  
  Abstraction
&lt;/h2&gt;

&lt;p&gt;Abstraction is a key concept in Object-Oriented Programming (OOP) that focuses on presenting essential features of an object while hiding unnecessary details. It allows you to represent complex systems or entities in a simplified manner, making it easier to understand and work with them. Abstraction enables you to build models that capture the relevant characteristics of an object, without exposing all the implementation specifics.&lt;/p&gt;

&lt;p&gt;In OOP, abstraction is achieved through the use of abstract classes and interfaces. These abstract constructs provide a blueprint for other classes to follow, defining a set of methods and properties without providing their implementation. The concrete subclasses that extend the abstract class or implement the interface are responsible for implementing these abstract elements.&lt;/p&gt;

&lt;p&gt;The main benefits of abstraction are:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Simplified Complexity:&lt;/strong&gt; Abstraction allows you to focus on the high-level design and behavior of an object, hiding the intricate details that might not be relevant at that level.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Code Reusability:&lt;/strong&gt; By defining common interfaces through abstract classes or interfaces, you promote code reuse. Concrete classes can inherit from an abstract class or implement an interface, inheriting its structure and behavior.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Flexibility:&lt;/strong&gt; Abstraction enables you to change the implementation details of concrete classes without affecting the overall functionality of the program, as long as the abstract interface remains unchanged.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Let's illustrate abstraction with 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="c1"&gt;// Abstract class representing a shape&lt;/span&gt;
&lt;span class="kd"&gt;abstract&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;abstract&lt;/span&gt; &lt;span class="nx"&gt;getArea&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="kd"&gt;abstract&lt;/span&gt; &lt;span class="nx"&gt;getPerimeter&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;span class="c1"&gt;// Concrete subclass representing a Circle&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Circle&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;radius&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="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;radius&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;span class="k"&gt;super&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;radius&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;radius&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;getArea&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="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PI&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;radius&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;radius&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;getPerimeter&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="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PI&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;radius&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="c1"&gt;// Concrete subclass representing a Rectangle&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Rectangle&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;width&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;private&lt;/span&gt; &lt;span class="nx"&gt;height&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="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;width&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="nx"&gt;height&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;span class="k"&gt;super&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;width&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;width&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;height&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;getArea&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;width&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;height&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;getPerimeter&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="mi"&gt;2&lt;/span&gt; &lt;span class="o"&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;width&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;height&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we have an abstract class called &lt;code&gt;Shape&lt;/code&gt;. It defines two abstract methods: &lt;code&gt;getArea()&lt;/code&gt; and &lt;code&gt;getPerimeter()&lt;/code&gt;. These methods represent the essential characteristics of any shape, but they are not implemented in the &lt;code&gt;Shape&lt;/code&gt; class itself.&lt;/p&gt;

&lt;p&gt;Then, we have two concrete subclasses, &lt;code&gt;Circle&lt;/code&gt; and &lt;code&gt;Rectangle&lt;/code&gt;, that extend the &lt;code&gt;Shape&lt;/code&gt; class. These subclasses are responsible for providing implementations for the abstract methods.&lt;/p&gt;

&lt;p&gt;By using abstraction, we can create a collection of different shapes and calculate their areas and perimeters without worrying about the specific implementation details of each shape:&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;printShapeDetails&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Shape&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Area:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getArea&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;Perimeter:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getPerimeter&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;circle&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;Circle&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;rectangle&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;Rectangle&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;printShapeDetails&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;circle&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;printShapeDetails&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;rectangle&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When we run this code, we get the following output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Area: 78.53981633974483
Perimeter: 31.41592653589793
Area: 24
Perimeter: 20
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The beauty of abstraction is that the &lt;code&gt;printShapeDetails&lt;/code&gt; function can work with any shape that implements the &lt;code&gt;Shape&lt;/code&gt; interface. We can create new shapes, such as triangles, squares, etc., without modifying the &lt;code&gt;Shape&lt;/code&gt; class or the &lt;code&gt;printShapeDetails&lt;/code&gt; function. This demonstrates the flexibility and reusability achieved through abstraction.&lt;/p&gt;

&lt;h2&gt;
  
  
  Inheritance
&lt;/h2&gt;

&lt;p&gt;Inheritance is a core concept in Object-Oriented Programming (OOP) that allows a class (subclass) to inherit properties and methods from another class (superclass). It forms an "is-a" relationship between classes, where the subclass is a specialized version of the superclass. Inheritance promotes code reuse, as it allows you to define common attributes and behaviors in a superclass and then extend or modify them in subclasses.&lt;/p&gt;

&lt;p&gt;The class that is being inherited from is called the superclass or base class, while the class that inherits from the superclass is called the subclass or derived class.&lt;/p&gt;

&lt;p&gt;Here are the main advantages of inheritance:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Code Reusability:&lt;/strong&gt; Inheritance allows you to reuse the functionality defined in the superclass, reducing the amount of redundant code in your application.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Modularity:&lt;/strong&gt; Inheritance promotes a hierarchical organization of classes, making the code more organized and easier to maintain.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Polymorphism:&lt;/strong&gt; Inherited methods can be overridden in the subclass to provide specialized behavior, allowing for polymorphic behavior when dealing with objects of different classes through a common superclass interface.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Let's demonstrate inheritance with 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="c1"&gt;// Base class: Animal&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;private&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="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;age&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="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="nx"&gt;age&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;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="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;makeSound&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Some generic sound&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="nx"&gt;getInfo&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="s2"&gt;`Name: &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="s2"&gt;, Age: &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;age&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="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Subclass: Dog (inherits from Animal)&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Dog&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;breed&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="nx"&gt;age&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="nx"&gt;breed&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;super&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;age&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;breed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;breed&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;makeSound&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Woof!&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="nx"&gt;getInfo&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="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getInfo&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="s2"&gt;, Breed: &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;breed&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="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we have a base class &lt;code&gt;Animal&lt;/code&gt; with properties &lt;code&gt;name&lt;/code&gt; and &lt;code&gt;age&lt;/code&gt;, and methods &lt;code&gt;makeSound()&lt;/code&gt; and &lt;code&gt;getInfo()&lt;/code&gt;. Then, we define a subclass &lt;code&gt;Dog&lt;/code&gt; that inherits from &lt;code&gt;Animal&lt;/code&gt;. The &lt;code&gt;Dog&lt;/code&gt; class adds its specific property &lt;code&gt;breed&lt;/code&gt; and overrides the &lt;code&gt;makeSound()&lt;/code&gt; and &lt;code&gt;getInfo()&lt;/code&gt; methods.&lt;/p&gt;

&lt;p&gt;Now, let's create objects based on these classes:&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;genericAnimal&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;Animal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Generic Animal&lt;/span&gt;&lt;span class="dl"&gt;"&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="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;genericAnimal&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getInfo&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Name: Generic Animal, Age: 5"&lt;/span&gt;
&lt;span class="nx"&gt;genericAnimal&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;makeSound&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Some generic sound"&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dog&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;Dog&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Buddy&lt;/span&gt;&lt;span class="dl"&gt;"&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Labrador&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;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getInfo&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Name: Buddy, Age: 3, Breed: Labrador"&lt;/span&gt;
&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;makeSound&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Woof!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we can see that the &lt;code&gt;Dog&lt;/code&gt; class inherits the &lt;code&gt;name&lt;/code&gt;, &lt;code&gt;age&lt;/code&gt;, and methods from the &lt;code&gt;Animal&lt;/code&gt; class. The &lt;code&gt;makeSound()&lt;/code&gt; method is overridden in the &lt;code&gt;Dog&lt;/code&gt; class to provide the specific sound of a dog ("Woof!"). Additionally, the &lt;code&gt;getInfo()&lt;/code&gt; method is also overridden in the &lt;code&gt;Dog&lt;/code&gt; class to include the &lt;code&gt;breed&lt;/code&gt; property along with the &lt;code&gt;name&lt;/code&gt; and &lt;code&gt;age&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;By using inheritance, we can create a hierarchy of classes where each subclass inherits and extends the functionality of the superclass. This approach allows us to reuse common code, define specialized behaviors, and build complex systems in a structured and modular way.&lt;/p&gt;

&lt;h2&gt;
  
  
  Polymorphism
&lt;/h2&gt;

&lt;p&gt;Polymorphism is another important concept in Object-Oriented Programming (OOP) that allows objects of different classes to be treated as objects of a common superclass. It enables a single interface (method or property) to represent different types of objects, providing flexibility and extensibility to the codebase. Polymorphism is often achieved through method overriding and method overloading.&lt;/p&gt;

&lt;p&gt;There are two types of polymorphism:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Compile-time Polymorphism (Static Polymorphism):&lt;/strong&gt; This type of polymorphism is resolved at compile time. It occurs when the method overloading is used, i.e., having multiple methods with the same name but different parameter lists. The compiler determines the appropriate method to call based on the method's signature and the arguments passed during the function call.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Run-time Polymorphism (Dynamic Polymorphism):&lt;/strong&gt; This type of polymorphism is resolved at run time. It occurs when the method overriding is used, i.e., having a method in the subclass with the same name and signature as the one in the superclass. The method to be called is determined at run time based on the actual type of the object.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Let's illustrate both types of polymorphism with 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="c1"&gt;// Compile-time Polymorphism (Method Overloading)&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;MathOperations&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="nx"&gt;a&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="nx"&gt;b&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="kr"&gt;number&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="nx"&gt;a&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="nx"&gt;b&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="kr"&gt;string&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="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;any&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;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&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;math&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;MathOperations&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;math&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;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Output: 15 (number addition)&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;math&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="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="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;span class="c1"&gt;// Output: "Hello, World!" (string concatenation)&lt;/span&gt;

&lt;span class="c1"&gt;// Run-time Polymorphism (Method Overriding)&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;makeSound&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Some generic sound&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="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Dog&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;makeSound&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Woof!&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="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Cat&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;makeSound&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Meow!&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="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;animalSound&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;animal&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Animal&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;animal&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;makeSound&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;dog&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;Dog&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;cat&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;Cat&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;animalSound&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Woof!" (Dog's sound)&lt;/span&gt;
&lt;span class="nx"&gt;animalSound&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cat&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Meow!" (Cat's sound)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we first demonstrate compile-time polymorphism through method overloading in the &lt;code&gt;MathOperations&lt;/code&gt; class. We define two versions of the &lt;code&gt;add&lt;/code&gt; method: one for number addition and another for string concatenation. The appropriate method is chosen at compile time based on the argument types used during the function call.&lt;/p&gt;

&lt;p&gt;Next, we demonstrate run-time polymorphism through method overriding in the &lt;code&gt;Animal&lt;/code&gt;, &lt;code&gt;Dog&lt;/code&gt;, and &lt;code&gt;Cat&lt;/code&gt; classes. The &lt;code&gt;Animal&lt;/code&gt; class has a &lt;code&gt;makeSound&lt;/code&gt; method that provides a generic sound. Both the &lt;code&gt;Dog&lt;/code&gt; and &lt;code&gt;Cat&lt;/code&gt; classes override the &lt;code&gt;makeSound&lt;/code&gt; method to provide their specific sounds. When we call the &lt;code&gt;animalSound&lt;/code&gt; function with different objects of &lt;code&gt;Dog&lt;/code&gt; and &lt;code&gt;Cat&lt;/code&gt;, the appropriate &lt;code&gt;makeSound&lt;/code&gt; method is dynamically determined at run time based on the actual object's type.&lt;/p&gt;

&lt;p&gt;Polymorphism allows you to write more flexible and extensible code by treating objects based on their common interface rather than their specific types. It plays a crucial role in designing large-scale applications and simplifies the interactions between various classes and modules.&lt;/p&gt;

&lt;h2&gt;
  
  
  TypeScript Interfaces
&lt;/h2&gt;

&lt;p&gt;In TypeScript, interfaces are used to define the structure and shape of an object. They provide a way to define contracts that objects must adhere to, specifying the properties, methods, and their types that an object of that interface should have. Interfaces play a crucial role in achieving static type checking and providing code documentation. Here's an overview of TypeScript interfaces:&lt;/p&gt;

&lt;h3&gt;
  
  
  Interface Declaration:
&lt;/h3&gt;

&lt;p&gt;You can declare an interface using the &lt;code&gt;interface&lt;/code&gt; keyword, followed by the name of the interface. 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;Person&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="nl"&gt;age&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;h3&gt;
  
  
  Properties:
&lt;/h3&gt;

&lt;p&gt;Interfaces define the properties that an object must have. Each property is defined with a name and its type. 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;Person&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="nl"&gt;age&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;h3&gt;
  
  
  Optional Properties:
&lt;/h3&gt;

&lt;p&gt;You can make properties optional in an interface by adding a &lt;code&gt;?&lt;/code&gt; (question mark) after the property name. These properties can be present or omitted in the implementing object. 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;Person&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="nl"&gt;age&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;h3&gt;
  
  
  Readonly Properties:
&lt;/h3&gt;

&lt;p&gt;You can mark properties as readonly using the &lt;code&gt;readonly&lt;/code&gt; modifier. Readonly properties can only be assigned a value when the object is created and cannot be modified thereafter. 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;Person&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="k"&gt;readonly&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="k"&gt;readonly&lt;/span&gt; &lt;span class="nx"&gt;age&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;h3&gt;
  
  
  Methods:
&lt;/h3&gt;

&lt;p&gt;Interfaces can also define methods that an object should implement. Method signatures include the method name, parameter types, and return type. 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;Calculator&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="nx"&gt;a&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="nx"&gt;b&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="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
     &lt;span class="nx"&gt;subtract&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&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="nx"&gt;b&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="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;h3&gt;
  
  
  Extending Interfaces:
&lt;/h3&gt;

&lt;p&gt;Interfaces can extend other interfaces, inheriting their properties and methods while adding new ones. This helps in creating modular and reusable interface definitions. 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;Employee&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Person&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="nl"&gt;employeeId&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="nl"&gt;department&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Implementing Interfaces:
&lt;/h3&gt;

&lt;p&gt;To ensure an object adheres to an interface, you can use the &lt;code&gt;implements&lt;/code&gt; keyword to specify that the object implements a particular interface. TypeScript will enforce that the object provides the required properties and methods. 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;class&lt;/span&gt; &lt;span class="nx"&gt;Person&lt;/span&gt; &lt;span class="k"&gt;implements&lt;/span&gt; &lt;span class="nx"&gt;Employee&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="nl"&gt;age&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="nl"&gt;employeeId&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="nl"&gt;department&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Interfaces in TypeScript provide a way to define contracts and enforce type checking for objects. They promote code reusability, maintainability, and help in catching errors at compile-time. They are a fundamental tool in writing type-safe and structured code in TypeScript.&lt;/p&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




</description>
      <category>typescript</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Exploring the Power of TypeScript Decorators: Extending and Modifying Code with Ease</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Thu, 20 Jul 2023 03:02:05 +0000</pubDate>
      <link>https://dev.to/rajrathod/exploring-the-power-of-typescript-decorators-extending-and-modifying-code-with-ease-424l</link>
      <guid>https://dev.to/rajrathod/exploring-the-power-of-typescript-decorators-extending-and-modifying-code-with-ease-424l</guid>
      <description>&lt;h2&gt;
  
  
  TypeScript Decorators
&lt;/h2&gt;

&lt;p&gt;Decorators in TypeScript are a feature that allows you to modify or annotate classes, methods, properties, or parameters at design time. They provide a way to add metadata or behavior to your code using a declarative approach. Decorators are denoted by the &lt;code&gt;@&lt;/code&gt; symbol followed by the decorator function or expression. Here are some examples of decorators in TypeScript:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Class Decorator:&lt;/strong&gt;&lt;br&gt;
A class decorator is applied to a class declaration and can be used to modify the class or its constructor behavior. It receives the constructor function of the class as its target.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Class Decorator Parameters:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;target&lt;/code&gt;: The &lt;code&gt;target&lt;/code&gt; parameter represents the constructor function of the class being decorated. If the class is decorated, &lt;code&gt;target&lt;/code&gt; will be the constructor function of that class. It allows you to access and modify the class constructor or its prototype.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;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;myClassDecorator&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Modify the class behavior or prototype here&lt;/span&gt;
  &lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;prototype&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;customMethod&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;This is a custom method added by the decorator.&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="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;myClassDecorator&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;MyClass&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Class implementation&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;instance&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;MyClass&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;customMethod&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: "This is a custom method added by the decorator."&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Use Case:&lt;/strong&gt;&lt;br&gt;
A common use case for class decorators is to add functionality or metadata to classes, like logging, access control, or creating singleton instances.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Method Decorator:&lt;/strong&gt;&lt;br&gt;
A method decorator is applied to a method within a class and allows you to modify the behavior of that method. It receives either the constructor of the class (if the method is static) or the prototype of the class (if the method is an instance method) as its target.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Method Decorator Parameters:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;target&lt;/code&gt;: The prototype of the class if the method is an instance method, or the constructor function of the class if the method is a static method.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;propertyKey&lt;/code&gt;: The name of the method being decorated.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;descriptor&lt;/code&gt;: A PropertyDescriptor object containing the attributes of the method (e.g., value, writable, enumerable, configurable).&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;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;myMethodDecorator&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;propertyKey&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="nx"&gt;descriptor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;PropertyDescriptor&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;originalMethod&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;descriptor&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;descriptor&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="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&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;`Calling method &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;propertyKey&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; with arguments: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;args&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="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;originalMethod&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;apply&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;args&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;result&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;class&lt;/span&gt; &lt;span class="nx"&gt;ExampleClass&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;myMethodDecorator&lt;/span&gt;
  &lt;span class="nx"&gt;sayHello&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="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;`Hello, &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="s2"&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;instance&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;ExampleClass&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sayHello&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&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: "Calling method sayHello with arguments: John" followed by "Hello, John!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Use Case:&lt;/strong&gt;&lt;br&gt;
Method decorators are useful for implementing cross-cutting concerns like logging, measuring execution time, caching, or authentication checks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Property Decorator:&lt;/strong&gt;&lt;br&gt;
A property decorator is applied to a property within a class and allows you to modify the behavior of that property. It receives either the constructor of the class (if the property is static) or the prototype of the class (if the property is an instance property) as its target.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Property Decorator Parameters:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;target&lt;/code&gt;: The prototype of the class if the property is an instance property, or the constructor function of the class if the property is a static property.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;propertyKey&lt;/code&gt;: The name of the property being decorated.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;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;myPropertyDecorator&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;propertyKey&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;privateKey&lt;/span&gt; &lt;span class="o"&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;propertyKey&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="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;propertyKey&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;get&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&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="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;privateKey&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;set&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&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;this&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;privateKey&lt;/span&gt;&lt;span class="p"&gt;]&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="nx"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;enumerable&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="na"&gt;configurable&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="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;ExampleClass&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;myPropertyDecorator&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;instance&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;ExampleClass&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;instance&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&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;instance&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="c1"&gt;// Output: "JOHN"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Use Case:&lt;/strong&gt;&lt;br&gt;
Property decorators can be used for validation, formatting, or other transformations on class properties before their values are accessed or set.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parameter Decorator:&lt;/strong&gt;&lt;br&gt;
A parameter decorator is applied to a parameter of a method or constructor within a class. It allows you to modify the behavior of that specific parameter.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Parameter Decorator Parameters:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;target&lt;/code&gt;: The prototype of the class if the decorator is applied to an instance method or the constructor function if the decorator is applied to a static method.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;propertyKey&lt;/code&gt;: The name of the method if the decorator is applied to an instance method or &lt;code&gt;undefined&lt;/code&gt; if applied to a constructor.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;parameterIndex&lt;/code&gt;: The index of the parameter within the method or constructor's parameter list.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;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;myParameterDecorator&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;propertyKey&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="nx"&gt;parameterIndex&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;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;`Parameter &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;parameterIndex&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; of method &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;propertyKey&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; in class &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;target&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="s2"&gt; is decorated.`&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;ExampleClass&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;sayHello&lt;/span&gt;&lt;span class="p"&gt;(@&lt;/span&gt;&lt;span class="nd"&gt;myParameterDecorator&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="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;`Hello, &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="s2"&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;instance&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;ExampleClass&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sayHello&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&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: "Parameter 0 of method sayHello in class ExampleClass is decorated." followed by "Hello, John!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Use Case:&lt;/strong&gt;&lt;br&gt;
Parameter decorators can be used for logging, validation, or to provide additional context information for methods.&lt;/p&gt;
&lt;h3&gt;
  
  
  Real-life Use Case of Decorators in TypeScript:
&lt;/h3&gt;

&lt;p&gt;Suppose you are building an Express.js web application and want to implement an authentication middleware that checks if a user is authorized to access certain routes. You can use decorators to achieve 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="c1"&gt;// Define an authentication decorator&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;authMiddleware&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;propertyKey&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="nx"&gt;descriptor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;PropertyDescriptor&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;originalMethod&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;descriptor&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;descriptor&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="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;[])&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Check authentication logic here&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;isAuthenticated&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;checkIfUserIsAuthenticated&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&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;isAuthenticated&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;originalMethod&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;apply&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="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;401&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Unauthorized&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="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;UserController&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;authMiddleware&lt;/span&gt;
  &lt;span class="nx"&gt;getUserInfo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// This route will only be accessible if the user is authenticated&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;userInfo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;getUserInfoFromDatabase&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;json&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userInfo&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="c1"&gt;// Express.js route setup (simplified)&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/user&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="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;userController&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;UserController&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="nx"&gt;userController&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getUserInfo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&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, the &lt;code&gt;authMiddleware&lt;/code&gt; decorator checks if the user is authenticated before allowing access to the &lt;code&gt;getUserInfo&lt;/code&gt; method. This helps keep the authentication logic separate and reusable, making the code more maintainable.&lt;/p&gt;

&lt;p&gt;Decorators provide a way to extend and modify the behavior of classes, methods, properties, or parameters in a declarative manner. They can be used for various purposes like logging, validation, dependency injection, and more. TypeScript decorators are powerful tools that enhance code readability, reusability, and maintainability.&lt;/p&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




</description>
      <category>typescript</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Exploring the Power of TypeScript Generics: Constraints, Utility Types, Literal Types, and Recursive Structures</title>
      <dc:creator>Rajesh Rathore</dc:creator>
      <pubDate>Wed, 19 Jul 2023 08:35:34 +0000</pubDate>
      <link>https://dev.to/rajrathod/exploring-the-power-of-typescript-generics-constraints-utility-types-literal-types-and-recursive-structures-78g</link>
      <guid>https://dev.to/rajrathod/exploring-the-power-of-typescript-generics-constraints-utility-types-literal-types-and-recursive-structures-78g</guid>
      <description>&lt;h2&gt;
  
  
  TypeScript Generics
&lt;/h2&gt;

&lt;p&gt;Generics in TypeScript allow you to create reusable components or functions that can work with different types. They provide a way to parameterize types, enabling the creation of flexible and type-safe code. Here's an explanation of generics with an example:&lt;/p&gt;

&lt;h3&gt;
  
  
  Generic Functions:
&lt;/h3&gt;

&lt;p&gt;You can define a generic function by specifying a type parameter inside angle brackets (&lt;code&gt;&amp;lt;&amp;gt;&lt;/code&gt;). This type parameter can then be used as a placeholder for a specific type when the function is called. 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;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;span class="kd"&gt;let&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="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;result&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: "Hello"&lt;/span&gt;

   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;numberResult&lt;/span&gt; &lt;span class="o"&gt;=&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="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="mi"&gt;42&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;numberResult&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: 42&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the &lt;code&gt;identity&lt;/code&gt; function above, the type parameter &lt;code&gt;T&lt;/code&gt; represents a generic type. When the function is called, the provided argument's type will be inferred, or you can explicitly specify the type within the angle brackets.&lt;/p&gt;

&lt;h3&gt;
  
  
  Generic Interfaces:
&lt;/h3&gt;

&lt;p&gt;You can also use generics with interfaces to create reusable interfaces that work with various types. 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;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;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="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;container1&lt;/span&gt;&lt;span class="p"&gt;:&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="o"&gt;=&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="mi"&gt;42&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;container1&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="c1"&gt;// Output: 42&lt;/span&gt;

   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;container2&lt;/span&gt;&lt;span class="p"&gt;:&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="o"&gt;=&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="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;container2&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="c1"&gt;// Output: "Hello"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the &lt;code&gt;Container&lt;/code&gt; interface, the type parameter &lt;code&gt;T&lt;/code&gt; is used to define the &lt;code&gt;value&lt;/code&gt; property. When implementing the interface, you can specify the actual type for &lt;code&gt;T&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Generic Classes:
&lt;/h3&gt;

&lt;p&gt;Generics can also be applied to classes, allowing you to create classes that operate on different types. 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;Queue&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;items&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="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

     &lt;span class="nx"&gt;enqueue&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="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;items&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;dequeue&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;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;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;shift&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;numberQueue&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;Queue&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="nx"&gt;numberQueue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;enqueue&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;numberQueue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;enqueue&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;numberQueue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dequeue&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// Output: 1&lt;/span&gt;

   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;stringQueue&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;Queue&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="nx"&gt;stringQueue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;enqueue&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;stringQueue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;enqueue&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;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;stringQueue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dequeue&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 &lt;code&gt;Queue&lt;/code&gt; class above, the type parameter &lt;code&gt;T&lt;/code&gt; represents the type of items stored in the queue. Different instances of the class can be created with specific types.&lt;/p&gt;

&lt;p&gt;Generics provide flexibility and type safety by allowing you to write reusable components that can work with various types. They enhance code reuse, maintainability, and enable the creation of more generic and flexible APIs in TypeScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  Generic Constraints
&lt;/h2&gt;

&lt;p&gt;Generic constraints in TypeScript allow you to restrict the types that can be used with a generic type parameter. By specifying constraints, you can ensure that the generic type parameter meets certain criteria, such as having specific properties or implementing certain interfaces. This helps to provide more specific type information and enables the usage of properties or methods specific to the constrained types. Here's an explanation of generic constraints with 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;Animal&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="nl"&gt;age&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;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;getOldest&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;Animal&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;animals&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="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;oldest&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;null&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;for&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;animal&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;animals&lt;/span&gt;&lt;span class="p"&gt;)&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;oldest&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;animal&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;oldest&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;oldest&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;animal&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="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;oldest&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;No animals found&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="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;oldest&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;animals&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Animal&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="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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Dog&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&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="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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Cat&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt; &lt;span class="p"&gt;},&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Rabbit&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&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="p"&gt;];&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;oldestAnimal&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;getOldest&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;animals&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;oldestAnimal&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="c1"&gt;// Output: "Cat"&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;oldestAnimal&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: 7&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the example above, we have a generic function &lt;code&gt;getOldest&lt;/code&gt; that finds the oldest animal from an array of animals. The generic type parameter &lt;code&gt;T&lt;/code&gt; is constrained to &lt;code&gt;Animal&lt;/code&gt;, which means that &lt;code&gt;T&lt;/code&gt; must be a subtype of &lt;code&gt;Animal&lt;/code&gt; and have the &lt;code&gt;name&lt;/code&gt; and &lt;code&gt;age&lt;/code&gt; properties defined.&lt;/p&gt;

&lt;p&gt;Within the function, we iterate through the animals and compare their ages to&lt;/p&gt;

&lt;p&gt;find the oldest one. The type of &lt;code&gt;oldest&lt;/code&gt; is &lt;code&gt;T | null&lt;/code&gt;, allowing us to handle the case when no animals are found.&lt;/p&gt;

&lt;p&gt;By applying the &lt;code&gt;extends&lt;/code&gt; keyword with the &lt;code&gt;Animal&lt;/code&gt; interface (&lt;code&gt;T extends Animal&lt;/code&gt;), we ensure that only types that satisfy the &lt;code&gt;Animal&lt;/code&gt; interface can be used with the function. This provides type safety and allows us to access the &lt;code&gt;name&lt;/code&gt; and &lt;code&gt;age&lt;/code&gt; properties on the returned object without any type errors.&lt;/p&gt;

&lt;p&gt;By using generic constraints, you can create more specific and reusable functions that operate on a restricted set of types. It allows you to leverage the properties and methods specific to the constrained types, ensuring type safety and enhancing code clarity.&lt;/p&gt;

&lt;h2&gt;
  
  
  Utility Types
&lt;/h2&gt;

&lt;p&gt;TypeScript's utility types are a powerful toolset of predefined generic types that simplify type manipulation and transformation. They offer convenient operations and transformations on types, providing developers with enhanced capabilities to work with complex type systems. This article dives into some commonly used utility types in TypeScript and illustrates their usage with practical examples.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Partial&amp;lt;T&amp;gt;:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Creates a new type with all properties of &lt;code&gt;T&lt;/code&gt; set to optional.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&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;User&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="nl"&gt;age&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;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;PartialUser&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Partial&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="o"&gt;&amp;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;partialUser&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;PartialUser&lt;/span&gt; &lt;span class="o"&gt;=&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Required&amp;lt;T&amp;gt;:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Creates a new type with all properties of &lt;code&gt;T&lt;/code&gt; set to required.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&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;User&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="nl"&gt;age&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;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;RequiredUser&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Required&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="o"&gt;&amp;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;requiredUser&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;RequiredUser&lt;/span&gt; &lt;span class="o"&gt;=&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;25&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;&lt;strong&gt;Readonly&amp;lt;T&amp;gt;:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Creates a new type with all properties of &lt;code&gt;T&lt;/code&gt; set to read-only.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&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;User&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="nl"&gt;age&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;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;ReadonlyUser&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Readonly&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="o"&gt;&amp;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;readonlyUser&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ReadonlyUser&lt;/span&gt; &lt;span class="o"&gt;=&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// Error: Cannot assign to 'name' because it is a read-only property.&lt;/span&gt;
&lt;span class="nx"&gt;readonlyUser&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane&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;&lt;strong&gt;Record&amp;lt;K, T&amp;gt;:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Creates a new type with properties of type &lt;code&gt;T&lt;/code&gt; for each key &lt;code&gt;K&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Weekday&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Monday&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Tuesday&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Wednesday&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Thursday&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Friday&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;DailySchedule&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Record&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Weekday&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;schedule&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;DailySchedule&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;Monday&lt;/span&gt;&lt;span class="p"&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;Meeting&lt;/span&gt;&lt;span class="dl"&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;Lunch&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;Tuesday&lt;/span&gt;&lt;span class="p"&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;Gym&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;Wednesday&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt;
  &lt;span class="na"&gt;Thursday&lt;/span&gt;&lt;span class="p"&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;Conference&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;Friday&lt;/span&gt;&lt;span class="p"&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;Coding&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Pick&amp;lt;T, K&amp;gt;:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Creates a new type by picking properties &lt;code&gt;K&lt;/code&gt; from &lt;code&gt;T&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&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;User&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="nl"&gt;age&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="nl"&gt;email&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="nl"&gt;address&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="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;UserProfile&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Pick&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;email&lt;/span&gt;&lt;span class="dl"&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;userProfile&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;UserProfile&lt;/span&gt; &lt;span class="o"&gt;=&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;john@example.com&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Omit&amp;lt;T, K&amp;gt;:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Creates a new type by omitting specific properties &lt;code&gt;K&lt;/code&gt; from the original type &lt;code&gt;T&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&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;User&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="nl"&gt;age&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="nl"&gt;email&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="nl"&gt;address&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="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;UserWithoutEmail&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Omit&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;email&lt;/span&gt;&lt;span class="dl"&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;UserWithoutEmail&lt;/span&gt; &lt;span class="o"&gt;=&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;address&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;123 Main St&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Exclude&amp;lt;T, U&amp;gt;:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Creates a new type by excluding types from &lt;code&gt;T&lt;/code&gt; that are assignable to &lt;code&gt;U&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;MyObject&lt;/span&gt; &lt;span class="o"&gt;=&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="kr"&gt;number&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="nl"&gt;age&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="nl"&gt;isActive&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;ExcludedKeys&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Exclude&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;keyof&lt;/span&gt; &lt;span class="nx"&gt;MyObject&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;isActive&lt;/span&gt;&lt;span class="dl"&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="c1"&gt;// ExcludedKeys will be 'id' | 'age'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Extract&amp;lt;T, U&amp;gt;:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Creates a new type by extracting types from &lt;code&gt;T&lt;/code&gt; that are assignable to &lt;code&gt;U&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;MyObject&lt;/span&gt; &lt;span class="o"&gt;=&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="kr"&gt;number&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="nl"&gt;age&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="nl"&gt;isActive&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;ExtractedKeys&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Extract&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;keyof&lt;/span&gt; &lt;span class="nx"&gt;MyObject&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;age&lt;/span&gt;&lt;span class="dl"&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="c1"&gt;// ExtractedKeys will be 'name' | 'age'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Advanced Types
&lt;/h2&gt;

&lt;p&gt;Literal types allow you to specify exact values as types. Literal types can be used to enforce specific values on variables, function parameters, and properties, providing additional type safety and expressiveness. Here's an overview of literal types and some examples:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;String Literal Types&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Represents a specific string value.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;inactive&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nx"&gt;status&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Valid&lt;/span&gt;
   &lt;span class="nx"&gt;status&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pending&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Error: Type '"pending"' is not assignable to type '"active" | "inactive"'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Numeric Literal Types&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Represents a specific numeric value.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;18&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="mi"&gt;21&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;18&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Valid&lt;/span&gt;
   &lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Error: Type '25' is not assignable to type '18 | 21'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Boolean Literal Types&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Represents a specific boolean value.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;isCompleted&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nx"&gt;isCompleted&lt;/span&gt; &lt;span class="o"&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;// Valid&lt;/span&gt;
   &lt;span class="nx"&gt;isCompleted&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Valid&lt;/span&gt;
   &lt;span class="nx"&gt;isCompleted&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Error: Type '0' is not assignable to type 'true | false'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Enum Literal Types&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Description: Represents a specific value from an enumeration.&lt;/li&gt;
&lt;li&gt;Example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kr"&gt;enum&lt;/span&gt; &lt;span class="nx"&gt;Direction&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="nx"&gt;Up&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;UP&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
     &lt;span class="nx"&gt;Down&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;DOWN&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
     &lt;span class="nx"&gt;Left&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;LEFT&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
     &lt;span class="nx"&gt;Right&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;RIGHT&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;let&lt;/span&gt; &lt;span class="nx"&gt;direction&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Direction&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Up&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="nx"&gt;Direction&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Down&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nx"&gt;direction&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Direction&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Up&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Valid&lt;/span&gt;
   &lt;span class="nx"&gt;direction&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Direction&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Left&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Error: Type 'Direction.Left' is not assignable to type 'Direction.Up | Direction.Down'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Literal types provide more precise type information and help catch potential errors at compile-time. They are particularly useful when you want to restrict the possible values of a variable or when working with union types that have specific literal values. By leveraging literal types, you can enhance the type system and ensure the correctness of your code.&lt;/p&gt;

&lt;h3&gt;
  
  
  Recursive types
&lt;/h3&gt;

&lt;p&gt;Recursive types, also known as self-referential types, are types that refer to themselves in their own definition. They allow you to create data structures or types that contain references to the same type within their own structure. Recursive types are useful when working with nested or hierarchical data structures. Here are a few examples of recursive types:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Linked List&lt;/strong&gt;&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;ListNode&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;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="nl"&gt;next&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="nx"&gt;ListNode&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="p"&gt;}&lt;/span&gt;

   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;node1&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ListNode&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="o"&gt;=&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="mi"&gt;1&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;node2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ListNode&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="o"&gt;=&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="mi"&gt;2&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;node3&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ListNode&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="o"&gt;=&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="mi"&gt;3&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

   &lt;span class="nx"&gt;node1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;next&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;node2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nx"&gt;node2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;next&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;node3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Binary Tree&lt;/strong&gt;&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;TreeNode&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;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="nl"&gt;left&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="nx"&gt;TreeNode&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="nl"&gt;right&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="nx"&gt;TreeNode&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="p"&gt;}&lt;/span&gt;

   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;nodeA&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;TreeNode&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="o"&gt;=&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;A&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;nodeB&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;TreeNode&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="o"&gt;=&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;B&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;nodeC&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;TreeNode&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="o"&gt;=&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;C&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

   &lt;span class="nx"&gt;nodeA&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;left&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;nodeB&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nx"&gt;nodeA&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;right&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;nodeC&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Nested Objects&lt;/strong&gt;&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;Person&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="nl"&gt;children&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="nx"&gt;Person&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;personA&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Person&lt;/span&gt; &lt;span class="o"&gt;=&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Alice&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;personB&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Person&lt;/span&gt; &lt;span class="o"&gt;=&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Bob&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;personC&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Person&lt;/span&gt; &lt;span class="o"&gt;=&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Charlie&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

   &lt;span class="nx"&gt;personA&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;children&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;personB&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;personC&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Recursive types allow you to create flexible and hierarchical data structures by referencing the same type within their definition. They enable you to work with nested data and handle complex relationships between entities. When using recursive types, it's important to ensure that the recursion has a terminating condition or a base case to avoid infinite nesting.&lt;/p&gt;

&lt;p&gt;It's worth noting that TypeScript supports recursive types through the concept of type references. However, the compiler imposes some limitations on directly self-referencing types, such as strict circular references. If you encounter such limitations, you can leverage utility types like &lt;code&gt;Partial&lt;/code&gt;, &lt;code&gt;Record&lt;/code&gt;, or conditional types to define recursive structures indirectly.&lt;/p&gt;




&lt;p&gt;🌟 &lt;strong&gt;Thank You for Joining the Journey!&lt;/strong&gt; 🌟&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📌 &lt;strong&gt;Follow me on Social Media!&lt;/strong&gt; 📌&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://raj-rathod.github.io/rajesh-rathore/"&gt;Visit my Website&lt;/a&gt;&lt;br&gt;
📢 &lt;a href="https://twitter.com/Rajesh946055"&gt;Connect with me on Twitter&lt;/a&gt;&lt;br&gt;
📷 &lt;a href="https://www.instagram.com/raj_rathod1313/?hl=en"&gt;Follow me on Instagram&lt;/a&gt;&lt;br&gt;
📚 &lt;a href="https://www.linkedin.com/in/rajesh-rathore-0501/"&gt;Connect on LinkedIn&lt;/a&gt;&lt;br&gt;
📌 &lt;a href="https://github.com/raj-rathod"&gt;Check out my GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💌 &lt;strong&gt;A Special Message to You!&lt;/strong&gt; 💌&lt;/p&gt;

&lt;p&gt;To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!&lt;/p&gt;

&lt;p&gt;👥 Let's Stay Connected! 👥&lt;br&gt;
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.&lt;/p&gt;

&lt;p&gt;Thank you for being a part of this amazing journey! 🚀&lt;/p&gt;




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