DEV Community

Cover image for How I make my npm package conformable to TypeScript?
Taishi
Taishi

Posted on • Updated on • Originally published at en.taishikato.com

How I make my npm package conformable to TypeScript?

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.

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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"
  ]
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

That’s it!
Easy peasy!

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

Thank you for reading

Cat

Top comments (0)