<center>![Dynamic Type & Static Type](https://images.ecency.com/DQmNy1VCRtEVybKt1yHXXhsMVWgQsN9jaCTbasRkx8hjaMn/12.jpg)
</center>

<p>
    The typescript language provides us with all kinds of types. Of course, the JavaScript language itself has several data types, but TypeScript adds many more to it, to the extent that it allows you to define your own types and use them. In this post, I want to talk about some of the main types that are also known by JavaScript (we call them core types). Then I will examine the difference between "Knowing Type" from JavaScript and "Using Type" from TypeScript.
</p>
<p>
    Our first main type is <code>number</code>. In both JavaScript and TypeScript languages, there is only one type of number, that is, unlike some other languages ​​(for example, Java), there are different types for integers or decimal numbers (float, double, etc.) does not exist Therefore, 10, 5, 6, and 6 are all numbers and there is no difference between them.
</p>
<p>
    Our next type is <code>string</code>, which is usually defined in three different ways:
</p>
<ul>
    <li>
        Using the single quote mark (i.e. <code>'</code>) like <code>'Hi'</code>
    </li>
    <li>
        Using double quote (i.e. <code>"</code>) like <code>"Hi"</code>
    </li>
    <li>
        Using template literal (that is, backtick sign or <code>`</code>) like <code>`Hi`</code>
    </li>
</ul>
<p>
    The third one is a newer method in JavaScript, and by using it, instead of gluing variables and strings together with the <code>+</code> operator, we can use them inside the string itself.
</p>
<p>
    The third type is <code>Boolean</code>, which contains only <code>true</code> and <code>false</code> values. Also, as you know, the values ​​are usually converted to <code>true</code>, except for a special group such as zero, which is always <code>false</code>. <code>Boolean</code> values ​​do not take anything other than these two values ​​and even if you use a <code>number</code> or a <code>string</code> as a <code>Boolean</code>, it will eventually become <code>true</code> or <code>false</code>.
</p>
<p>
    For now, I will start with these three types and as I go further, I will introduce more types. In this post, I want to focus on the difference between "understanding type" and "using type" and explain the concept of <code>dynamic types</code> and <code>static types</code>. To start testing these types, create an HTML file and put the following content in it:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  &lt;title&gt;Understanding TypeScript&lt;/title&gt;
  &lt;script src="app.js" defer&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>
    Now create a file called <code>app.ts</code> to write the typescript codes in it. I have written the following simple code for you which is actually pure javascript and does not have typescript code yet. Put this code in the <code>app.ts</code> file:
</p>
<pre><code class="language-javascript">function add(n1, n2) {
  return n1 + n2;
}
const number1 = 5;
const number2 = 2.8;
const result = add(number1, number2);
console.log(result);</code></pre>
<p>
    As you can see, we have a simple function that adds two numbers together. If we get our javascript file with the <code>tsc app.ts</code> command and open the browser, we will get the number <code>7.8</code> in the browser, so there is no problem until this part. Now, if we want to have a problem with the program like in the previous part, we can define the number <code>5</code> as a <code>string</code>:
</p>
<pre><code class="language-javascript">const number1 = '5';
const number2 = 2.8;</code></pre>
<p>
    By doing this and running the <code>tsc app.ts</code> command again in the browser, we get the number <code>52.8</code>. Exactly the same problem we had with <code>input1.value</code>. In fact, JavaScript tells itself that my first value is a <code>string</code> and is going to be added to the second value. This second value must also be a <code>string</code>, because adding math and calculations between a <code>string</code> and a <code>number</code> does not make sense, so I convert the second value to a <code>string</code>.
</p>
<p>
    To solve this problem, we need to specify the type. To do this, we use a colon plus the name of that particular type. For example, in this function we say:
</p>
<pre><code class="language-typescript">function add(n1: number, n2: number) {
  return n1 + n2;
}</code></pre>
<p>
    Of course, what type is depends on you and your program. For example, if you want this function to receive only string parameters, you can say:
</p>
<pre><code class="language-typescript">function add(n1: string, n2: string) {
  return n1 + n2;
}</code></pre>
<p>
    Now it gives us an error about the number 5 being a string, so we need to remove it from <code>string</code> mode.
</p>
<p>
    We know that the <code>number</code> type is also available in JavaScript and is not specific to TypeScript. In JavaScript itself, we use <code>typeof</code> operator to display type. For example:
</p>
<pre><code class="language-typescript">function add(n1: number, n2: number) {
  console.log(typeof number1);
  return n1 + n2;
}</code></pre>
<p>
    Now we run the command <code>tsc app.ts</code> to update the JavaScript file (<code>app.js</code>), then we go to the browser. In the console section of the browser, we see the word <code>number</code>. If we don't want to use TypeScript and solve the above problem only with JavaScript, we should use the same <code>typeof</code> operator:
</p>
<pre><code class="language-typescript">function add(n1: number, n2: number) {
  if (typeof n1 !== 'number' || typeof n2 !== 'number') {
    throw new Error('Incorrect input!');
  }
  return n1 + n2;
}</code></pre>
<p>
    In this code, if the type of parameter <code>n1</code> or <code>n2</code> is not equal to <code>number</code>, display an error to the user. Throwing errors is one of the issues related to JavaScript and is considered a prerequisite, so I won't go into that issue, but if you don't know what <code>throw new Error</code> does, I must say that it sends an error to the user's browser.
</p>
<p>
    Why should we write such a code in JavaScript? Because JavaScript has the ability to understand and recognize types, but it cannot actively use them like TypeScript. The above code gives us an error at run-time, while using typescript we can find our own error during development and coding. In fact, <i><strong>JavaScript uses dynamic types</strong></i>, which means that types can change instantly. For example, let's convert a numeric variable into a string variable, exactly like the case above, where the second parameter of the function was converted from a number to a string because of the first parameter, while <i><strong>Typescript uses static types</strong></i>, which means that you are allowed to change types. You don't have and it will always be fixed during development.
</p>