This is an introduction to TypeScript programming language.
TypeScript files have
You must have some basic knowledge of the following topics.
Lets go ahead and install TypeScript and start writing some code.
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
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
Now we have to install TypeScript globally by running the following command in the terminal.
$ npm install -g typescript
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
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
Now, inside the project folder type the command
npm init to create package.json file inside the project folder.
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
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
index.html file and write the following code.
So, in the above code we are including the
app.js file which was generated after compiling
Now, if we open this
index.html file we will get the message
Hello World in the browser console.