How would you use TypeScript with a package manager like npm or yarn? — TypeScript Interview Question #77

When you want to use TypeScript with a package manager like ‘npm‘ or ‘yarn‘, you would generally follow these steps:

1. Install Node.js and a package manager (npm or yarn).

2. Initialize the project and generate ‘package.json‘.

3. Install TypeScript and other required dependencies.

4. Configure TypeScript by creating a ‘tsconfig.json‘ file.

5. Write TypeScript code and compile it.

6. Use external TypeScript packages and type definitions.

Now, let’s go through these steps in greater detail:

#### 1. Install Node.js and a package manager (npm or yarn)

First, install Node.js from the official website: https://nodejs.org/

‘npm‘ is bundled with Node.js, while ‘yarn‘ can be installed separately with the following command:

npm install -g yarn

#### 2. Initialize the project and generate ‘package.json‘

Create a new project directory and navigate to it in the terminal. Initialize the project using package manager to generate ‘package.json‘ file:

For ‘npm‘:

npm init

For ‘yarn‘:

yarn init

Follow the prompts to set up your project configuration.

#### 3. Install TypeScript and other required dependencies

Install TypeScript as a development dependency using your package manager:

For ‘npm‘:

npm install --save-dev typescript

For ‘yarn‘:

yarn add --dev typescript

Additionally, install any other required dependencies for your project.

#### 4. Configure TypeScript by creating a ‘tsconfig.json‘ file

Create a ‘tsconfig.json‘ file in your project root, to configure TypeScript compiler options. Here is a basic example of a ‘tsconfig.json‘:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": ["./src/**/*.ts"],
  "exclude": ["node_modules"]
}

This configuration tells TypeScript to compile ‘.ts‘ files in the ‘src/‘ directory, output the compiled JavaScript files to the ‘dist/‘ directory, and use strict type-checking.

#### 5. Write TypeScript code and compile it

Create a ‘src/‘ directory to write your TypeScript code in. For example, create a ‘src/index.ts‘ file with the following content:

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

greet("TypeScript");

Add a script to your ‘package.json‘ to compile TypeScript:

"scripts": {
  "build": "tsc"
}

Compile your code by running ‘npm run build‘ or ‘yarn build‘, and the compiled JavaScript will be output to the ‘dist/‘ directory.

#### 6. Use external TypeScript packages and type definitions

To use external TypeScript packages, you need to install the package and its corresponding type definitions (if available). Type definitions are usually available under the ‘@types/‘ namespace.

For example, if you want to use the ‘lodash‘ library, you would do:

For ‘npm‘:

npm install lodash
npm install --save-dev @types/lodash

For ‘yarn‘: “‘bash yarn add lodash yarn add –dev @types/lodash “‘

Then, you can import and use the ‘lodash‘ library in your TypeScript code:

import _ from 'lodash';

const exampleArray = [1, 2, 3, 4, 5, 6];

const shuffledArray = _.shuffle(exampleArray);

console.log(shuffledArray);

That’s it! You’ve now set up a TypeScript project with a package manager (npm or yarn), allowing you to manage dependencies and use external packages.