What are the similarities/differences between them?
Is one of them going to replace the other?
Scope of the Article
- We have function variables - Functions stored in variables(exg. arrow functions, function expressions, etc.) do not need function names. They can be called using the variable name.
- Dynamic variable types : In JS, type checks are performed at runtime, only when our program is running. That means, we can assign any value to the variable and it will work.
In the above example, we have initialized the variable val with a string - "Fifty". Then, we add val with an integer value 50. As we see here, implicit type conversion takes place and the integer is implicitly converted to String. Instead of the arithmetic addition operation, here concatenation takes place and the result is logged as "Fifty50". So, an implicity type conversion takes place.
Website client-side Usage
Client side refers to everything that is displayed or takes place in the end-user's device. It can include anything the user sees in the UI, any actions that can be performed within the browser, etc.
- add, change, and remove any of the HTML elements and attributes
- change any CSS styles
- create new events
- react to any event
A few examples of this scripting behaviour are:
- By using Ajax or a WebSocket, we can load a new webpage without reloading the page. For example, social media users can send messages without leaving the current page.
- Playing browser game
- Generating pop-up ads.
- Validating input values of a web form, before the data is sent to a web server.
Modern frameworks for Front-end
There are other frameworks as well like vue.js, ember.js which are also highly used.
Server-side means anything that is happening on the server, instead of on the client's end. It can include rendering dynamic webpages, interacting with databases,push notifications and identity authentication.
Server-side scripts run on the server, delivering dynamic content to webpages in response to the user's interaction.
- Client-side and the server-side
- All devices like mobile, tablet, laptops, etc.
According to Stack overflow 2021 Developer survey -
- Rendering: Any problem with the code execution, or rendering, can cause a breakdown in your site appearance and displayed content. Thus, it will disrupt the overall user experience.
What is TypeScript?
TypeScript is a strongly typed language, that is, variables and other data structures can be declared to have specific types, like strings, booleans, etc. By adding this static type definitions to our code,TypeScript makes it easier to see errors early in development, so we spend far less time looking for errors later on.
The process of detecting errors in code without actually running it is called static checking.
Identifying what is and what isn't an error, based on the type of value being operated on is called static type checking.
In TypeScript, an error check is performed before a program is executed based on the types of values, i.e. it is a static type checker.
History of TypeScript
TypeScript was created at Microsoft by Anders Hejlsberg (designer of C#) in Oct 2012. It is maintained by Microsoft. In November 2021, TypeScript 4.5 was released.
Check more of this here - Announcing TypeScript 4.5.
Features of TypeScript
- It is a free and open-source programming language developed and maintained by Microsoft
- ES6 features - TypeScript includes most features of ECMAScript 2015 (ES 6, 7) such as class, interface, Arrow functions etc.
- Static typing(optional) - TypeScript provides static typing through type annotations, to enable type checking at compile time. It speeds up the development process by detecting bugs in real-time.
- Type Annotations on Variables - If you declare a variable with const, var, or let, you can optionally add a type annotation to specify the type of the variable. For example the following code uses type annotations --
Type inference - When there is no explicit type annotation given in TypeScript, type inference is used. For example, the code below uses type inference to provide type information.
Generics - The TypeScript Generics allows you to create reusable components by creating components that can work with a variety of data types, instead of just a single type of data.
A simple example of generics would be --
In the above example, we have made a reusable function genericsDemo(), which can process both string and number types of data. Generics use this special kind of type variable <T> that denotes the types.
- Interfaces - Interfaces defines the syntax for classes to follow, means a class which implements an interface is bound to implement all its members. The TypeScript compiler uses interface for type-checking whether the object has a specific structure or not.
The example defines an interface. The student1 object is of the type Student. Hence, it will now be binding on the object to define all properties as specified by the interface.
- Object-oriented features - TypeScript supports these Oops features - Inheritance, Abstraction, Polymorphism, and Encapsulation.
- built-in types - Apart from regular JS , it has some more built-in types like: unknown, never, object literal, void, etc. For example, typeScript uses the type any whenever it can’t tell what the type of an expression should be.
Mainly, TypeScript does this in 3 ways:
- Advanced type system -- The type system of TypeScript is incredibly rich and includes: interfaces, enums, hybrid types, generics, union/intersection types, access modifiers and much more.
- Developer tooling support -- TypeScript's compiler can run as a background process. It supports incremental compilation and IDE integration. This makes it easier to identify the problems, navigate, and refactor your codebase.
Advantages & Disadvantages of TypeScript
Advantages of TypeScript
- Optional Static typing - In TypeScript, once a variable is declared, it doesn't change its type and can take only a certain value. The compiler also alerts the developer about any type-related mistakes. This results in less error-prone code and better performance during execution.
- Early spotted bugs - TypeScript spots most of the common bugs at a very early stage,reducing the overall load on the compiler for testing activities.
- Rich IDE support - IDEs can offer features like code navigation and autocompletion, providing accurate suggestions. They also give feedback while we are typing: The editor flags errors, including type-related errors. This majorly helps us write maintainable code, resulting in a significant productivity boost. Some popular IDEs for TypeScript include - Microsoft Visual Studio, VS Code, WebStorm, Eclipse, etc.
- Fast refactoring - Code refactoring is a process that involves editing and cleaning up code without changing any functionality. Basically, it makes the code more efficient and maintainable. TypeScript does it very smoothly for us. For example, if we rename any function, and forget to change the name somewhere, then TS will raise an alert about that. Refactoring is accelerated this way, which is especially useful when dealing with large portions of code.
- Power of OOP - In TypeScript, you can use concepts from class-based object-oriented programming (OOP) like classes, interfaces, inheritance, etc. As our project grows in size and complexity, the OOP paradigm facilitates building a well-organized, scalable code.
- Tech world support - TypeScript is an open-source language with a rapidly growing community. It is used by millions of developers around the world and its large community can always guide you. Even some major companies such as slack and KAVAK, switched to TS for managing their large codebases.
Let us also look at some disadvantages of TypeScript:
Disadvantages of TypeScript
Nevertheless, TypeScript continues to evolve, fixing and improving all the time.
- What it is:
- Static/Dynamic :
- File Extension:
Alternatively, TypeScript is a preferred option for developers who want to write compact, readable code that is clean and beautiful, with the added benefits of errors and type checking.
Let us just recap the points we went through in this article :
- TypeScript - About, Background, Features