{"id":985,"date":"2020-10-26T17:00:00","date_gmt":"2020-10-26T16:00:00","guid":{"rendered":"http:\/\/cmagazine.test\/why-should-you-care-to-learn-typescript\/"},"modified":"2022-01-05T20:06:14","modified_gmt":"2022-01-05T19:06:14","slug":"learning-typescript","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/learning-typescript\/","title":{"rendered":"Why Should You Care to Learn TypeScript?"},"content":{"rendered":"\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. You are already know TypeScript (almost)<\/a>
  2. It is very easy to get started with TypeScript<\/a>
  3. Compilation has its adavantages<\/a>
  4. Data binding is safer in TypeScript<\/a>
  5. TypeScript allows OOP like a pro<\/a>
  6. Reuse code with type-safe generics<\/a>
  7. TypeScript has decorators that don\u2019t decorate<\/a>
  8. Conclusions<\/a>
  9. Want to launch a developer event despite the challenges of COVID-19?<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    One of the most intriguing innovations of web technologies is the TypeScript<\/span><\/strong> programming language<\/span>. Although very powerful and easily integrated into the existing JavaScript<\/span> ecosystem, it is not as widely adopted yet.<\/p>\n\n\n\n

    Nevertheless, it has the potential to change dramatically the way we design web applications<\/span>. It is no surprise that this is one of the hottest topic at the Spanish edition of Codemotion<\/span> Online Tech Conference<\/strong>, which will be held on November 3-4-5. If you’ll attend (tickets are free), you should not miss the Manuel Carrasco Mo\u00f1ino’s talk about The perfect cocktail: Java<\/span> + Typescript<\/span><\/em> (check the agenda here<\/a>).<\/p>\n\n\n\n

    If you have been away from web development<\/span> in the last years, coming back to it could be quite a shocking experience<\/span>. Basically everything you knew has changed. Things are evolving so fast that it feels like it keeps on changing literally as you type code.<\/p>\n\n\n\n

    Even good old JavaScript is almost unrecognizable under all that heavy framework<\/a> make-up, and now it runs server-side too! The good news is that even if you have to learn new stuff, the change is for good and can help you writing less and better.<\/p>\n\n\n\n

    Learn TypeScript<\/span> and you will unleash the power of strongly typed languages into the JavaScript<\/span> ecosystem. But more important, you will have an expressive language to model complex applications<\/span>.<\/p>\n\n\n\n

    You are already know TypeScript (almost)<\/h2>\n\n\n\n

    TypeScript<\/span> is a super<\/span>-set of the JavaScript<\/span> programming language<\/span>, so it is not very different from what you are used to if you are familiar with web development<\/span>.<\/p>\n\n\n\n

    Though it has several distinctive features, TypeScript<\/span> is designed to integrate seamlessly with the JavaScript<\/span> ecosystem. This means that it is completely transparent for the target environment, giving you the freedom to use TypeScript<\/span> everywhere you can run JavaScript<\/span>.<\/p>\n\n\n\n

    \"web<\/figure><\/div>\n\n\n\n

    It is very easy to get started with TypeScript<\/h2>\n\n\n\n

    Getting started with TypeScript<\/span> is quite simple, especially if you are used to Node.js. The following command<\/span> will install the TypeScript<\/span> tools<\/span> on your computer<\/span>:<\/p>\n\n\n

    npm install -g typescript<\/code><\/span><\/pre>\n\n\n
    Now you can start experimenting with your IDE<\/span> of choice. Many tools<\/span> already provide an extended support to TypeScript<\/span> features. As an example, Visual Studio<\/span> Code has built-in syntax<\/span>-highlight, code completion<\/span> and debugging<\/span> utilities<\/span> that will make TypeScript<\/span> programming a smooth experience<\/span>.<\/p>\n\n\n\n
    Compilation has its adavantages<\/h2>\n\n\n\n
    One of the major breakthrough of TypeScript<\/span> over JavaScript<\/span> is the fact that TypeScript<\/span> is a compiled language<\/strong>.<\/p>\n\n\n\n
    Technically speaking, compiling TypeScript<\/span> will not produce machine code. It is indeed a translation to plain JavaScript<\/span>, therefore the verb transpile<\/span><\/i> is often used to refer to this step.<\/p>\n\n\n\n
    As for other languages, the use of a compiler is an enabling factor for the implementation<\/span> of static syntax<\/span> checking<\/b>. For the compilation process<\/span> to be successful, every part of your program<\/span> must comply with TypeScript<\/span> syntax<\/span> rules, while when you interpret JavaScript<\/span> code, the checks are done only at run<\/span>-time. This means that only the parts of your code<\/span> that are effectively executed<\/span> will be analyzed by the interpreter and therefore, any modification to your JavaScript<\/span> program<\/span> has the potential to introduce regressions, silently breaking even untouched lines of your code<\/span>.<\/p>\n\n\n\n
    TypeScript<\/span> code is compiled to plain JavaScript<\/span> with the tsc<\/b> command<\/span> line tool<\/span>:<\/p>\n\n\n
    tsc<\/span> hello<\/span>.ts<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    As result of the compilation step, the output file hello.js <\/i>will be created, ready to be interpreted by the browser or, if you have the Node run-time installed on your computer<\/span>, with the following command<\/span>:<\/p>\n\n\n
    node<\/span> hello<\/span>.js<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Data binding is safer in TypeScript<\/h2>\n\n\n\n
    Types, as the name itself implies, are the core feature of TypeScript<\/span>. Since JavaScript<\/span> is a loosely typed language, data<\/span> binding<\/b> is a challenging task when developing complex applications<\/span>.<\/p>\n\n\n\n
    The use of types in object definition allows to check at compile time<\/span> if the data<\/span> structure<\/span> you are using fit in the code<\/span> that is handling it. As an example, a number can be used in arithmetical operations, while a string is not suitable. The following code snippet show the use of types in variable definition, function arguments and return values:<\/p>\n\n\n\n