Latest Tech News, Product Reviews, articles and more - Kunal-Chowdhury.com

Visual Studio 2017 version 15.7 Update 4 (15.7.4) is now available

2018-06-19T21:18:00.000+05:30

Microsoft Visual Studio 2017 version 15.7.4 (latest version: 15.7 Update 4) is a new servicing update for Visual Studio 2017 installation. If you are running Visual Studio 2017, update to the latest version 15.7.4 to resolve a bunch of issues that has been fixed by Microsoft.

To get the updates, either check for update notification within the IDE or launch the Visual Studio Installer. Check out this blog post to know what has been fixed in this update build.

Download latest version of Visual Studio 2017

Visual Studio 2017 is the latest version of Visual Studio IDE, and comes in three different editions. The different editions of Visual Studio 2017 are: Visual Studio Community 2017, Visual Studio Professional 2017 and Visual Studio Enterprise 2017.

If you are indie developer and/or building open-source projects, you can download Microsoft Visual Studio Community 2017 for free. It gives you total power of the Professional Edition.

👉 Click here to download latest version of Visual Studio 2017

You may like to read:

Top issues fixed in Visual Studio 2017 v15.7.4

Source: Visual Studio 2017 Release Notes

Windows Template Studio 2.2 released with 3D Launcher feature, Wizard enhancements and more

2018-06-15T20:44:00.000+05:30

Microsoft has released a new update to Windows Template Studio. The latest version of Windows Template Studio 2.2 includes 3D Launcher feature, Wizard enhancements, improved documentations and many bug fixes.

To know more about the new changes and improvements part of this release, and to learn how to install this update, continue reading the post.

How to download/update Windows Template Studio 2.2?

If you are installing Windows Template Studio for the first time, navigate to https://aka.ms/wtsinstall, click the Download button. Once downloaded, double click the VSIX installer to start the installation process.

In case you have an older version of Windows Template Studio already installed on your development environment, Visual Studio will auto update the extension. To force the update process, go to Tools | Extensions and Updates | Update | Windows Template Studio. Then click the Update button to continue.

What's new and improved in Template Studio 2.2?

The latest version of Windows Template Studio 2.2 includes 3D Launcher feature, Wizard enhancements, improved documentations and improved testing support. Apart from that, the latest build also includes the following changes and fixes:

Update Nuget Reference: Microsoft.NETCore.UniversalWindowsPlatform
Update Nuget Reference: Telerik.UI.for.UniversalWindowsPlatform
Update Nuget Reference: Microsoft.Toolkit.Uwp.UI.Controls
Update Nuget Reference: Microsoft.Toolkit.Uwp.Notifications
Update Nuget Reference: Microsoft.Toolkit.Uwp
Update Nuget Reference: Newtonsoft.Json
Link Moved
Help/About details are incorrect
Dependency template do not receive projectname as parameter
Created project is always rebuild in Visual Studio, making testing slow
Add background load flag to RelayCommand
Update App Center feature to include latest SDK version and crash reporting support
WTS is extracting templates after VS Update
App crash on Prism Framework
UWP Unit Tests are not discoverable using MVVM Light
New project from wizard v2.1.18124.1 omits several folders/items from project
When trying to delete and item that is a dependency, tell all dependant items
Suspend/resume with Caliburn Micro: resume handler not invoked
Image gallery and left/right arrows and esc key
Scroll on touch devices not working on pages and features section
Add checks for links in docs and comments that are out of date
Update references to 'UWP Community Toolkit'
Bug: fails to install with "do not have supported versions"
Review extraction of files to localize
First default mainpage (in wizard) is not removable
Support adding a 3D app launcher for when the app is used in MR
Deleting code in MergePostactions deletes all occurrences of code
Remove unnecessary calls to `await Task.CompletedTask;`
Undo "ignore obsolete warnings" on stylecop and sonarlint tests when NavigationView is in place
Add documentation with platform specific recommendations
Docs: Activation for nav pane and directly going to a page
Overview tab does not open automatically on project creation

Apart from these, Microsoft also hinted that, they are working on new features that they are going to include in future builds. These includes Menubar navigation pattern template, WinUI Library nuget package integration, Continued refinement with Fluent Design in the templates, Work for supporting multiple projects in a single solution, Ink templates, User Activity APIs for Timeline support and Improved Right-click -> add support for existing projects.

