Installing and Using TypeScript

Introduction

In this lesson we will be installing TypeScript and using TypeScript.

Installing TypeScript

We will install TypeScript globally so that it’s always available on your system.

Run the command npm install -g typescript to install TypeScript globally.

Once TypeScript is installed, you can type tsc --version to get your TypeScript version number. This course is written using TypeScript Version 5.0.2, however you will be fine using the latest version of TypeScript.

You can also type tsc to get a list of TypeScript commands available to you. Typing tsc --help --all will give you a more detailed list of commands.

Using TypeScript

TypeScript compiles down to normal JavaScript.

To convert a file from TypeScript to JavaScript, we use the tsc command followed with the filename.

We are going to take a look at how this works.

Create a folder with any name that you would like, such as typescript-demo, then open VSCode in this folder as well a terminal so we can run some commands.

Initializing TypeScript

To start we will first need to initialize a TypeScript configuration in our project otherwise we will get a "Duplicate function implementation" warning when we compile our TypeScript.

Run the command tsc --init in the terminal, which will then generate a tsconfig.json file in the project folder.

We will look at some of the options generated in this file at a later stage, however if you’d like to see what they do you can view them at the following link: https://www.typescriptlang.org/docs/handbook/compiler-options.html

We can now continue.

Creating a script file.

Create a file with a ts extension, such as script.ts. Now add the following code.

	function addNumbers(a: number, b: number): number {
	  return a + b;
	}
	
	console.log(addNumbers(10, 20));

NOTE: We have added number types to the code above. Do not be concerned with the syntax at this stage. We will be covering that in detail at a later stage.

Above: Our script.ts file.

Compiling the TypeScript file

We use the tsc command followed with the filename to compile a TypeScript file.

We will now run tsc script.ts which will compile our script.ts file into JavaScript. If there are no errors, we will have a script.js that is output.

Above: Our script.js file that was compiled from our script.ts file.

Note how our code is exactly the same with the exception of the Number types missing. This shows that TypeScript compiles down to normal JavaScript.

Lesson task

Goal

To be able to compile a TypeScript to JavaScript.

Brief

Follow the Level 1 Process as instructed.

NOTE: Lesson tasks do not get submitted on Moodle and are not assessed by tutors. They are mainly there for you to practise what you have learned in the lesson.

Level 1 process

1. Create a new folder and initialize TypeScript in this folder.
2. Create TypeScript file with the name of your choice.
3. Create a function called greetPerson that takes in a persons name and returns a string greeting the person.
4. Compile this TypeScript file into JavaScript and look at the output of the JavaScript file.

Additional resources

TypeScript docs: Compiler options

TypeScript Docs: TypeScript Tooling in 5 Minutes

TypeScript docs: tsconfig.js