Open In App

NPM Typescript

Last Updated : 15 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Node Package Manager (npm) is a package manager for NodeJS and JavaScript, which is mainly used for installing, managing, and sharing reusable code packages. TypeScript, on the other hand, is a powerful superset of JavaScript that introduces static typing, enabling developers to write more robust and scalable code with features like type annotations, interfaces, and type checking during compilation.

Prerequisites

Before getting started, ensure you have the following installed:

Features of npm typescript

  1. Package Management: npm provides a vast repository of packages for NodeJS and JavaScript, making it easy to install, manage, and share dependencies.
  2. Static Typing: TypeScript introduces static typing to JavaScript, enabling developers to catch type-related errors during development and improve code quality and reliability.
  3. Type Definitions: TypeScript's ecosystem includes type definitions (often referred to as "typings") for popular libraries and frameworks, facilitating better code documentation and tooling support.
  4. Compiler: TypeScript comes with a compiler that translates TypeScript code into plain JavaScript, allowing developers to use modern JavaScript features while targeting different ECMAScript versions for compatibility.

Steps to Create an Application and Install TypeScript Package

Step 1: Create a Project Folder

First, create a folder named npm-typescript using the following command in your terminal or command prompt:

mkdir npm-typescript

Step 2: Navigate to the Project Folder

Navigate to the newly created folder:

cd npm-typescript 

Step 3: Initialize npm

Initialize npm in the folder by running the following command to create a package.json file:

npm init -y 

Step 4: Install TypeScript

You can install TypeScript globally or locally within your project. To install it locally as a development dependency, use:

npm install typescript

Step 5: Create a TypeScript File

Create an index.ts file in your project folder.

Project Structure

Your project structure should look like this:

PS
Project Structure of NPM TypeScript

Dependencies in package.json

After installing TypeScript, your package.json should include TypeScript as a dependency:

"devDependencies": {
"typescript": "^5.4.5"
}

Example 1: Generic Function to Reverse Arrays

In this example, a generic function reverseArray is defined to reverse arrays of any type T. It works with both numeric and string arrays.

TypeScript
// index.ts
function reverseArray<T>(array: T[]): T[] {
    return array.reverse();
}
let numbers: number[] = [1, 2, 3, 4, 5];
let reversedNumbers = reverseArray(numbers);
console.log(reversedNumbers);
let strings: string[] = ["apple", "banana", "cherry"];
let reversedStrings = reverseArray(strings);
console.log(reversedStrings);

To compile and run these TypeScript files, use the TypeScript compiler (tsc).

tsc index.ts
node index.js

Output:

E1
npm typescript output

Example 2: Interface for a Calculator

In this example, an interface Calculator is defined with methods for addition and subtraction, which are implemented in a calculator object using arrow functions.

JavaScript
// index.ts
interface Calculator {
    add: (a: number, b: number) => number;
    subtract: (a: number, b: number) => number;
}
let calculator: Calculator = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
};
console.log(calculator.add(5, 3));
console.log(calculator.subtract(10, 4));

To compile and run these TypeScript files, use the TypeScript compiler (tsc).

tsc index.ts
node index.js

Output:

E2
npm typescript output

Using npm and TypeScript together enhances the development workflow by providing robust package management and strong typing features. By following the steps outlined above, you can set up a TypeScript project with npm, manage dependencies efficiently, and write scalable and maintainable code.


Next Article

Similar Reads