TypeScript can be a confusing term for anyone new to JavaScript development. The first impression of TypeScript for beginners is that it is a programming language, more or less, similar to JavaScript. Even professionals with enough coding experience often fail to define TypeScript. So how can we put the answer to this question – What is TypeScript?<\/p>\n\n\n\n
TypeScript is a superset of JavaScript. It has optional static typing, classes, and interfaces. TypeScript is not a separate programming language, what makes it different from JavaScript lies in part of its name – Type<\/em>. Every programming language has data types, In JavaScript these include the commonly used number, string, boolean, etc. To understand TypeScript, we first need to understand how JavaScript behaves with its data types.<\/p>\n\n\n\n
Weak and Strongly typed Languages<\/h2>\n\n\n\n
JavaScript is a dynamically typed language, which means the type of variables defined is checked at runtime. When we write a JavaScript code and declare variables, we don’t define any data type, we simply declare a variable.<\/p>\n\n\n\n
a = 1234\nb = \"Hello\"\nc = true<\/code><\/pre>\n\n\n\n
In JavaScript, we can declare a variable and assign a value to it, and then later we can assign another value to different data types. We can keep on doing this and it is possible because JavaScript is a dynamically-typed language.<\/p>\n\n\n\n
let a = 100\na = \"Hello\"\na = 1234<\/code><\/pre>\n\n\n\n
The above code will work fine. The first value assigned to the variable “a” is a number and then a string is assigned to it. After that, again a Number is assigned to it. This may be not possible in other languages that are statically (or strongly) typed.<\/p>\n\n\n\n
Due to the nature of being dynamically-typed, JavaScript is also a weak-typed language. By weak-typed, it means we can do anything in the expression.<\/p>\n\n\n\n
let a = \"100\"\n let b = 200\n let c = a + b <\/code><\/pre>\n\n\n\n
“a” holds a string while b holds a Number. Yet, when both of these are added and assigned to “c”, it works fine. Something like this may not be possible in other programming languages. A weak-typed language has relaxed and lenient rules while it’s opposite, a strong-typed language has more strict rules.<\/p>\n\n\n\n
Features of TypeScript<\/h2>\n\n\n\n
1. Object-oriented<\/h3>\n\n\n\n
JavaScript has traditionally not supported object-oriented programming features, however in later versions it has improved. TypeScript supports object-oriented programming out of the box. It comes with features such as classes, interfaces, modules, and more.<\/p>\n\n\n\n
2. JavaScript is TypeScript<\/h3>\n\n\n\n
Apart from differences, both JavaScript and TypeScript have many similarities. Actually, JavaScript is TypeScript. Any file with .js extension (JavaScript file) can be converted into a TypeScript .ts file. <\/p>\n\n\n\n
3. Support for JavaScript libraries<\/h3>\n\n\n\n
As mentioned above, JavaScript is TypeScript. So each element of JavaScript is supported in TypeScript. All JavaScript libraries, frameworks, modules, and existing code work with TypeScript.<\/p>\n\n\n\n
4. DOM manipulation<\/h3>\n\n\n\n
Like JavaScript, DOM manipulation is also possible with TypeScript.<\/p>\n\n\n\n
5. Portable<\/h3>\n\n\n\n
TypeScript is extremely portable. It can run on any browser, operating system, or device. TypeScript can run in any environment where JavaScript can.<\/p>\n\n\n\n
Working with TypeScript<\/h2>\n\n\n\n
To work with TypeScript, we first have to install it. <\/p>\n\n\n\n
TypeScript can be installed using the Node Package Manager. Make sure Node.js and NPM installed. Open a terminal and run the following command.<\/p>\n\n\n\n
npm install -g typescript<\/code><\/pre>\n\n\n\n
The command will install TypeScript globally. Now we can create our first TypeScript program.<\/p>\n\n\n\n
Create a new file and name it example.ts. While creating a JavaScript file, we use .js extension. In the case of the TypeScript file, we use .ts. Next, paste the following line of code into the newly created .ts file.<\/p>\n\n\n\n
To run the TypeScript file, run the following command.<\/p>\n\n\n\n
tsc example.ts<\/code><\/pre>\n\n\n\n
This command will not actually run the file, but convert it into a JavaScript file. You will find a JavaScript file of the same name in the same directory. Now use the basic node command to run the JavaScript file.<\/p>\n\n\n\n
Next, create variables with different data types in TypeScript.<\/p>\n\n\n\n
var firstName:string = \"Johnny\"\n var lastName:string = \"Powers\"\n var age:number = 28\n var isPresent:boolean = true\n console.log(\"Name: \" + firstName + \" \" + lastName)\n console.log(\"Age: \" + age)\n console.log(\"Presence: \" + isPresent) <\/code><\/pre>\n\n\n\n
You should notice the first major difference and benefit of TypeScript over JavaScript. TypeScript is a strongly typed language and therefore we declare variables using data types as shown in the example below.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Another major feature of TypeScript is its support for object-oriented programming. Let’s walk through an example:<\/p>\n\n\n\n
In the above TypeScript code, we declared a class named “Details”. This class has four variables with data types, a constructor, and a method named “displayDetails”. It has two different objects (d1 and d2) and these objects are used to initialize. In the end, the method “displayDetails” is called using the two objects.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Advantages and disadvantages of TypeScript<\/h2>\n\n\n\n
Hopefully by now you will have an understanding of the advantages of using TypeScript. It checks error during compile time while JavaScript checks during runtime. Because of this, solving errors becomes easy in TypeScript. As we discussed earlier, TypeScript is strong-typed whereas JavaScript is not. TypeScript supports class and modules and has great tooling support. Some of the disadvantages or drawbacks of TypeScript include the compilation time, which can be high. In addition to this, while running TypeScript in a browser, it is required to compile TypeScript into JavaScript first.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
TypeScript is not that complicated as it may seem. It is nothing more than a super-set of JavaScript with several new features such as types and classes. In this article, we discussed what is TypeScript and how it is different from JavaScript. The main point is that JavaScript is a weak-typed language while TypeScript has strict rules. I feel it is definitely work learning and exploring in your own projects to determine the real value it can bring. TypeScript is popular and commonly used in the development community. Finally, JavaScript has flaws thatTypeScript can help to avoid. Professionals who work with TypeScript tend to highly advocate for using it in any work that involves JavaScript development. To learn more about TypeScript, be sure to visit the official site at typescriptlang.org<\/a>, where you will find plenty of resources for documentation, help, and a sandbox for trying it out.<\/p>\n","protected":false},"excerpt":{"rendered":"
![\"\"](\"https:\/\/www.carnaghan.com\/wp-content\/uploads\/2020\/12\/ts1.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.carnaghan.com\/wp-content\/uploads\/2020\/12\/ts2.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.carnaghan.com\/wp-content\/uploads\/2020\/12\/ts3.png\")
<\/figure>\n\n\n\n