TypeScript NPM Package Guide

Create a package:

mkdir palind
cd palind

npm init -y

Add TypeScript

npm i typescript -D
npx tsc --init --rootDir src --outDir lib --sourceMap --declaration --declarationMap

Write some code

src/index.ts

/** 
 * @returns true if the input string is a palindrome
 */
export function isPalindrome(str: string): boolean {
  return str === str.split('').reverse().join('');
}

package.json secret sauce:

{
  "main": "lib",
  "types": "lib",

  "scripts": {
    "build": "tsc"
  }
}

Build:

npm run build

Publish:

npm publish

Consuming a TypeScript Package

Standard npm install :

npm i palind

Now use wherever you want:

./index.ts

import { isPalindrome } from 'palind';

console.log(isPalindrome('madam')); // true
console.log(isPalindrome('hello')); // false

Transcript

00:00

We create a new directory for our package and then CD into that directory. Next, we initialize a new package to Jason by using the familiar command NPM in it minus Y. Now, because this package will be written in TypeScript, we install the TypeScript compiler with NPMI TypeScript and save it as a dev dependency with minus capital D. Now we use this install compiler to initialize a new DS config JS by running N-P-X-T-S-E space minus minus. In it we also specify a few compiler options

00:34

for the generated DS config. We specify that the route directory will be the source folder, which will contain all our TypeScript source code and the output directory as lib, which will contain all the generated assets. We enable source maps so we can debug the source code TypeScript from the generated JavaScript. We enable declarations so that the compiler generates type definitions, which can be used by our TypeScript consumers, and we enable declaration map, which allows our TypeScript consumers to navigate from the type definitions to the TypeScript source code.

01:06

We will see these output source maps, declarations, and declaration maps when we run the compiler against our source code later in the lesson. Now let's open up this folder within our IDE for this package. We will create our main entry point under source index Ts. In terms of code, we can put whatever we want in this package. For example, we can use a familiar Isabel room function and export it from this main module. Now we will make some minor tweaks to the package of Jason file. Our main application entry point will be generated in the

01:39

lib folder, so we change mean to be lib and because we will be generating TypeScript type definitions as well. In the lib folder, we add a section for types and pointed to lib as well. In terms of building a package, we can run N-P-X-T-S-C on the terminal if you want, but we can also add a special script specifically for compiling using TypeScript. We call the script build, and within the script we will simply run TSC for the TypeScript compiler. Now let's open up the terminal and execute this build with NPM Run build.

02:12

Once this build completes, it generates the output assets within the lip folder, and you can see that we have the output jal script as well as the source map, as well as the declaration, as well as the declaration map. Once we are happy with our TypeScript source code and we have the assets built, we can publish these to NPM by running NPM publish. This makes this package available for use for anyone else through NPM. That's it for creating an NPM package. Now let's look at how we can consume it. Now, in terms of using this package, all that we need

02:45

to do is to install it using NPMI package name, which in our case is pel. Once the installation is complete, you can import this package just like any other module within your code base, and then we can use this package With complete in dnce and compile time type safety and all the other benefits that TypeScript provides. We don't have to do anything special in order to use a package written like this, for example. At this point, we can simply run N-P-X-T-C to compile our application and then run it through Node and you can see that the output matches our expectations.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional TypeScript Masterclass Lessons

Creating NPM packages

Subscription Required

TypeScript NPM Package Guide

Consuming a TypeScript Package

Transcript

Professional TypeScript Masterclass