TypeScript SDK Development: A 5-year-old could follow this step-by-step ~ Part 1, our first MVP

Helloooooooo!

Hope you're doing great! This is SMY! 👋 Let's Jump right in 🚀

Part 2: https://dev.to/smy/typescript-sdk-development-a-5-year-old-could-follow-this-step-by-step-part-2-folder-structure-integrating-api-3p2e

Part 3: https://dev.to/smy/typescript-sdk-development-a-5-year-old-could-follow-this-step-by-step-part-3-making-test-apps-4n3c

Part 4: https://dev.to/smy/typescript-sdk-development-a-5-year-old-could-follow-this-step-by-step-part-4-publishing-to-npm-48o6

Part 5: https://dev.to/smy/typescript-sdk-development-a-5-year-old-could-follow-this-step-by-step-part-5-cdn-for-browsers-237a

Source Code: https://github.com/smyaseen/typescript-sdk-template

Contents:

• ⚡ Some Background of SDK Development

• ⚡ Developing and running our first version

1️⃣ What -

SDK (sometimes also known as library) serves as a plug-in in applications to derive additional features from the technology.

2️⃣ Why -

SDK development with TypeScript offers reliability over a long time due to type safety, and maintenance in the long run.

3️⃣ How -

The fundamental steps required to build the SDK are the following:

1. Initializing the project with the right workflow settings.

2. Choosing Bundler, and understanding its purpose.

3. Understanding ESM, CJS, IIFE UMD to run SDK on different environments.

4. Publishing as a library on NPM, semantic versioning and License.

5. NPM for SPAs and CDN for Browsers.

In Part 1, we are going to build our first basic SDK to get a basic understanding.

Step 1: Initialize Project

Run the following command to set the project in a new folder:

npm init -y

"-y" defaults to yes to all the follow-up prompts. You can change it later in the Package.json like author, license, version etc.

Head over to package.json and add type: module to work with the latest EcmaScript Module system (ESM).

Your package.json should look like the following:

 {
  "name": "ts-lib",
  "version": "1.0.0",
  "description": "SDK development tutorial",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "type": "module",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Step 2: Install fundamental dev libraries

1. TypeScript

2. @types/node - to work TypeScript with NodeJS

3. tsup - The simplest and fastest way to bundle your TypeScript libraries
   

npm i typescript @types/node tsup -D

Step 3: Setup tsconfig for TypeScript settings

Create a tsconfig.json file at the root of the project

touch tsconfig.json

Head over to the file and paste the following configuration:

{
  "compilerOptions": {
    /* Base Options: */
    "esModuleInterop": true,
    "allowImportingTsExtensions": true,
    "emitDeclarationOnly": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "verbatimModuleSyntax": true,

    /* Strictness */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,

    /* If transpiling with TypeScript: */
    "module": "NodeNext",
    "sourceMap": true,
    "outDir": "dist",

    /* AND if you're building for a library: */
    "declaration": true,

    /* If your code runs in the DOM: */
    "lib": ["es2022", "dom", "dom.iterable"]
  },
  "exclude": ["node_modules", "dist"]
}

You can hover over each property to learn more in-depth about it.

The fundamental thing to understand here is:

    "module": "NodeNext",
    "sourceMap": true,
    "outDir": "dist",

1. " NodeNext is the right option for authoring libraries, because it prevents you from emitting ESM with module specifiers that only work in bundlers but will crash in Node.js. When writing conventional code, using common sense, and relying on high-quality dependencies, its output is usually highly compatible with bundlers and other runtimes". You can learn more about it here https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

2. sourceMap - Enables the generation of source files. These files allow debuggers and other tools to display the original TypeScript source code when working with the emitted JavaScript files. You can disable it for production.

3. outDir - Specify an output folder for all emitted files.
   

  /* AND if you're building for a library: */
    "declaration": true,

    /* If your code runs in the DOM: */
    "lib": ["es2022", "dom", "dom.iterable"]

1. declaration - Generate .d.ts files from TypeScript and JavaScript files in your project.

2. lib - Specify a set of bundled library declaration files that describe the target runtime environment. es2022 is for node applications like React, and dom & dom.iterable for running the library in the browser.

Step 4: Write our first code

Create a index.ts file, and write the following basic code

const add = (a: number, b: number): number => a + b;
const subtract = (a: number, b: number): number => a - b;

export { add, subtract };

Build our first code:

tsup ./index.ts

You may now see we have a dist folder with an output file index.cjs

Let's integrate and run our first SDK!

Create a app.js file, and paste the following code:

import { add, subtract } from "./dist/index.cjs";

console.log(add(1, 2));
console.log(subtract(2, 1));

Since we haven't published our SDK, we are directly linking with local build.

Now run our first app

node app.js

You should see the following output

3
1

Congrats 🎉🥳 🚀🚀🚀 We Just Built and Ran our first SDK!

Wrapping Up:

We Just completed the basic steps to build and run our first SDK. Head over to Part 2, where we will build a basic folder structure, and integrate an External API endpoint 🚀

.....

Now you're equipped with knowledge to build your own SDK. Happy coding! 🚀

That's it, folks! hope it was a good read for you. Thank you! ✨

👉 Follow me

GitHub

LinkedIn