Visual Studio 2019 has been announced by Microsoft

2018-06-07T00:21:00.000+05:30

Microsoft today announced that the next version of Visual Studio will be named as Visual Studio 2019 and the preview version of Visual Studio 2019 can be installed side-by-side with Visual Studio 2017. Though the release dates of Visual Studio 2019 is not yet announced, but the preview version of the IDE can be expected in the coming months.

The next version of Visual Studio, i.e. Visual Studio 2019 will be committed towards faster execution, more productive for developers to perform their tasks; be it be refactorings, debugings and/or faster build process. It will also give more focus on real time collaborations between team members using the capabilities like Live Share.

Best part is that the Visual Studio 2019 Preview can be installed side-by-side with Visual Studio 2017 and will not require any major upgrade of the Operating System. You can download the latest version of Visual Studio 2017, if you haven't done already.

Original announcement published by John Montgomery, Director of Program Management for Visual Studio, can be found here.

How to define an Interface in TypeScript? -- TypeScript Tutorial for beginners

2018-06-05T01:00:00.000+05:30

An interface in TypeScript contains only the declaration of the methods and properties, but not the implementation. It is the responsibility of the class that implements the interface by providing implementation for all the members of the interface.

Today, in this TypeScript Tutorial, we will learn how to work with Interfaces in TypeScript. Continue reading to learn more.

👉 TypeScript Tutorial - Getting started with TypeScript

Class implementing interfaces

Just like C# and Java, you can create contract for classes by implementing Interface. Interface defines public properties and methods of a class. It does not have any private members and must not have any implementations of its members.

In TypeScript, you can define an interface by using the keyword interface as below. By default, all the members in an interface are public.

interface Person {
 fullName: string;
 
 toString();
}

Once the interface is defined, you can implement it in a class by following this convention: class [ClassName] implements [InterfaceName]. Let's create two classes named Employee and Customer implementing the Person interface:

class Employee implements Person {
 empID: string;
 fullName: string;
 
 constructor (eID: string, name: string) {
  this.empID = eID;
  this.fullName = name;
 }
 
 toString() {
  console.log(`EMP ID of ${fullName}: ${empID}`);
 }
}

class Customer implements Person {
 custID: string;
 fullName: string;
 
 constructor (cID: string, name: string) {
  this.custID = cID;
  this.fullName = name;
 }
 
 toString() {
  console.log(`Customer ID of ${fullName}: ${custID}`);
 }
}

Let's create the instance of the classes. As both the Employee and the Customer object is of type Person, let us create it this way:

let employee: Person = new Employee("E001", "Kunal");
let customer: Person = new Customer("C001", "");

Let's call the toString() method of both the instances and observe how it prints the person detail in the screen:

employee.toString(); // prints employee details
customer.toString(); // prints customer details

Interface extending another interfaces

In TypeScript, you can also extend an interface from another interface. This allows you to copy the members of one interface into another. So, more flexibility can be possible by separating your interfaces into reusable components. For example, the TwoWheeler interface extends Vehicle interface as below:

interface Vehicle {
}

interface TwoWheeler implements Vehicle {
}

In TypeScript, an interface can also extend multiple interfaces. For example, let's see the following code where TwoWheeler interface extends Vehicle and Engine interfaces:

interface Vehicle {
}

interface Engine {
}

interface TwoWheeler extends Vehicle, Engine {
}

Interface extending classes

TypeScript allows you to extend an interface from a class type. In this case, the declaration of the members of the class gets inherited to the interface but not their implementations. This is as good as a class inheriting from an interface.

class Vehicle {
    constructor (public brand: string) { }
 
    getBrandName() {
        return brand;
    }
}

class Engine {
    constructor (public manufacturer: string) { }
 
    getManufacturerName() {
        return manufacturer;
    }
}

interface TwoWheeler extends Vehicle, Engine {
    getBrandName();
    getManufacturerName()
}

In simple words, you can create an interface that extends a class and then can be implemented in another class or interface.

Summary

So, today we have learned how to define an interface using the keyword interface, how to implement an interface in a class, how to extend and interface from another interface and how to extend a class in an interface.

