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.
Our first main type is number. 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.
Our next type is string, which is usually defined in three different ways:
-
Using the single quote mark (i.e.
') like'Hi' -
Using double quote (i.e.
") like"Hi" -
Using template literal (that is, backtick sign or
`) like`Hi`
The third one is a newer method in JavaScript, and by using it, instead of gluing variables and strings together with the + operator, we can use them inside the string itself.
The third type is Boolean, which contains only true and false values. Also, as you know, the values are usually converted to true, except for a special group such as zero, which is always false. Boolean values do not take anything other than these two values and even if you use a number or a string as a Boolean, it will eventually become true or false.
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 dynamic types and static types. To start testing these types, create an HTML file and put the following content in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Understanding TypeScript</title>
<script src="app.js" defer></script>
</head>
<body>
</body>
</html>
Now create a file called app.ts 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 app.ts file:
function add(n1, n2) {
return n1 + n2;
}
const number1 = 5;
const number2 = 2.8;
const result = add(number1, number2);
console.log(result);
As you can see, we have a simple function that adds two numbers together. If we get our javascript file with the tsc app.ts command and open the browser, we will get the number 7.8 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 5 as a string:
const number1 = '5';
const number2 = 2.8;
By doing this and running the tsc app.ts command again in the browser, we get the number 52.8. Exactly the same problem we had with input1.value. In fact, JavaScript tells itself that my first value is a string and is going to be added to the second value. This second value must also be a string, because adding math and calculations between a string and a number does not make sense, so I convert the second value to a string.
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:
function add(n1: number, n2: number) {
return n1 + n2;
}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:
function add(n1: string, n2: string) {
return n1 + n2;
}
Now it gives us an error about the number 5 being a string, so we need to remove it from string mode.
We know that the number type is also available in JavaScript and is not specific to TypeScript. In JavaScript itself, we use typeof operator to display type. For example:
function add(n1: number, n2: number) {
console.log(typeof number1);
return n1 + n2;
}
Now we run the command tsc app.ts to update the JavaScript file (app.js), then we go to the browser. In the console section of the browser, we see the word number. If we don't want to use TypeScript and solve the above problem only with JavaScript, we should use the same typeof operator:
function add(n1: number, n2: number) {
if (typeof n1 !== 'number' || typeof n2 !== 'number') {
throw new Error('Incorrect input!');
}
return n1 + n2;
}
In this code, if the type of parameter n1 or n2 is not equal to number, 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 throw new Error does, I must say that it sends an error to the user's browser.
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, JavaScript uses dynamic types, 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 Typescript uses static types, which means that you are allowed to change types. You don't have and it will always be fixed during development.