How to Properly Create a Qualified npm Package with TypeScript: A Step‑by‑Step Guide

Introduction

This article focuses on how to correctly implement a qualified npm package. It does not dive deep into the actual code implementation but aims to teach readers the surrounding engineering work required for a publishable library.

Background

The author wants to deepen knowledge of TypeScript . Previously using a vue stack, the company switched to a react + antd + typescript backend, which posed a challenge for a developer accustomed to loosely‑typed javascript and the any type.

Motivated to improve TypeScript skills, the author decided to rewrite an existing JavaScript event emitter in TypeScript, both to solidify understanding and to fill a long‑standing gap in technical output.

千好万好，不如动手撸一遍好

Overview

The article will briefly touch on well‑known concepts while providing deeper insight into less familiar points. Readers are encouraged to consult the Git commit history for detailed work and official documentation for any unclear sections.

After reading, readers should gain:

Big‑picture view of developing a library from scratch.

Engineering mindset: awareness of configuration files and tooling beyond core functionality.

How to write a proper README.

Interesting technical tidbits such as Excalidraw sketches, GitHub Actions, and shields.io badges.

Implementation

Step 1: Create the Project

Initialize a repository and give the package a meaningful name that avoids duplication and conveys purpose.

Avoid name collisions.

Make the name self‑descriptive.

mkdir monitor-event-emitter // 创建文件夹
cd monitor-event-emitter // 进入文件夹

git init // 变成git 仓库
npm init -y // 初始化包，会生成一个package.json包配置文件

Step 2: Complete package.json Configuration

The package.json file is crucial because it tells users how to consume the library. Important fields include:

main : entry file path.

description : concise one‑sentence summary.

types : TypeScript declaration file for IDE assistance.

files : list of files to publish (keep it minimal).

repository : link to the GitHub repo.

keywords : e.g., monitor , event , emitter .

Step 3: Engineering Configuration

Before writing functional code, set up essential tooling:

husky : Git hooks for pre‑commit checks, linting, etc.

lint‑staged : runs linters only on staged files.

eslint : code quality enforcement.

prettier : code style formatting.

stylelint : CSS/SCSS style enforcement.

commitlint : commit message conventions.

Step 4: Library Features

The core of the library is a lightweight event monitor written in ES6. It logs each event execution in a table format, making debugging easier. The design favors low constraints, high cohesion, and provides real‑time monitoring of event parameters, results, and execution order.

Key characteristics:

Minimal usage constraints – fewer required parameters.

Implementation uses Map for the event center, leveraging its built‑in methods.

Real‑time snapshot of event execution, displayed as a console table with selectable modes ( default , cool ).

Customizable log scopes for categorizing output.

Step 5: Unit Testing

After core logic is complete, write unit tests (e.g., with jest ) to reduce the risk of bugs and uncover edge cases.

Step 6: Write a Proper README

A good README should include sections such as demo, why, install, usage, API, config, and todo, along with badges from shields.io to increase credibility.

Step 7: Blog Promotion

Write a concise blog post to explain the library’s purpose, benefits, and how others can contribute.

不写博客的程序猿不一定是不合格的程序猿，但是愿意去写博客的程序猿将来一定会成为一名合格的程序猿

Conclusion

Creating a quality npm package involves thoughtful naming, thorough configuration, robust tooling, comprehensive testing, clear documentation, and community outreach.

Original source code and demo are available for reference.