Click here to Skip to main content
14,087,162 members
Click here to Skip to main content
Add your own
alternative version

Stats

4.2K views
3 bookmarked
Posted 21 Jun 2018
Licenced CPOL

Building Your First Hello TypeScript Application -- TypeScript Tutorial for Beginners

, 21 Jun 2018
Rate this:
Please Sign up or sign in to vote.
In this post, you will learn how to write code in TypeScript

If you have read the previous chapter of the TypeScript Tutorial series, you have already learned how to install Node.js and TypeScript and might have already installed those. Now, it's time to go a step further to learn how to write code in TpeScript.

In this article, we will learn how to create a simple HelloWorld application, compile it and run it. Continue reading to know more.

Getting started with TypeScript -- Building your first HelloWorld application

Getting Started

You can use Notepad or any other text editor to write TypeScript code. Here, in this series of TypeScript Tutorial, we will be using Visual Studio Code editor to demonstrate each one of the code snippets. You can download Visual Studio code directly from Microsoft site. Here is the link: https://code.visualstudio.com/Download.

Once downloaded, double-click on the installer file and follow the step-by-step instructions to install the Visual Studio Code in your system. Make sure that you have successfully installed the Node.js and TypeScript in your development environment.

How To Do It...

Open the Visual Studio Code editor and follow the simple mentioned steps in order to create your first TypeScript application which will print a message in the console output:

  • Inside the Visual Studio Code, click on the New icon as shown in the below screenshot:

    Creating a new file inside Visual Studio Code

  • Give the file a name, with an extension .ts. Let's name it as HelloWorld.ts. Visual Studio Code will automatically recognize it as TypeScript file, based on the file extension provided.

    Name the TypeScript file with an extension as .ts

  • Now, inside the code editor, enter the following lines of code, which will look similar to the following screenshot:

    Write the TypeScript code inside Visual Studio Code

    // define the class with constructor
    class Author {
        constructor (public Name: string) { }
    }
    
    // create the instance of the class
    let author = new Author("Kunal Chowdhury");
    
    // print the information in the console
    console.log("\nHello Readers,");
    console.log("Thanks for visiting my blog");
    console.log(`\t~ ${author.Name}`);
  • Now open a console window (cmd.exe) and navigate to the path where you have created the HelloWorld.ts file.
  • Inside the console window, enter the following command to compile the TypeScript file (HelloWorld.ts) and generate the compiler output. tsc stands for the compiler name, followed by the TypeScript file without extension. This will generate the HelloWorld.js file within the same directory. tsc HelloWorld
  • Now enter the following command in the console window to run the TypeScript code that we have written. Basically, it executes the JavaScript using Node.js and writes the output on the screen (using the console.log(...) method). node HelloWorld

    Compile the TypeScript code to produce JavaScript output and run it

How It Works

When you compile a TypeScript file (.ts) using the tsc compiler, it generates a JavaScript file (.js). The node command can be used from console window to execute the JavaScript, as we have seen in the above demonstration. The console.log(...) method is used here to write some strings in the output window. We will discuss all about this in the later parts of the TypeScript Tutorial.

👉 TypeScript Tutorial - Getting started with TypeScript

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kunal Chowdhury «IN»
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows app development. He posts his findings, articles, tutorials in his technical blog (www.kunal-chowdhury.com) and CodeProject.


Books authored:


Connect with Kunal on:





You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190518.1 | Last Updated 22 Jun 2018
Article Copyright 2018 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid