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 :)