If you are from C# or Java background, interface extending a class will be new to you in TypeScript. Hope you liked the tutorial. Don't forget to checkout my other posts from the TypeScript Tutorial series. You can find the link below.

👉 TypeScript Tutorial - Getting started with TypeScript

How to inherit a class in TypeScript? -- TypeScript Tutorial for beginners

2018-05-25T01:00:00.000+05:30

Just like any other OOPs supported languages, TypeScript also allows you to inherit a base class. In the last article, we learned how to create class in TypeScript. We have also learned how to create a constructor and how to instantiate a class object.

In this article of the TypeScript Tutorial for beginners series, we will learn how to inherit a TypeScript class. Continue reading to learn it today.

👉 TypeScript Tutorial - Getting started with TypeScript

Inheritance in TypeScript

In TypeScript, you can inherit a class from another class. Just use the extends keyword to perform inheritance. Consider the following example to understand it better:

class Person {
 // properties
 firstName: string;
 lastName: string;
 
 // construtor
 constructor (fName: string, lName: string) {
  // fill the properties
  this.firstName = fName;
  this.lastName = lName;
 }
 
 // method
 getFullName() {
  return `${firstName} ${lastName}`;
 }
}

class Employee extends Person {
 // properties
 empID: string;
 designation: string;
 
 // construtor
 constructor (fName: string, lName: string,
     eID: string, desig: string) {
  // call the base class constructor
  super(fName, lName);
  
  // fill the other properties
  this.empID = eID;
  this.designation = desig;
 }
 
 // method
 toString() {
  return `${empID} - ${firstName} ${lastName}
    => ${designation}`;
 }
}

Here the Employee class inherits its base Person by writing class Employee extends Person. In the derived class super(...) can be used to call the constructor of the base class. For example, super(fName, lName) in Employee class constructor calls the base class constructor by passing the parameter values fName and lName.

Now, in the following code snippet, we created the instance of the Employee class and passed four parameters to its constructor. In the implementation of the Employee class constructor, we called the base class constructor to pass the first name and last name of the employee. So, when you call the toString() method of the derived class, it will print out both the properties.

let employee: Employee = new Employee("Kunal",
                                      "Chowdhury",
                                      "EMP001022",
                                      "Software Engineer"
                                     );
console.log(employee.toString());

Summary

Let's summarize what we learned today. We learned how to inherit a class from a base class in TypeScript using the extends keyword. Then we discussed how to call a base class constructor by passing the respective values to it. In the next article of this tutorial series, we will discuss about interface. Till then, happy learning!

👉 TypeScript Tutorial - Getting started with TypeScript

How to define a class in TypeScript? -- TypeScript Tutorial for beginners

2018-05-22T01:00:00.000+05:30

Earlier in the TypeScript Tutorial series (Getting started with TypeScript) we learnt about the TypeScript configuration file, variable declaration and basic data types. I hope that was neat and clear to understand the very basics of TypeScript.

Today in this article, we will learn how to define a class and instantiate class object. Continue reading to learn about it today.

👉 TypeScript Tutorial - Getting started with TypeScript

Defining a class in TypeScript

In TypeScript, you can use OOPs concept and create classes. Just like C# and other OOPs oriented programming languages, you can define a class with the keyword class. Let's take the following example into consideration:

class Person {
 // properties
 firstName: string;
 lastName: string;
 
 // default construtor
 constructor () {
 }

 // parameterized construtor
 constructor (fName: string, lName: string) {
  this.firstName = fName;
  this.lastName = lName;
 }
 
 // method
 getFullName() {
  return `${firstName} ${lastName}`;
 }
}

In the above example, the class Person has four members: two properties (firstName, lastName), two class constructors (constructor) and one method (getFullName()). To access the members of the class, you can use this operator. For example, this.firstName, this.getFullName() etc.

By default all the members in a TypeScript class are public. This is as good as marking the members as public using the public access modifier. The above class can be written as below, by explicitly marking the members as public.

class Person {
 // properties
 public firstName: string;
 public lastName: string;
 
 // default construtor
 constructor () {
 }
 
 // construtor
 public constructor (fName: string, lName: string) {
  this.firstName = fName;
  this.lastName = lName;
 }
 
