DEV Community

Shelner
Shelner

Posted on

How to create a simple library using typescript

#webdev #javascript #typescript #npm

1. Initialize the Project 

mkdir my-ts-lib cd my-ts-lib npm init -y
Enter fullscreen mode Exit fullscreen mode

2. Install Development Dependencies 

npm install --save-dev typescript tsup eslint prettier
Enter fullscreen mode Exit fullscreen mode

3. Create tsconfig.json 

npx tsc --init
Enter fullscreen mode Exit fullscreen mode

Then edit it like:

{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "declaration": true, "outDir": "dist", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "moduleResolution": "Node", "resolveJsonModule": true }, "include": ["src"] }
Enter fullscreen mode Exit fullscreen mode

4. Create Library Code

Create a src/ folder:

src/ ├── index.ts
Enter fullscreen mode Exit fullscreen mode

Example src/index.ts:

export function greet(name: string): string { return `Hello, ${name}!`; }
Enter fullscreen mode Exit fullscreen mode

5. Bundle with tsup

Add tsup.config.ts:

import { defineConfig } from 'tsup'; export default defineConfig({ entry: ['src/index.ts'], format: ['esm', 'cjs'], dts: true, clean: true, });
Enter fullscreen mode Exit fullscreen mode

Add to package.json:

"scripts": { "build": "tsup" }
Enter fullscreen mode Exit fullscreen mode

Run:

npm run build
Enter fullscreen mode Exit fullscreen mode

6. Prepare for Publishing

Edit package.json:

{ "name": "your-lib-name", "version": "1.0.0", "main": "./dist/index.js", "module": "./dist/index.mjs", "types": "./dist/index.d.ts", "files": ["dist"], "exports": { "import": "./dist/index.mjs", "require": "./dist/index.js" } }
Enter fullscreen mode Exit fullscreen mode

7. Publish to npm

  1. Log in to npm: 
npm login
Enter fullscreen mode Exit fullscreen mode
  1. Publish: 
npm publish --access public
Enter fullscreen mode Exit fullscreen mode

If the name is taken, either pick a unique name or use a scoped package.

8. Install & Use the Library

Anywhere else:

npm install your-lib-name
Enter fullscreen mode Exit fullscreen mode

Then in code:

import { greet } from 'your-lib-name'; console.log(greet('World'));
Enter fullscreen mode Exit fullscreen mode

References

Github
npm

Top comments (0)