Installing TypeScript

To install TypeScript using npm, you normally need:

• Node.js
• npm
• TypeScript
• A code editor such as Visual Studio Code

Node.js provides the JavaScript runtime, while npm is used to install JavaScript and TypeScript packages.

Node.js is a JavaScript runtime that allows JavaScript programs to run outside a web browser.

It is commonly used for development tools, servers, command-line applications, and JavaScript-based projects.

npm is the package manager commonly used with Node.js projects. It allows developers to install, update, and manage packages.

TypeScript can be installed using npm.

npm install typescript

Open Command Prompt, PowerShell, or a terminal and run:

node --version

If Node.js is installed, the command displays the installed Node.js version.

You can check whether npm is available by using:

npm --version

If npm is available, the terminal will display its version number.

If the node and npm commands are not available, install Node.js first.

After installation, close and reopen your terminal and check the versions again.

node --version
npm --version

Create a folder for your TypeScript project.

mkdir typescript-demo
cd typescript-demo

The cd command moves the terminal into the project folder.

Inside the project folder, initialize npm using:

npm init -y

This creates a package.json file.

The package.json file contains information about an npm project and its dependencies.

It can contain:

• Project name
• Version
• Scripts
• Dependencies
• Development dependencies

For a project, TypeScript can be installed locally as a development dependency.

npm install --save-dev typescript

This adds TypeScript to the project's development dependencies.

A local installation allows a project to use a specific TypeScript version rather than depending on one global installation.

This makes project environments more predictable.

After installing TypeScript locally, you can check it using:

npx tsc --version

The npx command can run the TypeScript compiler installed in the current project.

tsc is the TypeScript compiler command. It is used to compile TypeScript files into JavaScript.

tsc app.ts

The compiler reads the TypeScript file and produces JavaScript output according to the project configuration.

When TypeScript is installed locally, you can run the compiler with:

npx tsc

This is useful because it uses the TypeScript compiler available within the project.

TypeScript can also be installed globally using npm.

npm install -g typescript

A global installation makes the tsc command available from different project directories.

Create a file named app.ts.

let message: string = "Hello TypeScript";

console.log(message);

The .ts extension identifies the file as a TypeScript file.

Use the following command to compile the TypeScript file:

npx tsc app.ts

The compiler generates a JavaScript file from the TypeScript source.

After compilation, a JavaScript file can be generated. For a simple file named app.ts, the output can be app.js.

app.ts
   ↓
TypeScript Compiler
   ↓
app.js

If the generated JavaScript file is intended to run in Node.js, you can execute it with:

node app.js

The program will execute the generated JavaScript.

A common project setup is:

mkdir my-typescript-app
cd my-typescript-app

npm init -y

npm install --save-dev typescript

This creates a project and installs TypeScript locally.

A TypeScript project can use a configuration file named tsconfig.json.

The file tells the TypeScript compiler how the project should be compiled.

You can create one using:

npx tsc --init

The tsconfig.json file contains TypeScript compiler configuration options.

It can control settings such as:

• Target JavaScript version
• Module system
• Source directories
• Output directories
• Strict type checking

When a project contains a tsconfig.json file, you can compile the project using:

npx tsc

The compiler reads the configuration file and compiles the project according to its settings.

Visual Studio Code provides strong TypeScript development support.

It can provide:

• Syntax highlighting
• Autocomplete
• Error highlighting
• Code navigation
• Type information

This makes it a popular editor for TypeScript development.

React projects can use TypeScript for typed components and application logic.

When creating a new React project, the project setup can include TypeScript support. Existing projects can also add TypeScript and appropriate type definitions.

React Native applications can also be written using TypeScript. Modern React Native project templates can be configured for TypeScript.

TypeScript files containing JSX use the .tsx extension.

App.tsx
HomeScreen.tsx
ProfileScreen.tsx

A basic TypeScript project workflow is:

1. Install Node.js.
2. Verify Node.js and npm.
3. Create a project folder.
4. Initialize npm.
5. Install TypeScript.
6. Create a TypeScript file.
7. Create a TypeScript configuration file.
8. Compile the project.

Node.js
   ↓
npm
   ↓
TypeScript
   ↓
.ts files
   ↓
tsc
   ↓
JavaScript

mkdir typescript-demo

cd typescript-demo

npm init -y

npm install --save-dev typescript

npx tsc --init

Then create app.ts:

let message: string = "Hello TypeScript";

console.log(message);

Compile the project:

npx tsc

Before starting TypeScript development, make sure you understand the following setup steps:

• Node.js is installed.
• npm is available.
• A project folder is created.
• package.json is created.
• TypeScript is installed.
• tsc is available.
• A .ts file can be created.
• tsconfig.json can be created.
• The TypeScript project can be compiled.