Creating an NPM package is a great way to share your code with other developers and make it more reusable. TypeScript, a superset of JavaScript, makes it easy to write type-safe code, and it can also be used to create NPM packages. In this blog, we will walk through the process of creating your first NPM package in TypeScript.
Step 1: Set Up Your Project
First, create a new directory for your project and navigate into it using the terminal. Run the following command to initialize a new Node.js project:
npm init
This command will ask you a series of questions to configure your project. You can leave most of the defaults as-is, but make sure to set the "entry point" to the main file of your package. For this tutorial, we will use src/index.ts as our entry point.
Next, install TypeScript and its required dependencies by running:
npm install --save-dev typescript ts-node
Step 2: Write Your TypeScript Code
Create a new file named src/index.ts and write some code. For this tutorial, we will create a simple function that returns State name based on number.
export function returnStateByCode(code?: string) {
return stateData.filter(item => item.code === code) ? stateData.filter(item => item.code === code)[0]?.state : undefined;
}
This function takes one argument, code, and returns their respective state name. Note that we have added the export keyword before the function declaration to make it visible outside of the module.
Step 3: Configure Your TypeScript Compiler
Create a new file named tsconfig.json in the root of your project directory with the following contents:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"outDir": "dist"
},
"include": [
"src/**/*"
]
}
This configuration tells TypeScript to compile our code to the dist directory, and to generate type declarations for our module. The include field specifies which files and directories should be included in the compilation.
Step 4: Build Your Package
Run the following command to compile your TypeScript code:
npx tsc
This will create a new directory named dist with your compiled JavaScript files and type declarations.
Step 5: Publish Your Package
Before you can publish your package to the NPM registry, you need to create an account on the NPM website if you haven't already done so, please visit NPM signup page to create one.
Once you have an account, open your terminal and run the following command to log in:
npm login
This will prompt you to enter your NPM username, password, and email address.
To check your username of account from which you are currently logged in , run the following command in your terminal .
npm whoami
Finally, run the following command to publish your package:
If you are publishing your npm package for first time , run the following command :
npm publish --access public
For updating the vesion , just run the following command in your terminal :
npm publish
After running the command, something like this will run on your terminal
npm notice
npm notice 📦 [email protected]
npm notice === Tarball Contents ===
npm notice 2.4kB README.md
npm notice 201B dist/__tests__/test.js
npm notice 174B dist/__tests__/test.js.map
npm notice 377.1kB dist/gst-slab.json
npm notice 3.6MB dist/hsn.json
npm notice 2.4kB dist/index.js
npm notice 1.6kB dist/index.js.map
npm notice 65.4kB dist/sac.json
npm notice 2.4kB dist/state.json
npm notice 522B package.json
npm notice 365.5kB src/gst-slab.json
npm notice 3.6MB src/hsn.json
npm notice 1.2kB src/index.ts
npm notice 56.9kB src/sac.json
npm notice 2.5kB src/state.json
npm notice 842B tsconfig.json
npm notice === Tarball Details ===
npm notice name: [email protected]
npm notice version: 1.0.0
npm notice filename: [email protected]
npm notice package size: 640.4 kB
npm notice unpacked size: 8.1 MB
npm notice shasum: 5a93d7f4d6ce8048e67e26bfc405215ffcc5f6f3
npm notice integrity: sha512-ichnFcLpjYyYX[...]9hr8VFmC9mHwA==
npm notice total files: 16
npm notice
Congratulations! You have successfully created and published your first NPM package in TypeScript. Other developers can now install your package and use your code in their own projects.
Note: Make sure to update the version