In previous TypeScript chapters, we learned what is typescript? and how to setup typescript development environment. Now, we will learn how to create a simple typescript hello world program, how to compile and execute it with example.
To create a typescript program, here we are going to use a visual studio code editor. You can use the text editor of your choice by setting up the typescript as explained in Typescript installation.
First, create a new folder HelloWorld and open this folder into the visual studio code editor and create a new file called helloworld.ts like as shown below.
Now, open helloworld.ts file and write the code like as shown below.
let msg: string ='Hello World';
console.log(msg);
To compile your TypeScript code, you need to install a TypeScript compiler (tsc) either globally or in your workspace to transpile TypeScript code to JavaScript. Basically, the Visual Studio Code editor will provide the TypeScript language support but does not include the TypeScript compiler.
The easiest way to install TypeScript is through node.js npm. To install TypeScript using node.js npm check Typescript Installation article.
After installing the TypeScript compiler (tsc), you can integrated terminal (Ctrl+`) in Visual Studio Code editor, type tsc helloworld.ts command and click Enter to compile the typescript code. The TypeScript compiler will compile and generate a plain JavaScript file (helloworld.js) in the same location of helloword.ts like as shown below.
You can also compile the TypeScript code from a command prompt by navigating to the path where you saved your helloworld.ts file and type tsc helloworld.ts command.
The generated helloworld.js file will contain the code like as shown below.
var msg = 'Hello World';
console.log(msg);
As discussed, the TypeScript compiler has compiled the typescript code and generated the plain JavaScript file. Now, you can include helloworld.js file in your html files to run it in browsers.
If node.js installed on your machine, you can also execute the helloworld.js file in your terminal by typing node helloworld.js command like as shown below.
This is how we can create, compile and execute typescript programs in visual studio code editor based on our requirements.
As discussed in the Typescript introduction, the typescript will highlight the errors in code during the compilation time itself.
For example, open your code editor, create suboperation.ts file and write the following code to perform subtraction of two numbers.
function subtractNumbers(x: number, y : number){
return x + y;
}
let result = subtractNumbers("Tutlane", 5);
console.log("Result: " + result);
If you observe the above code, we created subtractNumbers function with two number type parameters but we are calling subtractNumbers function by passing one parameter as string type.
If we try to compile the above typescript code in a terminal with tsc suboperation.ts command, we will get the compile-time error “Argument of type '"Tutlane"' is not assignable to parameter of type 'number'.” like as shown below.
This is how the typescript will highlight the errors during the compile-time itself.