Introduction and Getting Started with TypeScript

Environment Setup

TypeScript can be compiled and executed online using online compilers. But an offline setup installed on your machine is recommended and suitable for our code. As TypeScript is open source, it can run and be installed on any browser, operating system, and host. So let’s learn how to install TypeScript on windows because windows is the most used OS.

The things or tools you need to execute a TypeScript program are:

• A text editor or IDE - to write the source code of any program.
  Notepad, Notepad++, Vim, Visual Studio Code, Sublime Text, Emacs, etc., are a few examples of text editors and IDE used for TypeScript.
• TypeScript compiler - converts source code in .ts file to .js file. This process is called Transpilation.

Source

• TypeScript language service - supports the common set of editor operations like statement completion, signature, code formatting and outlining, etc.

Install node.js

The first step you need to install TypeScript is to install node.js. Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. You can download node.js from nodejs.org. The LTS version is the stable and most used version of node js.

WINDOWS

Step -1: Download the node js and run the .msi installer.

Source
 

Step - 2: Check whether the node js is installed or not by executing the command node -v. This command gives the version of node js on your machine.
 

Step -3: Run the following command in the terminal to install the TypeScript.

npm install -g typescript

npm is the default package manager available for Node.js. It consists of a command-line client and an online database of public and paid-for private packages called the npm registry.
 

MAC OS

To install the node.js on MAC OS, download the version mentioned for MAC from the official website. Install the packages from .dmg and follow the instructions in the install wizard.

Source

LINUX OS

To install the node js on LINUX, we have two options. They are

1. Install node js and npm using the following commands and check their versions using node -v and npm -v. 

sudo apt install nodejs
sudo apt install npm

2. Install node js using Node Source Repository

Step -1: Update and upgrade the package manager using Linux terminal

sudo apt install npm
npm -v or npm –version

Step -2: Add node js PPA to your machine

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash –

Note: The version can be changed according to the version you want to download. Here we are using the command to download version 10.

Step -3: Install node js and check the versions of node and npm.

sudo apt-get install nodejs
node -v
npm -v

2. Install IDE

As mentioned earlier, an IDE is a development environment necessary to write the source codes of any program. The best and most used IDE is Visual Studio Code. You can download the latest version of Visual Studio Code from here. You can follow the official documentation of Visual Studio code to install it for any OS.
Finally, our environment setup for TypeScript is done, and we are ready to work on the code.

TypeScript Build Tools

Build tools are programs used to automate the creation of applications from source code. The building includes compiling, linking, and packaging the code into a usable or executable form. Example: apk for android. Usually, building tools are run on a common line, either in IDE or a separate terminal. 

The build automation includes activities like

• Downloading dependencies
• Compiling source code
• Running tests
• Deployment to production

The build needs to be automated, as it is hard to track what needs to build in a complex project. The most used build tools in TypeScript are

• Babel
• Browserify
• Grunt
• Gulp
• JSPM
• MSBuild

Learn more about build tools and automation from here.

TypeScipt vs JavaScript

• TypeScript always highlights errors at compile-time, whereas JavaScript points them out at the run time.
• TypeScript supports static typing, whereas JavaScript does not.
• It supports the integration of tools that provides hints while writing code.
• It offers better code structuring and object-oriented programming techniques.

FAQs

1. What is TypeScript used for?
   TypeScript is a typed scripting language used to develop applications for both client and server-side execution.
    
2. Is TypeScript frontend or backend?
   TypeScript is a scripting language. It can be used for both frontend(in frameworks like React, Angular) and backend using node js.
    
3. Can TypeScript run in the browser?
   TypeScript cannot run on any browser in its original form. The source has to be transpiled to JavaScript code before execution.

Key Takeaways

Let’s discuss Typescript and how to work with TypeScript in brief

• TypeScript is an open-source typed language developed and maintained by Microsoft. It is a Superset of JavaScript, so it can be implemented similarly to JS and supports additional features.
• The TypeScript files are saved with the .ts extension. 
• A browser cannot interpret them directly, so they are compiled into plain JavaScript code and executed.
• A text editor or IDE, TypeScript compiler, and language service are necessary for a developer to work with TypeScript.
   

Hello Ninjas! We know you are interested in TypeScript and want to learn more. So we found the best web development course for you. Keep learning new things, and never quit.
Happy learning!