Typescript Getting Started

learn about Typescript , setup environment for ts and write HelloWorld.ts

getting started with angular

What is Typescript
Typescript is an open source programming language developed by Microsoft . Typescript is a strict superset of JavaScript and it adds more features to the language. Now the very first question we may ask is why learn another language ?
Let's try to answer this question in the following points ::
  1. Typescript adds types to JS , which makes your apps more robust and less prone to error
  2. Typescript performs many checks on the compile time itself , so you've less surprizes at runtime
  3. Typescript can be used with Node.js , Angular , React , Ionic means you learn one language and apply on mobile , web , desktop and servers
  4. Make use of other features of Typescript like Enums , Mixins , Generics , Interfaces etc
All these points accompanied by large companies and a huge community support is a good reason to invest time and energy in learning Typescript.
Our Objective
In this introductory Typescript tutorial , we're going to do the following ::
  1. Setup Typescript environment
  2. Write HelloWorld program in Typescript
  3. Transpile the Typescript to Javascript so it can run in the browser
  4. Insert the Javascript in an HTML page so we can see the results
Note that browsers can not directly execute Typescript because their engines are designed to execute only Javascript [ mostly standard ES5 as of now ] , so we need to convert our TS code to JS before we can execute it in the browser. We'll see how we can do that , let's get started.
Prerequisites
In order to follow this Typescript tutorial , we need the following ::
  • node.js
  • npm
  • ide , you can choose from Sublime Text , Visual Studio Code or Atom
  • Once you have these , you're ready to start developing with Typescript.
    Install Typescript by executing the following command in your terminal window.
    
    
    npm install -g typescript 
    
    Once you've Typescript installed , check its version with the following command
    
    tsc -v 
    
    The output of the above command is the version of Typescript installed on your machine.
    Writing Hello World in Typescript
    OK , time to write our first Typescript program , create a file HelloWorld.ts in your IDE and enter the following single line of code into that.


    
    
    document.write('Hello World in Typescript') ; 
    
    
    If you notice , it's the same as JS but it's perfectly valid because as we mentioned above , all valid JS is valid TS also.
    Now transpile your Typescript file to Javascript using the following command.
     
    
    tsc HelloWorld.ts 
    
                          
    tsc command invokes the Typescript transpiler and processes the file given as parameter and outputs a JS file with the same name in the same directory. So as the output of the above command , you should see a new file HelloWorld.ts created in your directory. Now create an HTML file and refer that JS file in your html.
    
    
    <html>
    <head>
        <script src="HelloWorld.js">
        </script>
    </head>
     
                         
                    
    Now load this file in your browser
    and you should see Hello World TypeScript as the output.
    Summary
    In this introductory Typescript tutorial , we learned the following ::
    1. What and Whys of Typescript
    2. Setting up the Typescript development environment
    3. HelloWorld program with Typescript



    More from RISHABH.IO





    developed & nourished with by rishabh.io