Weekend task: Write your first TypeScript package and publish it to NPM!
Tags: typescript, javascript, npm
Published: 2019-10-20 05:52:31

Today, I'll tell you how you can simply write a TypeScript NPM package for learning purposes in an hour.

First, let us learn
## The basics

TypeScript is a strongly typed language that compiles into JavaScript.

### Here's how you can begin with TypeScript

- Open your terminal.
- Create a project folder where suitable.
```bash
$ mkdir my-first-typescript-package
$ cd my-first-typescript-package
$ npm init -y # to skip all the npm questions
$ npm i -D typescript
```

- Following those steps installs you the TypeScript package that enables you to write TypeScript.
- Run `touch index.ts` in the terminal, and write this one line of code in `index.ts`.
```js
console.log('THIS IS TYPESCRIPT!!!')
```
- To compile it into the JavaScript that Node.js can understand, add the below `script` in `package.json` file.
```json
"scripts": {
  ...
  "build": "tsc index.ts"
  ...
}
```
- And then, just run `npm run build` to see the output file being generated by the TypeScript module!
- Run `node index.js` and see the terminal output `THIS IS TYPESCRIPT!!!`.

**So, you now know how TypeScript works!**

## Few best resources to learn TypeScript

- TypeScript official docs https://www.typescriptlang.org/docs/home.html
- TutorialsPoint also have a nice tut https://www.tutorialspoint.com/typescript/index.htm
- Valentinog's TypeScript tutorial https://www.valentinog.com/blog/typescript/

**Once you know the basic TypeScript syntax, we can now publish our own TypeScript NPM package!**

---

## Things to know

While you are just learning, it is okay to just run `tsc` in terminal and get the output files to enjoy with.

But when you are building packages, you might have to write a lot many more `npm` scripts, you'll have to write `tsconfig`(s), you'll have to setup `ESLint/TSLint` with `Prettier` and VSCode for better code, and bringing it all together can get tough for beginners.

To read everything about how this setup works in detail, read [this medium article](https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c).

## Getting Started

There are many TypeScript boilerplates on GitHub to start with. For this article, I will use [my TypeScript boilerplate](https://github.com/KumarAbhirup/typescript-boilerplate) that use to kickstart my projects.

To setup, a basic development environment using that boilerplate, run the following in the terminal.
```bash
$ git clone https://github.com/KumarAbhirup/typescript-boilerplate my-typescript-package
$ cd my-typescript-package
$ npm i
$ npm run dev
```

**And that's it! You got your TypeScript working!**

To see live changes in the console, you'll first have to run `npm run build:watch` in another terminal tab so that TypeScript keeps a watch over the files you edit so that the TypeScript files get compiled in realtime.

Now, open the `src/index.ts` and edit the file! You'll realize that as you edit and save the file, new JavaScript is compiled and run in realtime.

If you are using VSCode and have ESLint and Prettier extensions enabled, then you will also see auto-linting working in the editor.

**And now you got a good TypeScript environment working!**

---

## Publishing to NPM

If you followed the tutorial to this point, the next steps should be a breeze for you! ❤️

### Look before you leap.

- Make sure you are using a unique NPM package name in `package.json` so that when you deploy to NPM, there are no errors and clashes.

- You might also want to bump versions every time you make a new change. 

- Use [semantic versioning](https://semver.org/). 

- You might want to use more [sophisticated ways](https://stackoverflow.com/questions/13059991/update-package-json-version-automatically) to bump versions rather than manually bumping version numbers in the `package.json` file.

### And finally...

```bash
$ npm run ship # `ship` script is defined in the boilerplate
```

OR may run

```bash
$ npm run build
$ npm publish
```

There are better ways of doing it. You can make use of magic scripts in NPM like **prepare, prepublishOnly, preversion, version and postversion** for automating stuffs but that can be the topic of some another DEV.to post.

**Congratulations! You did build your first NPM package, and it might have took you just few minutes, or an hour or so.**

---

## Conclusion

Building your first TypeScript NPM package can be a fun learn project of the day. Keep building more of them!

### About me

**I am Kumar Abhirup, a 16-year-old JavaScript React developer from India who keeps learning a new thing every single day.**

[Connect with me on Twitter 🐦](https://twitter.com/kumar_abhirup)
[My personal website and portfolio 🖥️](https://kumar.now.sh)

_Comment below your better ways, and suggestions to improve this article. :)_