How I make my npm package conformable to TypeScript?

Last time we made an NPM package with JavaScript.

How I published my first npm package?

Taishi ・ May 23 '20 ・ 4 min read

#npm #javascript #productivity #typescript

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.

Don't worry. It's just a piece of cake🍰.

Change your index.js file to index.ts

Just change the extension of the file and update the source code.

JavaScript

import { v4 as uuidv4 } from 'uuid';
const generateSlug = (target, hasUuidSuffix = false) => {
  const text = target.toLowerCase();
  const filterdText = text.replace(/[^a-zA-Z0-9]/g, ' ');
  let textArray = filterdText.split(/\s|\n\t/g);
  textArray = textArray.filter(text => {
    return text !== '';
  });
  const slug = textArray.join('-');
  if (hasUuidSuffix) return `${slug}-${uuidv4().split('-')[0]}`;
  return slug;
};
export default generateSlug;

TypeScript

import { v4 as uuidv4 } from 'uuid';
const generateSlug = (target: string, hasUuidSuffix = false): string => {
  const text = target.toLowerCase();
  const filterdText = text.replace(/[^a-zA-Z0-9]/g, ' ');
  let textArray = filterdText.split(/\s|\n\t/g);
  textArray = textArray.filter(text => {
    return text !== '';
  });
  const slug = textArray.join('-');
  if (hasUuidSuffix) return `${slug}-${uuidv4().split('-')[0]}`;
  return slug;
};
export default generateSlug;

They are almost the same this time😅.

Initialize with tsc command

Let’s initialize your project with tsc command, which generates tsconfig.json file.

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

Add "declaration": true to your tsconfig.json

We should do this to generate corresponding .d.ts file (type definition file) when we execute yarn build.
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

By adding this, a type definition file will be generated as index.d.ts.
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

This file is the key.
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!

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

Thank you for reading