 // method
 public getFullName() {
  return `${firstName} ${lastName}`;
 }
}

Defining constructors in a TypeScript class

A class can have two types of constructors: default constructor and parameterized constructor. In the above example, the first constructor is a default constructor, which takes no/zero parameters. The second one is a parameterized constructor, which takes one or more parameter values (in our case, it takes two inputs):

// default construtor
constructor () {
}
 
// construtor
public constructor (fName: string, lName: string) {
 this.firstName = fName;
 this.lastName = lName;
}

In the above example, we have first defined the properties, then passed the values using parameterized constructor and then filled those properties. TypeScript supports automatic property creation. Instead of following all these steps, if you define the constructor parameters as public, TypeScript will do rest of the job for you.

Consider the following example which shows how to define a property using parameterized constructor:

class Person {
 // parameterized construtor
 constructor (public fName: string, public lName: string) {
 }
 
 // method
 getFullName() {
  return `${firstName} ${lastName}`;
 }
}

Instantiating an instance of a TypeScript class

To create the instance of the class and access it's members, you can use new operator, the way you create a class instance in C# and/or Java. Here's two different approaches to create the class instance:

let person: Person = new Person("Kunal", "Chowdhury");
console.log(person.getFullName());

// alternative way
let person = new Person("Kunal", "Chowdhury");
console.log(person.getFullName());

👉 TypeScript Tutorial - Getting started with TypeScript

What are the basic data types in TypeScript? -- TypeScript Tutorial for beginners

2018-05-17T06:00:00.000+05:30

Like JavaScript and any other languages, TypeScript also provides basic data types to handle numbers, strings etc. Some common data types in TypeScript are: number, string, boolean, enum, void, null, undefined, any, never, Array and tuple.

Let's learn more about these basic data types of TypeScript, which you will need to use always. Let's learn with suitable examples.

👉 TypeScript Tutorial - Getting started with TypeScript

Number types

In TypeScript, numbers are floating point values having the type as number. You can assign any numeric values including decimals, hexadecimals, binary and octal literals. But to use binary and octal literals, you must use a TypeScript version which follows ECMAScript 2015 or higher.

Here's some examples of declaring numeric values:

let decimalValue: number = 10;
let hexaDecimalValue: number = 0xf10b;
let binaryValue: number = 0b110100;
let octalValue: number = 0o410;

String types

