Typescript development

    Why Developers love to use TypeScript?

    • January 9, 2020
    • Share :

    JavaScript a scripting language used to create interactive web pages. It runs on a user's web browser without using any resource forms and by following the rules of client-side programming.

    The aim behind developing JavaScript is to make complementary scripting languages such as Visual Basic to C++ in Microsoft's language families.

    Moving on with TypeScript, then it is defined as a superset of JavaScript and this means it behaves very identical to JavaScript adding extra stuff to it. We can say that this language is not around us since too long but it has already become popular in this community. With this JS developers can access to the powerful tools and techniques for writing modern JavaScript that is coupled with an option to output ES5 or ES6.

    The time has arrived to learn TypeScript which can help to improve projects as there is a varying option available on this subject. To clarify some of the points regarding TypeScript value, Let's dive in to understand in a better way.

    What is TypeScript?

    TypeScript is a programming language called as a superset of JavaScript where learning a syntax will help you get started into programming quickly. You can get JavaScript version when you compile TypeScript and it will be safe to use it across all platforms with ease.

    Popularity of TypeScript

    Look at the journey of TypeScript and you'll notice a number of users are using TypeScript and have increased. One of the main reason that developers choose TypeScript is that it comes with fewer errors.

    The popularity of TypeScript is growing stronger and stronger and below stats have confirmed the same:

    Typescript developers on github
    Github
    51,460 - Stars on Github7086 - Forks on GitHub 6,442,469 - Weekly Downloads
    Why JavaScript?
    • Open Source Project
    • Specially designed for small script
    • Support classes, modules, and interface
    • Allows cross-compilation
    • Compiled JavaScript which runs on any browser
    Why TypeScript?
    • Supports JS libraries and API documentation
    • Superset of JavaScript
    • Code can convert into plain JavaScript Code
    • Allows better development time tool and support
    • It can extend language beyond standard decorators
    History of JavaScript
    • Launch in September 1995 and took ten days to develop an escriptng language called Mocha
    • November 1996 Netscape submitted JavaScript to ECMA
    • In 1998, ECMA Script 2 was released
    • In 1999, ECMA Script 3 was released
    • In 2005, ECMA 4 was developed jointly by Eich and Mozilla
    • In 2009, Common JS project was launched
    • In 2011, ECMA Script 5 was released
    • In 2015, ECMA Script 2016 was released
    • In June 2017 ECMA Script 2017 was released(Current)
    History of TypeScript
    • First publicly launched in 2012
    • Later two years, internal development started at Microsoft
    • TypeScript 1.0 was released in 2014
    • In July 2015, ES6 modules, namespace, keyword, support, and decorator started
    • In November 2016 new features were added such as key and lookup types
    • March 2018, gave conditional type, improved key, and other intersection types support

    TypeScript Vs JavaScript

    Typescript VS Javascript

    Over the time new version has been released and great improvement has made in TypeScript. This improvement are seen in terms of features, functions, performance and more. To get a fair idea about features and technologies dive in.

    So let's compare TypeScript and JavaScript
    Comparision JavaScript TypeScript
    UsageIt uses to develop interactive webpages. It can run smoothly on the web browser of the user.It uses to write simple JavaScript code which can run smoothly on any browser and offer support from various version of ECMA Script.
    EcosystemUser can code without having any build stepIt comes with an intuitive ecosystem where a developer can use JavaScript features.
    Data BindingThere is no concept of describing data with interface and types.It makes use of interface and type to describe data.
    Learning CurveIt is effortless and easyIt comes with a stiff learning curve
    Code CompilationYou don't need to compile code in here.Compile code is required
    PrototypingIt is absent in JavaScriptIt comes with a feature of prototyping
    AnnotationNo annotation is needed in JavaScript.Developers do need to annotate code consistently with the best output.

    How TypeScript makes programming better?

    The most important feature added is type information, which helps developers to create more secure code. It allows adding types of variables in several languages and this control parameter and aspects of the code with ease. For example:

    You need to add ":" followed by the type you need. Example

    Without using the TypeScript the property will be declare the property of instance as below:

    Before TypeScript

    Key Concepts of TypeScript

    There are mainly three concepts in TypeScript, such as Types, Interface, Classes, and OOP.

    Types : number, string, boolean, {}, [], and undefined were the types used by JavaScript, whereas TypeScript adds enum (Red, Blue, Green) along with 'any' and 'void' types.

    Interface

    TypeScript is not part of ECMAScript and is use it to verify the type during development, check below

    Interface define variable with more than one type

    This is how interface describe a literal objects

    Classes and OOP

    Understand how classes work in TypeScript

    As we studied in Part 5 about how to use TypeScript in regular JQuery projects, now Let's go more in-depth and discuss some of the advantages of TypeScript.

    Advantages of TypeScript

    Object-Oriented Programming Features

    TS comes with a great set of OOP features that are a bit complex to implement, so one needs to generate js code to see how to solve it. TS comes with a clean and organized code.

    Example

    Later this JavaScript code will be transpiled like:

    • TS allows us to use inheritance, interface, and other generic types at a more advanced level along with using dependency injection in scripts.
    • TypeScript does not need a runtime plugin
    • Previously, technologies such as Flash and Silverlight died but due to modern web technologies has taken new standard forms. Using this form, one can easily translate to plain JavaScript, and your browser can happily run for you with ease.
    • Backend developer feel more comfortable
    • JavaScript implements the most advanced concepts, so it becomes difficult to use. Whereas TS apply OOP knowledge and write a script, so the backend developer feels it comfortable to use it. In short, we can say that TypeScript can clean up all your leftover dirt created behind the scenes.
    • Used in a popular framework
    • TypeScript has become the most popular over a few years. It was when Angular 2 officially switched to TypeScript it turned out to be trendy and was like a win-win situation for TS.

    Why is TypeScript Bad?

    • Learning Curve

      Although TS has become popular, not many JavaScript developers know about it. It affects the overall learning curve and makes it hard for the team to plan ahead.

    • Needs Development Tooling

      Users do not need any plugin to run TS, but developers will need special tooling for editing to transpile TS. Highly recommended to use Visual Studio if you're on Windows, Mac, or Linux.

    • Cannot edit easily by CMS

      Most of the CMS allows you to edit .css file style and .js file on the admin portal. But with TS, it isn't easy to write it on the admin portal as some due allow to edit, and few don't. With this, the complication increases, and the user cannot likely to work anymore with it.

    • Short update cycle

      If you aren't cleared with the first update, how come the new update is knocking your door for updation. Secondly, how one can integrate update in your projects, should you ignore it or wait to add for in next project. In the end, TS needs to have a planned strategy.

    FAQ

    1. Is TypeScript worth Learning for Web Development?

      It's time to learn TypeScript as the study shows that the superset language has skyrocketed the popularity in a few years and has wholly adopted Angular JS and much another dev workflow. TypeScript is worth learning, and even if you pick 5% of the language, you'll get to learn amazing concepts by making yourself attractive for employment.

    2. What is the TypeScript role in Development?

      There is a handful of the reason that shows why we might choose TypeScript. Consider the immediate benefits below:

      • It comes with Simple class-based OOP with inheritance
      • Can get access to the modifier for all classes
      • Incredible error detection which ties into static typing
      • Several types of setting for variables, parameters and return values
      • Code hints for autocomplete and return type of a function
      • 'This' keyword can set to operate within current class or method
      • Defined separation comes between 'let' and 'var.'
      • If you know JavaScript, then TS is something that operates on JavaScript, which precisely means you have already got whipped cream with extra topping on the top.
    3. What is the best way to migrate from JavaScript to TypeScript?

      The only way to migrate that developer has come up is by migrating the code from JavaScript to TypeScript. It means you can manage code better with reducing bugs and enabling faster deployment. There are several ways we can migrate, such as set code improvement goals, Get the whole development team on board, Migrate your Js files gradually to ts/tsx, create a temporary compiler for both js/jsx , and adding webpack configuration.

    4. Tell us the minimum requirements for installing TypeScript.

      There is a handful of the reason that shows why we might choose TypeScript. Consider the immediate benefits below:

      • npm install -g typescript
      • Follow below steps for installing TyreScript
      • Download and run .msi installer for node
      • Enter the command 'node - v' to check the installation process
      • Type command to install TypeScript: npm install -g typescript
    5. How to compare multiple TypeScript files into a single file?

      We use the below command to compile multiple typescripts such as tsc --outFile outputfile.ts file1.ts file2.ts file3.ts ....filen.ts

    6. Explain decorator in TypeScript?
      • Decorators are a function that is modifying classes of its members. It allows both annotations and a meta-programming syntax for declaring class, and it's a member.
      • Enable Decorator in TypeScript using this command line
      • tsc --target ES5 --experimentalDecorators
    7. What is the default visibility for methods/properties in TypeScript?

      The public is the default visibility to set in TypeScript

    8. What are Mixins?

      Mixins are another way to build up classes from reusable components and build it by combining simpler partial classes.

    Mr. Vimal Shah

    Vimal Shah is the Co-Founder of known mobile app development company with 15+ years of hands-on experience into technology and expertise in marketing solutions. He has assisted for various successful projects world wide and always keep his eye on latest trends into designing and development.