This is an introduction to TypeScript programming language.
TypeScript files have .ts extension.
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 npm -v.
At the time of writing this tutorial I was using the following versions.
YUSUF-MBP:~ yusufshakeel$ node -v
YUSUF-MBP:~ yusufshakeel$ npm -v
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
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
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
Open app.ts file and write the following code.
let message = 'Hello World';
Save the file and compile the file using the following command.
$ tsc app.ts
Now open 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 app.ts file.
Now, if we open this index.html file we will get the message Hello World in the browser console.
Have fun learning :-)
Copyright © 2014 - 2022 DYclassroom. All rights reserved.