Before, we dive deep into the core technical concept of conversion. Let us learn how to set-up configuration files and run your first code in the local system.
Step 1 – Set up the Configuration File
While setting up the configuration files, learn the following pre-requisites that must be taken care:
This is one of the prerequisites to setup the configuration file. If you haven’t yet installed the node in your machine. Not a problem, click https://nodejs.org/en/ and select for Windows/Mac and Linux to install the respective node engine as shown in the below screen shot.
Once the node is installed, go to the terminal and type the following command to see the current version of the installed node:
NPM stands for Node Package Manager. As soon as we install node, npm also gets installed. TypeScript and Angular depend upon features and functionalities provided by a variety of third-party packages. These packages are maintained and installed with the npm.
To check whether the npm version is available with node or not, type the below command:
The output will show you the current version of npm got installed.
2. Install Typescript
Install the TypeScript by typing the below command in the terminal:
npm install -g typescript
Note: In case of Mac, use sudo to install npm command in the administrator mode.
The above screenshot suggests getting started with the required tools. For example, Text Editor tools to write the best code as per the industry standard.
The command install –g typescript in the terminal will let you install the TypeScript packages in the system root directory.
Step 2 – Choose and Install the best Text Editor
In this step, let us see how to run your code in the local system. For that you have to first select and install the best text editor tool to write the TypeScript code.
There are many good editors available which supports TypeScript code to run and compile easily.
But before installing text editor on your machine, install Sublime text editor to write code in sublime (https://www.sublimetext.com/). There is also an alternative way to use sublime editor by installing plugin to help you import to make the editor feasible for writing TypeScript codes (https://github.com/Microsoft/TypeScript-Sublime-Plugin).
Here are some of the most commonly used text editors for TypeScript code:
- Visual Studio 2015 (https://www.microsoft.com/en-us/download/details.aspx?id=48593)
- Atom TypeScript (https://atom.io/packages/atom-typescript)
Note: The most recommended text editor is Visual Studio Code (Click here to download for Windows OS (https://code.visualstudio.com/).
Double-click on VSCodeSetup.exe to launch the setup process. This will only take a minute. Once the Visual Studio code is installed successfully, a success message will be displayed as shown in the below screen shot.
Step 4 – Create a File Folder
Once the Visual Studio code is installed successfully, create a file folder by using the following command in the terminal.
/*root is my folder name you can use any name of your choice*/
Step 5 – Create a Project File Folder
Create your project file folder inside the root folder by typing in the terminal.
Step 6 – Import Folder to Visual Studio Code
Import the created folder in the root directory to Visual Studio Code. To import, click on open to find the folder directory and then import it to code editor.
Step 7 – Create a File test.ts.
Create a TypeScript file test.ts in the sample code folder. Make sure the file extension is .ts. The below screenshot will give you a clear idea of where to create the file.
Step 8 – Write TypeScript Code in test.ts file.
Once the TypeScript file is created, write one sample code inside test.ts file as shown in the below screenshot:
Note: The TypeScript code .ts file be converted to .js file code and then it compiles and runs.”
Step 9 – Transpile the Code – Using tsc command
Let us understand how it converts .ts code to .js code. Type the below command in the terminal to transpile the TypeScript code to Java Script code:
test .ts is the user-defined file name.
tsc is nothing but Typescript compiler
Note: Once we type tsc test.ts, we can scroll down to our folder directory and can find an additional file been created as test.js automatically by the tsc compiler. The below screenshot will give you a clear picture of how the tsc compiler automatically creates .js file.
The test.js file will be available inside the created folder in the root directory. This file is auto-compiled code generated by the tsc compiler and will be rendered in the browser console to run.
Step 10 – Create an Object
Let us create an object of our class in our code. TypeScript is an object oriented programming language. To make the syntax simple we use TypeScript language for preparing component. If you are familiar with Oops concept we do have a class and every class we have an instant which is an object. object will access all the properties of class, the data members and member function of the class.
Below code we have created a simple class test and to create a object we have to use new keyword as well.
Error comes straight away since we haven’t passed any parameter to our object : [ts] Supplied parameters do not match signature of call target.
Constructor test(argument: any): test
Now, let us initialize the object so the constructor can be invoked as shown in the below screenshot.
Only test.ts file is updated but test.js file is not updated. Type the command tsc test.ts in the terminal again.
Now test.js file got updated as well.
Step 10 – Run Console
This is the final phase, you should copy the test.js file into browser and run in a console. You can see the alert box as well after running in the console.
The process of manually compiling the code is tedious to any developer. Therefore, Microsoft has changed TypeScript Manual Compilation to Auto Compilation.
Now, let us understand how to make changes to .ts file so that the same will updated in the .js file automatically without undergoing manual compilation process.
- Type the below in the terminal
Where, tsc is a TypeScript compiler and -w means watch all the TypeScript file present inside the sample code project folder. Thus if we do any changes in .ts file then it will do the auto compilation.
Like in every story there is a twist here as well. Yes, we cannot write the command tsc -w directly without creating tsconfig.json in our samplecode folder.
When we write the command directly in the terminal, the error will be generated as shown in the below screenshot:
Therefore, we need to create a file “tsconfig.json” manually in the samplecode project folder.
So, What is tsconfig.json?
Tsconfig.json file in a directory indicates that the directory is the root for the TypeScript project as it specifies the root files and the compiler options required to compile the project. It also specifies the TypeScript project settings such as compiler options and the files that to be included. There are two methods of creating tsconfig.json file,
- Creating and adding the file manually
- Automatically creating the file using tsc –init command
Creating tsconfig.json file manually
To create the file manually, perform the following steps:
- Open the folder where you wish to store source.
- Add a new file “tsconfig.json”.
The file IntelliSense will help you along the way.
So, we added tsconfig.json file into our samplecode project folder structure.
- Automatically creating tsconfig.json using tsc –init command
To generate tsconfig.json file automatically we need to type the below command in the terminal:
tsc – init
The above screenshot shows that the tsconfig.json file is successfully created. It contains some options for the compiler process. Make sure that, the created file tsconfig.json must be in the root directory.
Since tsconfig.json is added in the root folder now you can type the following command directly in the terminal:
Now, we can see –w is in watch mode. Any changes in the .ts file then the same will be updated in the .js file automatically without running tsc –w command.
The above example clearly shows you that, changes are automatically updated to js file without manually running our command. The argument got changed from “sachin” to “param”. So, tsc – w command helps us to watch our ts file and automatically updates the same in the .js file.