Once you have installed Node.js, the next step is to install TypeScript. TypeScript can be installed using the Node Package Manager (npm). To install TypeScript, open a terminal or command prompt and run the following command:<\/p>\n With this command, TypeScript will be installed system-wide. The package is installed globally for use from any directory when the -g flag is used by npm.<\/p>\n For Mac<\/strong><\/p>\n Install using “Macintosh Installer” and run the downloaded \u201c.pkg\u201d file to install NodeJS.<\/p>\n Visual Studio is a popular integrated development environment (IDE) that supports multiple programming languages, including TypeScript. To install TypeScript using the Visual Studio extension, follow the steps below:<\/p>\n Step 1: Install Visual Studio<\/strong><\/p>\n You can download Visual Studio<\/a> from the official Visual Studio website if you still need to install it on your system. Make sure to download and install the version that supports TypeScript.<\/p>\n Step 2: Install TypeScript Extension<\/strong><\/p>\n Once you have installed Visual Studio, you can install the TypeScript extension from the Visual Studio Marketplace. To do this, follow the steps below:<\/p>\n 1. Open Visual Studio and click on the “Extensions” menu item from the top menu bar. <\/p>\n 5. From the search results, select the TypeScript extension and click on the “Download” button. Step 3: Create a TypeScript project<\/strong><\/p>\n After installing the TypeScript extension, you can create a new TypeScript project. To do this, follow the steps below:<\/p>\n a. Create a new folder called \u2018DataFlair Project\u2019<\/p>\n b. Create a new file called \u2018app.ts\u2019<\/p>\n c. Write the following code.<\/p>\n d. Run the app using the play button on top right corner.<\/p>\n <\/p>\n e. You will get the following output.<\/p>\n We must build a new directory and start it as a Node.js project before creating a new TypeScript project.<\/p>\n To accomplish this, launch a terminal or command prompt and go to the directory where the project will be created. Run the subsequent commands after that:<\/p>\n The first command creates a new directory called DataFlair-project. The second command navigates into the new directory. The third command initializes the directory as a Node.js project and creates a package.json file.<\/p>\n The -y flag tells npm to use the default settings and not ask questions.<\/p>\n We need to configure TypeScript for our project now that a new project has been created and TypeScript has been installed. To accomplish this, a tsconfig.json file must be created in the root of our project directory. The TypeScript configuration options are located in this file.<\/p>\n To create the tsconfig.json file, run the following command:<\/p>\n This command will create a new tsconfig.json file in the root of our project directory. The tsconfig.json file contains many configuration options, but we only need to change a few.<\/p>\n The first option we need to change is the target option. This option specifies the ECMAScript version that TypeScript will compile our code to. We will set this option to ES2018 to target the latest version of ECMAScript.<\/p>\n The second option we need to change is the outDir option. This option specifies the directory where the compiled TypeScript files will be placed. We will set this option to dist to create a new directory called dist in the root of our project directory.<\/p>\n Here is what our tsconfig.json file should look like:<\/p>\n Now that we have set up our TypeScript development environment, we can start writing TypeScript code. To create a new TypeScript file, create a new file with a .ts extension in the root of our project directory. For example, create a new file called index.ts.<\/p>\n In our index.ts file, we can write TypeScript code just like JavaScript code. However, we can take advantage of the additional features that TypeScript provides, such as static typing, interfaces, and classes.<\/p>\n For example, let’s create a simple function that adds two numbers together and returns the result. We will define the types for the function parameters and return values using TypeScript’s static typing:<\/p>\n In this example, we have defined a function called DataFlair_addNumbers that takes two parameters of the type number and returns a value of the type number. We have also used TypeScript’s static typing to ensure that the function is only called with the correct types of parameters.<\/p>\n Once we have written our TypeScript code, we must compile it to JavaScript to be executed in a web browser or a Node.js environment. To compile our TypeScript code, we can use the tsc command.<\/p>\n To compile our TypeScript code, open a terminal or command prompt and navigate to the root of our project directory. Then, run the following command:<\/p>\n This command will compile all the TypeScript files in our project directory and place the compiled JavaScript files in the dist directory, as specified in our tsconfig.json file.<\/p>\n Now that we have compiled our TypeScript code into JavaScript, we can run it in a web browser or a Node.js environment. To run our code in a web browser, we must create an HTML file referencing our compiled JavaScript file.<\/p>\n In the root of our project directory, create a new file called index.html, and add the following code:<\/p>\n This HTML file references our compiled JavaScript file located in the dist directory.<\/p>\n We may use the node command to run our code in a Node.js environment. Open a terminal or command prompt, go to the root of our project directory, and run our index.js file from there. Run the subsequent command after that:<\/p>\n <\/p>\n This command will execute our index.js file in a Node.js environment.<\/p>\n ts-node is a TypeScript execution engine that allows you to run TypeScript code directly without compiling it first. It is a popular tool among TypeScript developers, making it easy to write and test TypeScript code quickly without the extra compilation step.<\/p>\n Here are the steps to install ts-node:<\/p>\n ts-node requires Node.js to be installed on your computer. You can download and install the latest version of Node.js from the official website: https:\/\/nodejs.org\/en\/download\/.<\/p>\n Once you have Node.js installed, you can install ts-node by running the following command in your terminal or command prompt:<\/p>\n This will install ts-node globally on your computer.<\/p>\n To verify that ts-node is installed correctly, you can run the following command in your terminal or command prompt: This should output the version number of ts-node that you have installed.<\/p>\n Once you have ts-node installed, you can use it to run TypeScript code directly from the command line. For example, if you have a file named app.ts that contains some TypeScript code, you can run it using ts-node like this:<\/p>\n![\"nodejs\"](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/nodejs.webp\")
<\/a><\/p>\n\n
2. Install TypeScript<\/h4>\n
\u2018npm install -g typescript\u2019 \r\n<\/pre>\n
![\"install](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/install-typescript.webp\")
<\/a><\/p>\n![\"nodejs](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/nodejs-macos-installation.webp\")
<\/a><\/p>\nInstalling TypeScript using Visual Studio Code<\/h3>\n
\n2. Click on “Manage Extensions.”
\n3. In the “Extensions and Updates” dialog box, click “Online” from the left side menu.
\n4. Search for “TypeScript” in the search box and press enter.<\/p>\n![\"typescript](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-extension-vs-code.webp\")
<\/a><\/p>\n
\n6. Once the download is complete, click on the “Install” button.
\n7. Follow the prompts to complete the installation process.<\/p>\n![\"install](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/install-typescript-extension-vs-code.webp\")
<\/a><\/p>\nconsole.log('Hello, World');\r\n<\/pre>\n![\"output](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/output-of-the-code-in-vs-code.webp\")
<\/a><\/p>\n3. Creating a TypeScript Project<\/h4>\n
\u2018mkdir DataFlair-project\u2019\r\n\u2018cd DataFlair-project\u2019\r\n\u2018npm init -y\u2019\r\n<\/pre>\n
![\"npm](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/npm-init.webp\")
<\/a><\/p>\n4. Configuring TypeScript<\/h4>\n
\u2018tsc --init\u2019\r\n<\/pre>\n
![\"typescript](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-init.webp\")
<\/a><\/p>\n![\"tsconfig](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/tsconfig-file.webp\")
<\/a><\/p>\n5. Writing TypeScript Code<\/h4>\n
function DataFlair_addNumbers(num1: number, num2: number): number {\r\n return num1 + num2;\r\n}\r\n\r\n\r\nconsole.log(DataFlair_addNumbers(5, 10));\r\n<\/pre>\n6. Compiling TypeScript Code<\/h4>\n
\u2018tsc\u2019<\/pre>\n
![\"typescript](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-compiling.webp\")
<\/a><\/p>\n7. Running TypeScript Code<\/h4>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <title>DataFlair TypeScript Example<\/title>\r\n <\/head>\r\n <body>\r\n <script src=\".\/index.ts\"><\/script>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n
\u2018node index.js\u2019\r\n<\/pre>\n
![\"running](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/running-js-file.webp\")
<\/a><\/p>\nInstalling ts-node<\/h3>\n
1. Install Node.js:<\/h4>\n
2. Install ts-node:<\/h4>\n
![\"install](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/install-ts-node.webp\")
<\/a><\/p>\n3. Verify installation:<\/h4>\n
![\"check](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/check-ts-node-version.webp\")
<\/a><\/p>\n
![\"run](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/run-file-using-ts-node.webp\")
<\/a><\/p>\n