5 min TypeScript NPM package
Tags: typescript, npm, javascript, github
Published: 2020-02-14 15:40:41


## 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](https://www.typescriptlang.org/) 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](https://www.monisnap.com/fr) !

## 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** :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dw6dor5u8fut5zndddi0.png)


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](https://github.com/monisnap-jason/unicorn-says-hello-world/blob/master/src/unicorn.ts)

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

[index.ts](https://github.com/monisnap-jason/unicorn-says-hello-world/blob/master/src/index.ts)

```ts
export * from "./unicorn";
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yxsql9mxwc4fxxcm042c.png)


We now need to edit the [tsconfig.json](https://github.com/monisnap-jason/unicorn-says-hello-world/blob/master/tsconfig.json) ( copy / paste the following ) 

```json
{
  "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](https://github.com/monisnap-jason/unicorn-says-hello-world/blob/master/package.json) :

```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](https://github.com/monisnap-jason/unicorn-says-hello-world/blob/master/.gitignore) file ( as we don't want to include some folders into our repository ):

```
\dist
\node_modules
```

And lastly you can create [README.md](https://github.com/monisnap-jason/unicorn-says-hello-world/blob/master/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](https://www.npmjs.com/)
*here is mine for reference [unicorn-says-hello-world](https://www.npmjs.com/package/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 :

{% replit @monisnapjason/NextRadiantTests %}


Drop a comment below if you have any questions !



Have a good one :)