TypeScript vs JavaScript | Bondar Academy
Course: JavaScript for Testers
Module: JavaScript Fundamentals
Instructor: Artem Bondar
Lesson Summary
This lesson covers the key differences between JavaScript and TypeScript , two programming languages that share similar syntax but differ primarily in their handling of data types. Main Differences Strict Typing: TypeScript supports strict typing, while JavaScript does not. Transcoding: TypeScript code is compiled back into JavaScript when executed. Error Prevention: TypeScript helps prevent errors by enforcing type constraints, reducing mistakes in complex codebases. TypeScript Syntax To begin coding in TypeScript, create a file with the .ts extension. For example: lesson10.ts In TypeScript, when declaring variables, you can specify their types. For example: let customerFirstName: string = "John"; let customerAge: number = 25; If you attempt to assign a value of a different type, TypeScript will throw an error: customerFirstName = 100; // Error: Type 'number' is not assignable to type 'string' Custom Types TypeScript allows the creation of custom types to enforce data integrity: type Customer = { firstName: string; lastName: string; isActive: boolean; }; When creating a variable of this custom type, it must adhere to the defined structure: let firstCustomer: Customer = { firstName: "Mary", lastName: "Jones", isActive: true }; Conclusion The primary advantage of TypeScript is its strict typing , which helps maintain data integrity and reduces runtime errors, unlike JavaScript, where type errors may only be discovered during execution.
Video Transcript
In this lesson, I want to show you quickly the difference between JavaScript and TypeScript programming language. Those languages are actually very very similar. The only main difference between the languages is that TypeScript support a strict typing, which JavaScript does not. And what is also interesting fact that when you run the code in TypeScript, when you run it, it's transcoded back into the JavaScript. TypeScript language is useful when you have a pretty complex code base and strict typing helps to make less mistakes overall. But essentially those languages are the same and the syntax of those languages is also the same. So in this lesson, I will quickly show you what is this little difference between the types in the language. So let's get into it. In order to write the code in TypeScript, we need to create a new file. New file, and I call it lesson10.ts Instead of JS, we type a TS and you see immediately in Visual Studio Code that TS icon recognized next to the file. So Visual Studio recognized that this is a TypeScript file. And let's create a few variables just for the beginning. So let's say customer first name equals to John Customer last name equals to Smith Customer age equals to 25. So far it looks the same like a JavaScript, the same syntax. But if we hover over, for example, over the variable customer first name, we can see that it's defined as customer first name column as string. So when you create a new variable and assign a value of this certain type, this variable immediately reserves this certain type. In this example, this is a type of string. And if we try to assign, for example, customer first name equals to, I don't know, 100, it will not work. So we can see that number is not assignable to type string. So TypeScript preventing us to assign the value of the different type to the variable which is declared as a string. Versus in JavaScript, you can easily do that. For example, here we have age assigned as 6 as a string. But if we type age equals to, let's say, 25 and we now assign value of number, we don't see any complaints from the JavaScript that we are doing something wrong. So JavaScript does not prevent us from changing the types of the data assigned to the variable while the TypeScript doing that. So also you can explicitly assign what type of the variable should this be. For example, we type first name should be a string, last name should be a string, and customer age should be a number. And if you try to assign, for example, customer age not as a number, but if we try to assign any value as a string, let's say string 25, we immediately see the complaint that type string is not assignable to type number. What else you can do? You can also create your own custom type. For example, I type type and I create a new type called customer. And I want my customer to be an object of first name, which should be a string, last name, which should be a string as well. And let's say I want to add a status, let's say active status. Is the customer active or not? And I want to assign the type of boolean. That's it. So we created our new type, which called customer. And then when we create a variable, for example, first customer, and assign a type of this variable as customer, then the value that we can assign to this variable should only match the type of customer. It means that if we try to assign, let's say 100, it will not work. We also see the complaint from the TypeScript that type number is not assignable to type customer. So the value that this variable can hold is only the object that should match this particular type. And let's do this. So first customer, I create a new object and this object should be first name. Let's say it will be Mary with the last name. Let's say Jones and is this customer active? Let's say true. Yes, this customer active. And now everything looks fine. We assigned a new customer with the three values that match our custom data types customer and this value was assigned to the variable first customer, which has this particular type. And if we try to change at least any values inside of this object, this will not work. For example, if we remove active from here, we see, okay, first customer active is missing in the type of customer. So if we try to add any more values, for example, we try to add occupation and add any values, we see also complaint that occupation does not exist in type of customer. Or if you change anything inside, for example, true, you will replace to a string. This will not work as well because active should be a Boolean. It should not be a string. So strict data typing helps overall during the coding reduce the number of mistakes that you can make during the scripting. TypeScript helps to control the data integrity to make sure that you will not assign a wrong values to the variables. So your code will be better protecting from crashing during the execution. While in JavaScript, you cannot do that. And in JavaScript, you can find out that you made a mistake with the typing or assigning the wrong value only during the runtime when your code basically crash. All right, so let's quickly summarize what we did in this lesson. The main difference between TypeScript and JavaScript is adding support of the strict typing. The strict typing is defined with this syntax variable name, colon, and then you define the type. You can use the primitive data type such as string Boolean number and so on. And also in TypeScript, you can create your own custom data type and use those data types to control the integrity of your data during the coding. All right, that's it guys and see you in the next lesson.