Sometimes you want to create your own npm package. Here is the way to set up an npm package in TypeScript.

In your project directory, initialize the npm object.

npm init

Install development dependencies.

npm install --save-dev typescript ts-node

ts-node enables you to directly execute TypeScript on Node.js. See more on the package website.

Set up the TypeScript project.

npx tsc --init

In the generated tsconfig.json, set outDir to dist.

...
"outDir": "./dist", /* Specify an output folder for all emitted files. */
...

In the root directory, create the src folder and in the folder index.ts which will be the entry point in your package.

mkdir src
touch ./src/index.ts

Create a .gitignore file.

/node_modules
# Ignore test-related files
/coverage.data
/coverage/
# Build files
/dist

Install the tsup package. It is a bundler and is powered by esbuild.

In the context of JavaScript, a bundler is a tool that takes multiple JavaScript files and their dependencies and combines them into a single file or a few files, which can then be included in a web application. The main purpose of a bundler is to manage and optimize the delivery of code to the browser, enhancing performance and simplifying development.

npm install --save-dev tsup

In the root directory, create the tsup.config.ts file.

import { defineConfig } from "tsup";
export default defineConfig({
entry: ["src/index.ts"],
format: ["cjs", "esm"], // Build for commonJS and ESmodules
dts: true, // Generate declaration file (.d.ts)
splitting: false,
sourcemap: true,
clean: true,
});

Update these properties in package.json

...
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
    "dist"
],
"scripts": {
    "build": "tsup"
},
...

In your index.ts, create a trivial function you will export in this package.

export function add(a: number, b: number): number {
  return a + b;
}

Build your package with npm run build. In the dist directory, you will see the build of your project.

TADA! Now you have a base project for your npm package.

The post How to create TypeScript NPM package project first appeared on Hard Wired.

TypeScript compared to JavaScript is a little bit more complex. If you do server-side JavaScript, you just call node your-script.js and it runs. When you want to use TypeScript, you need to install a few things and do a few steps to make your code runnable.

Make sure you have installed the latest version of nodejs on your system.

Create your project folder, change the current working directory, and install typescript as your development dependency.

npm i -D typescript

Initialize your nodejs project.

npm init

Then use npx to initialize a new typescript project.

npx tsc --init

A bunch of files should be in your project:

• package.json
• package-lock.json
• tsconfig.json

Edit tsconfig.json, find outDir, and change it if you do not want compiled files in your root directory. Change it to the build folder.

...
outDir": "./build",   /* Specify an output folder for all emitted files. */
...

Now it's time to create your first TypeScript code.

Create a file index.ts and just put some random code.

async function main() {
    const i: number = 1;

    console.log('Random stuff', i);
}

main()

Save it and then you can do a manual compilation.

npx tsc

This compiles your project and the output will be stored in the build folder. You will find the file index.js there. Do a test run with node ./build/index.js.

In the console, you should see:

Random stuff 1

You can use npx tsc -w to activate watch mode. When you change anything in your project, it will be recompiled automatically.

To make it a little bit easier, you can edit the scripts property in package.json to merge compilation and run into one command.

...
"scripts": {
        "start": "npx tsc && node ./build/index.js"
},
...

When you call npm run start, your project will be compiled and run.

During code development, you should use a linter to check your code using certain rules to avoid code inconsistency. An easy way is to use Google TypeScript Style.

Install gts as a development dependency.

npm i -D gts

Then initialize gts with npx.

npx gts init

It will ask you some questions. If your typescript version is higher than suggested, just say no. Then you will be asked about updating tsconfig.json, say yes.

Some big changes will be made.

The src folder will be created with an index.ts file in it. Remove your old index.ts from the root folder.

In package.json, update your start script.

...
"start": "npx tsc && node ./build/src/index.js",
...

Make sure you have eslint support activated in your editor

You will get an index.ts example file in the src directory. It is all wrong. If you have eslint support activated in your editor, it should scream at you with lots of errors.

console.log("Try npm run lint/fix!");

const longString = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut aliquet diam.';

const trailing = 'Semicolon'

            const why={am:'I tabbed?'};

const iWish = "I didn't have a trailing space..."; 

const sicilian = true;;

const vizzini = (!!sicilian) ? !!!sicilian : sicilian;

const re = /foo   bar/;

export function doSomeStuff(withThis: string, andThat: string, andThose: string[]) {
    //function on one line
    if(!Boolean(andThose.length)) {return false;}
    console.log(withThis);
    console.log(andThat);
    console.dir(andThose);
    console.log(longString, trailing, why, iWish, vizzini, re);
    return;
}
// TODO: more examples

Just run npm run fix to let gts fix your code. You will get this:

console.log('Try npm run lint/fix!');

const longString =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut aliquet diam.';

const trailing = 'Semicolon';

const why = {am: 'I tabbed?'};

const iWish = "I didn't have a trailing space...";

const sicilian = true;

const vizzini = sicilian ? !sicilian : sicilian;

const re = /foo {3}bar/;

export function doSomeStuff(
  withThis: string,
  andThat: string,
  andThose: string[]
) {
  //function on one line
  if (!andThose.length) {
    return false;
  }
  console.log(withThis);
  console.log(andThat);
  console.dir(andThose);
  console.log(longString, trailing, why, iWish, vizzini, re);
  return;
}
// TODO: more examples

If it is working, you have just created your typescript project with a linter. It is a good thing to configure your code editor to perform npm run fix with every save.

Enjoy TypeScript coding.

The post How to create a new TypeScript project first appeared on Hard Wired.