Using other package managers with node has become a whole lot easier

Ananto Ghosh — Sat, 05 Mar 2022 10:31:37 +0000

If you still are not aware, node v16.9.0 and v14.19.0 was launched with corepack https://nodejs.org/api/corepack.html. A developer can use Corepack to define alternative package managers like yarn and pnpm.
Node will then automatically get the required version of the package manger.

Corepack can also be installed as a global package on earlier node versions.

Benefits

Using package managers this way has two main benefits

Easily synchronize package manager and their versions amongst developers. Though yarn 2+ solves this issue in its own way.
No install step required for the package managers.

Enable

It's much easier to understand with an example.

On a machine with node installed

corepack enable

and that is it!. Now the required package manger will be available when executed.

If corepack is not found in your system, then you can install it as a global package

npm i -g corepack

Use

For example, now to create a new project with yarn, in a folder just execute

yarn init -2

Similarly you are free to use pnpm https://pnpm.io/ as well.

Update package.json

A new field in package.json has been introduced to fix a project to a particular package manager version.

{
  name: 'yarn-test',
  packageManager: 'yarn@3.2.0'
}

This ensures that every developer in your team will use the same version of the package manager.

Running the same version

The major work is all done!

Just run your package manager inside your repo and it should run the version defined in your package.json

For example if the package.json had

{
    ...
    "packageManager": "pnpm@6.32.2"
}

Running pnpm in this project will use the same version.

pnpm -v
6.32.2

Conclusions

I wish I had more to say, but corepack makes switching to other package managers a breeze. What qualities distinguish your preferred package manager?

Originally posted on mein.in

Start type checking your JavaScript without changing your code

Ananto Ghosh — Sun, 22 Sep 2019 15:22:09 +0000

Index

Introduction

Enable type checking

Type checking at project level

Type checking at per file

Adding types

Inferring types

Manually specifying types

On variables

On function parameters

Define your own type

Importing type definitions

The full list of JSDOC annotations

Introduction

Now this post is not intended to persuade you to begin type checking your JavaScript. Rather if you're interested in type checking but don't want to transform your code to typescript yet, this article will inform you how to do it.
A key benefit of this approach is that you can add type checking gradually, per file.

Enable JavaScript type checking

Install typescript

npm install -g typescript

Visual Studio Code can do the checks without needing to install typescript separately.

On other editors, you may need to configure the Typescript language server to include js files.

Otherwise, use the tsc cli: tsc filename.js --allowJs --checkJs --noEmit.

Type checking at project level

Create a jsconfig.json file at project root:

{
  "compilerOptions": {
    "checkJs": true
  }
}

This also allows you to specify other options

{
  "compilerOptions": {
    "checkJs": true,
    "noEmit": true, // Do not transpile (only type checking)
    "jsx": "react",
    "target": "es2016",
    "moduleResolution": "node",
    "lib": ["es2016", "dom"],
    "strict": true,
    "noImplicitAny": false,
    "baseUrl": "src"
  },
  "exclude": ["node_modules", "public"]
}

Type checking at per file

Add // @ts-check comment on top of the file you want to check

Adding types

Inferring types

Whenever possible, Typescript will infer the type of the variables automatically and provide relevant autocompletion and error reporting.

Manually specifying types

You can specify types using JSDOC comments

On variables

/** @type {number | null} */
let a; // a will be assumed to be a number or null

/** @type {{ prop1: string, prop2: number[] }} */
let b; // Object b will have two properties prop1 which is a string and prop2 which would be a number array

On function parameters

/**
 * @param {Object} options - Object type
 * @param {string} options.prop1 - Property of Object options
 * @param {number} options.prop2 - Property of Object options
 * @param {string} arg1 - A string param.
 * @param {string} [arg2] - Optional param.
 * @param {string} [arg3="defaultValue"] - Optional param with default value
 * @return {string} return type
 */
function demo(options, arg1, arg2, arg3) {
  return arg1 + arg2 + arg3;
}

Define your own type

/**
 * @typedef {Object} MyObject - Define Object type MyObject
 * @property {string} prop1 - Property of Object MyObject
 * @property {number} prop2 - Property of Object MyObject
 */
/** @type {MyObject} */
let MyObject;

Importing type definitions

This is the really cool part. You can import type definitions form d.ts files and get type information for your npm packages.

/**
 * @typedef {import('webpack').Configuration} WebpackConfig
 * @typedef {import('webpack').RuleSetRule} RuleSetRule
 * @typedef {import('webpack').RuleSetLoader} RuleSetLoader
 */

/**
 * @type {WebpackConfig}
 */
const config = getConfig(); // config has the structure of the Webpack config object!

Demo

config object having properties of the webpack config object.

The full list of JSDOC annotations

All available annotations and techniques can be read here:

https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html

Follow me on twitter
My website: mein.in

DEV Community: Ananto Ghosh