TypeScript - Introduction - TypeScript - dyclassroom

This is an introduction to TypeScript programming language.

What is TypeScript?

TypeScript is an open source programming language developed by Microsoft and it is a superset of JavaScript.

TypeScript is strongly typed, object oriented and compiled language. And TypeScript code gets compiled into JavaScript.

Extension of TypeScript files

TypeScript files have .ts extension.

Example: main.ts

Prerequisite

You must have some basic knowledge of the following topics.

Lets go ahead and install TypeScript and start writing some code.

Step #1: Install Node.js and npm

To set up our development environment we have to first install Node.js and NPM which is a package manager for Node.

Click here to read the tutorial on How to install NodeJS on Mac.

Once installed you can check the version of node and npm by running the following command in the terminal node -v and npm -v.

At the time of writing this tutorial I was using the following versions.

YUSUF-MBP:~ yusufshakeel$ node -v
v7.7.2
YUSUF-MBP:~ yusufshakeel$ npm -v
5.8.0

Step #2: Install TypeScript

Now we have to install TypeScript globally by running the following command in the terminal.

$ npm install -g typescript

Use sudo if required.

To check the version type tsc -v in the terminal.

At the time of writing this tutorial I was using the following version.

YUSUF-MBP:~ yusufshakeel$ tsc -v
Version 2.7.2

Step #3: Create a project

Open your favourite text editor or IDE and create a new project folder and name it typescript-project.

Note! You can name your project whatever you want. To keep things consistent I am going with the above name.

Now inside the project folder create an index.html and app.ts file.

$ touch index.html
$ touch app.ts

$ ls -la
total 16
drwxr-xr-x  4 yusufshakeel  staff  136 Mar 10 12:40 .
drwxr-xr-x  4 yusufshakeel  staff  136 Mar 10 12:39 ..
-rw-r--r--@ 1 yusufshakeel  staff   28 Mar 10 12:40 app.ts
-rw-r--r--@ 1 yusufshakeel  staff  352 Mar 10 12:40 index.html

Step #4: npm init

Now, inside the project folder type the command npm init to create package.json file inside the project folder.

Step #5: Run tsc --init

Now, in terminal type the following command inside the project folder.

$ tsc --init

This will create a tsconfig.json file inside the project folder. And now if we run the tsc command inside the project folder it will compile all the typescript file into javascript file.

Step #6: Open app.ts file

Open app.ts file and write the following code.

let message = 'Hello World';
console.log(message);

Save the file and compile the file using the following command.

$ tsc app.ts

This will compile the TypeScript file and will generate app.js JavaScript file.

Step #7: Open index.html file

Now open index.html file and write the following code.

<!DOCTYPE html>
<html>
<head>
  <title>TypeScript</title>
</head>
<body>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

So, in the above code we are including the app.js file which was generated after compiling app.ts file.

Now, if we open this index.html file we will get the message Hello World in the browser console.