When you want to use textual data, the string types are used and is denoted by the keyword string. Like JavaScript, TypeScript also uses double quotes (") and single quotes (') to surround the string value.

let firstName: string = "Kunal"; // using double quotes
let lastName: string = 'Chowdhury'; // using single quotes

When you want to span a string to multiple lines and/or have to embedded expressions (${expression}), you can use templated strings. The templated strings are surrounded by backquote/backtick (`) as shown in the below code snippets:

let firstName: string = "Kunal";
let lastName: string = "Chowdhury";

let message: string = `Hi, my name is: ${firstName} ${lastName}`;
let spannedMessage: string = `Hi,
My name is: ${firstName} ${lastName}`;

Boolean types

To use boolean data types in TypeScript, for declaring variables, use the boolean keyword. Here's a simple code to declare a boolean type variable:

let isPrimaryAccount: boolean = true;
let hasCards: boolean = false;

Enum types

Enumerated data types (enum) are a set of numeric values with a more friendly names. It's an addition on top of JavaScript that TypeScript offers. The variables of enumerated data types are declared with the keyword enum. Here's how you can declare an enum variable and use it in TypeScript:

enum CardTypes { Debit, Credit, Virtual }
let card: CardTypes = CardTypes.Debit;

By default the enum values start from 0 (zero), but you can also set it by manually entering the value of its members. Consider the following two examples:

enum CardTypes { Debit = 1, Credit, Virtual }
enum CardTypes { Debit = 1, Credit = 3, Virtual = 5 }

Void types

In general, this type of data types are used in functions that do not return any value. For example, function showMessage(): void { ... }. In TypeScript, you can also declare a variable of type void, but can only assign undefined or null to them. We will discuss about undefined and null types in the next points.

Null types

You can declare a variable of type null using the null keyword and can assign only null value to it. As null is a subtype of all other types, you can assign it to a number or a boolean value.

let nullValue: null = null;
let numericValue: number = null;

👉 TypeScript Tutorial - Getting started with TypeScript

Undefined types

You can use undefined keyword as data type to store value undefined to it. As undefined is a subtype of all other types, just like null, you can assign it to a number or a boolean value.

let undefinedValue: undefined = undefined;
let numericValue: number = undefined;

Any types

While writing code you are unsure of the data type of a value, due to its dynamic content, you can use the keyword any to declare the said variable. This is often useful when you are seeking input from user or a 3rd party library/service. This is also useful when you are declaring an array which has a mixed data type. It's just like the dynamic keyword available in C#. For example,

let dynamicValue: any = "Kunal Chowdhury";
dynamicValue = 100;
dynamicValue = 0b1100101;
dynamicValue = true;

let dynamicList: any[] = [ "Kunal Chowdhury",
                           "Free User",
                           21,
                           true
                         ];

Never types

The never type represents the data type of values that never occur. For example, the following function that always throws an exception, can never return a value. Thus, the return type of the function can be set as never. Here's the function declaration:

function throwError(message: string): never {
    throw new Error(message);
}

Array types

Just like JavaScript, you can work with arrays in TypeScript and can define it in either of the following two ways where the second approach is the more generic way to declare arrays:

let marks: number[] = [80, 85, 75];
let marks: Array<number> = [80, 85, 75];

Tuple types

Tuple is a data type that allows you to create an array where the type of a fixed number of elements are known but need not be same. While accessing an element of a Tuple with a valid known index, the data of correct type will be returned. In case you access an element outside the set of known indices, a union type will be used. Consider the following code snippet as an example:

// correct
let person: [string, number] = ["Kunal", 2018];

// error
let person: [string, number] = [2018, "Kunal"];

// correct
let person: [string, number] = ["Kunal", 2018, "India"];

// correct
let person: [string, number] = ["Kunal", 2018, 21];

// error
let person: [string, number] = ["Kunal", 2018, true];

👉 TypeScript Tutorial - Getting started with TypeScript

How to declare variables in TypeScript? -- TypeScript Tutorial for beginners

2018-05-14T06:00:00.000+05:30

In the previous few chapters of the TypeScript Tutorial series we have learned how to install TypeScript and then begin with creating a simple HelloWorld application. We have also learned about TypeScript configuration file (tsconfig.json).

In this chapter we will learn various ways to declare variables in TypeScript. Continue reading to learn more about it.

👉 TypeScript Tutorial - Getting started with TypeScript

Declaring variables with "var" keyword

Just like JavaScript, you can also define variables in TypeScript using the keyword var. For example, var message = "Hello World!";. Defining variables using the var keyword has some problems and most of the developers face this issue. Let's take few examples to understand it in better way.

You can define a variable inside a block and use it outside the scope, like this:

function GetValue(initialize: boolean) {
    if (initialize) {
        var value = 100;
    }

    return value;
}

GetValue(true);  // returns "100"
GetValue(false); // returns "undefined"

Using the var keyword, you can declare the same variable multiple times within the same code block. For example, the following code will execute without any error:

function GetValue(value, condition) {
    var value = 10;
    ...
    ...
    var value = 25; // no error
    ...
    ...
    if (condition) {
        var value = 100; // no error
        ...
    }
}

Declaring variables with "let" keyword

To overcome the problems that arises with variable declaration using the var keyword, TypeScript introduces variable declaration using let keyword. You can write the let statements the same way that you write the var statements. For example, let message = "Hello World!";.

Unlike var, the let statement uses block-scoping. That means, if you declare a variable with let keyword in a function or a block, the scope of the variable will be limited to the same function or code block and won't be accessible outside of their nearest containing block.

function GetValue(initialize: boolean) {
    if (initialize) {
        var value = 100;
    }

    return value; // error
}

It's also a point to note that, you can't redeclare a variable using let keyword within the same scope, which was a problem with var declaration. The following code will throw error during compile time:

function GetValue(condition) {
    let value = 10;
    ...
    ...
    let value = 25; // ERROR: re-declaration of "value"
    ...
    ...
    if (condition) {
        let value = 100;
        ...
    }
}

Declaring variables with "const" keyword

You can also declare variables using the const keyword. For example, const message = "Hello World!";. The const keyword acts like let but with a difference that their values cannot be changed after they are initialized and hence you cannot re-assign values to them.

👉 TypeScript Tutorial - Getting started with TypeScript

What is tsconfig.json configuration file? -- TypeScript Tutorial for beginners

2018-05-12T06:00:00.000+05:30

The tsconfig.json file allows you to specify the root level files and the compiler options that requires to compile a TypeScript project. The presence of this file in a directory specifies that the said directory is the TypeScript project root.

In this chapter of the TypeScript Tutorial series we will learn about tsconfig.json, it's various properties and how to extend it.

👉 TypeScript Tutorial - Getting started with TypeScript

In the previous chapters of this TypeScript Tutorial series we learned how to install Node.js and TypeScript, followed by building your first HelloWorld application in TypeScript using Visual Studio Code. Today in this article, let's go one step ahead to learn about tsconfig.json file.

The "compilerOptions" property

The "compilerOptions" property allows you to specify additional options to the TypeScript compiler. Here's a list of few optional settings part of the compilerOptions property that you may need most of the time: listFiles, module, outDir, outFile, rootDir, sourceRoot, allowUnreachableCode, allowJs, noImplicitUseStrict, strictNullChecks and more.

Here's a sample JSON file describing how you can define a tsconfig.json file containing different parameters of the compilerOptions property:

{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "allowUnreachableCode": false,
        "strictNullChecks": true,
        "outFile": "../JS/TypeScript/HelloWorld.js",
        "sourceMap": true
    }
}

The "compileOnSave" property

The "compileOnSave" property can be used to direct the IDE to automatically compile the included TypeScript files and generate the output. Here's how you can define the compileOnSave property inside a tsconfig.json file, along with the other properties:

{
   "compileOnSave": true,
   "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "allowUnreachableCode": false,
        "strictNullChecks": true,
        "outFile": "../JS/TypeScript/HelloWorld.js",
        "sourceMap": true
   }
}

The "files", "include" and "exclude" properties

The "files" property allows you to specify a list of TypeScript files that will be included by the compiler. The URL of the files can be relative or absolute.
The "include" property allows you to include a list of TypeScript files using the glob wildcards pattern.
The "exclude" property allows you to exclude a list of TypeScript files using the glob wildcards pattern.
When you don't specify both the files and include properties, the compiler includes all TypeScript files (*.ts, *.d.ts, *.tsx) by default.
When both the files and include properties are specified, the compiler includes the union of the specified files.
When you want to filter out some files included using the include property, you can specify exclude property.
If you specify any files using the files property, the uses of exclude property will not have any impact to those listed files. In short, the files included using the files property will always include regardless the files listed under the exclude property.

Here's the code snippet describing how you can define the files, include and exclude properties inside a tsconfig.json file, along with the other properties:

{
   "compileOnSave": true,
   "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "allowUnreachableCode": false,
        "strictNullChecks": true,
        "outFile": "../JS/TypeScript/HelloWorld.js",
        "sourceMap": true
   },
    "files": [
        "program.ts",
        "sys.ts"
    ],
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "src/**/*.spec.ts"
    ]
}

Extending the "tsconfig.json" file

You can also extend a TypeScript configuration file from a different base configuration. You can do so by using the extends property. It accepts a string value containing a path to another configuration file to inherit from. The configuration from the base file are loaded first, then overridden by those in the inheriting config file. In case there is a circular references, TypeScript compiler will return an error.

// tsconfig-base.json
{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "allowUnreachableCode": false,
        "strictNullChecks": true
    }
}

// tsconfig.json
{
    "extends": "./tsconfig-base",
    "compilerOptions": {
        "outFile": "../JS/TypeScript/HelloWorld.js",
        "sourceMap": true
    }
}

👉 TypeScript Tutorial - Getting started with TypeScript

Building your first Hello TypeScript application -- TypeScript Tutorial for beginners

2018-05-06T06:00:00.000+05:30

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 the 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.

👉 TypeScript Tutorial - Getting started with TypeScript

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 the each one of the code snippet. 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:
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.

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

// 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

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