161 Followers
·
Follow

Image for post
Image for post

Make your npm package conformable to TypeScript

So last time we made an NPM package with JavaScript.

Yes. It’s great! We made it!

BUT, there is one problem. We can not use it with TypeScript projects out of the box because there is no type definition file and TS project can’t know any types of this NPM package.

This time we will make a TypeScript file and generate a type definition file.

Change your index.js file to index.ts

JavaScript

TypeScript

They are almost the same this time.

Initialize with tsc command

$ tsc --init
message TS6071: Successfully created a tsconfig.json file.

Add "declaration": true to your tsconfig.json

Your tsconfig.json looks like below.

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"strict": true,
"esModuleInterop": true
},
"exclude": [
"node_modules",
"dist"
]
}

Add "types": "index.d.ts" to your package.json

So your package.json looks like below.

{
"name": "@taishikato/slug-generator",
"version": "2.2.0",
"description": "generate slug string",
"main": "index.js",
"types": "index.d.ts",
"repository": "https://github.com/taishikato/slug-generator",
"author": "taishikato",
"license": "MIT",
"private": false,
"scripts": {
"build": "tsc"
},
"dependencies": {
"uuid": "^7.0.2"
},
"keywords": [
"slug",
"npm",
"package",
"taishikato",
"slug generator"
],
"devDependencies": {
"@types/uuid": "^7.0.2",
"typescript": "^3.8.3"
}
}

Add .npmignore

npm command usually checks .gitignore file to see which file should be excluded in the package.

You need to add .npmignore when the files which should be excluded are different from .gitignore. In this case, npm command does not check .gitignore, checks only .npmignore.

Your .npmignore looks like below

.gitignore
yarn.lock
node_modules
index.ts

That’s it! Easy peasy!

Thank you!!

taishikato/slug-generator: Slug generator for blog posts or any other user-generated-contents

Portfolio

Written by

Trying to start a company in Vancouver https://taishikato.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store