5 min TypeScript NPM package

Introduction

As developers we might want to create a new framework or package reusables components, functions, etc...
Hopefully as JavaScript developers we have a NPM !

We may be also using TypeScript to add a layer of safety on top of Javascript plus a more advanced OOP design

So what about we create a NPM package which will be available to
JavaScript projects but most importantly Typescript projects ?

Let's go and let's see how we do it at Monisnap !

Getting Started

( I assume you have NodeJS and Typescript installed )

First create a new folder and open a terminal tab and type :

npm init -y

This will basically initialize your npm package by creating a package.json with some default options ( we will get back to that later )

and

tsc --init

This also initialize the project to use TypeScript by creating a tsconfig.json which holds important options defining how your TypeScript code will be handled.

So now you should have this :

Good ? next !

Now we can write some code :)

Create a "src" folder and two files inside it "index.ts" and "unicorn.ts" ( yes I like unicorns )

unicorn.ts

export class Unicorn {
  public sayHelloTo(name: string): string {
    return `🦄 Hello ${name} !`;
  }
}

index.ts

export * from "./unicorn";

We now need to edit the tsconfig.json ( copy / paste the following )

{
  "compilerOptions": {
    "declaration": true,
    "strictNullChecks": true,
    "target": "es5", 
    "outDir": "dist",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "lib": ["es2015", "dom"],
    "rootDir": "src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

let's cover the important options :

• declaration: It tells typescript to generate the typings ( important if we want some "automatic" docs for our code
• target: specify the ES target version ( I chose ES5 here because I target nodeJS )
• outDir: The compiled files destination
• module / module resolution: I use commonJS / nodeJS as its the module system on NodeJS
• sourceMap: Important if you want the source map to be able to debug Typescript code directly
• rootDir: The root folder where our code is.

Now we can edit the package.json :

{
  "name": "unicorn-says-hello-world",
  "version": "1.0.0",
  "description": "A unicorn that says hello world",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "tsc",
    "prepare": "npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/monisnap-jason/unicorn-says-hello-world.git"
  },
  "keywords": [],
  "author": "monisnap-jason",
  "license": "ISC"
}

Again the important options:

• name: the name of your package on NPM
• main: the entry point ( our code will be compiled in the dist folder )
• types: the path of our code typings
• files: The files we want to include in our package
• scripts:
  • build: tsc to compile our code
  • prepare: this is a NPM hook which executes a command before publishing to npm ( we tell it the execute the build command above )
• repository: the options about the repository which holds the package code

We also need a .gitignore file ( as we don't want to include some folders into our repository ):

\dist
\node_modules

And lastly you can create README.md to tell the world how to use your package.

We're almost done !

Now the final touch :

npm publish

you should see this in your terminal output :
"+ your-package-name@1.0.0"

And voilà your package is on NPM
here is mine for reference unicorn-says-hello-world

Now if I want to use my brand new package I just to need npm install unicorn-says-hello-world in a new or existing project, and I can use it like that :

Drop a comment below if you have any questions !

Have a good one :)