Helloooooooo! Hope you're doing great! This is SMY! 👋 Let's jump right in 🚀 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: Initializing the project with the right workflow settings.
Choosing Bundler, and understanding its purpose.
Understanding ESM, CJS, IIFE UMD to run SDK on different environments.
Publishing as a library on NPM, semantic versioning, and License.
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 the 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 TypeScript
@types/node - to work TypeScript with NodeJS.
tsup - The simplest and fastest way to bundle your TypeScript libraries. COPY 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. COPY 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", " 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/


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.


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"] declaration - Generate .d.ts files from TypeScript and JavaScript files in your project.


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: COPY 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 Helloooooooo! Helloooooooo! Hope you're doing great! This is SMY! 👋 Let's jump right in 🚀 Source Code: https://github.com/smyaseen/typescript-sdk-template https://github.com/smyaseen/typescript-sdk-template https://github.com/smyaseen/typescript-sdk-template Contents: ⚡ Some Background of SDK Development ⚡ Developing and running our first version ⚡ Some Background of SDK Development Some Background of SDK Development ⚡ Developing and running our first version 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: Initializing the project with the right workflow settings. Choosing Bundler, and understanding its purpose. Understanding ESM, CJS, IIFE UMD to run SDK on different environments. Publishing as a library on NPM, semantic versioning, and License. NPM for SPAs and CDN for Browsers. Initializing the project with the right workflow settings. Choosing Bundler, and understanding its purpose. Understanding ESM, CJS, IIFE UMD to run SDK on different environments. Publishing as a library on NPM, semantic versioning, and License. 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 npm init -y "-y" defaults to yes to all the follow-up prompts. You can change it later in the Package.json like the author, license, version, etc. "-y" Head over to package.json , and add type: module to work with the latest EcmaScript Module system (ESM). package.json type: module Your package.json should look like the following: package.json {
  "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"
} {
  "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 TypeScript @types/node - to work TypeScript with NodeJS. tsup - The simplest and fastest way to bundle your TypeScript libraries. TypeScript @types/node - to work TypeScript with NodeJS. @types/node tsup - The simplest and fastest way to bundle your TypeScript libraries. tsup COPY npm i typescript @types/node tsup -D npm i typescript @types/node tsup -D Step 3: Setup tsconfig for TypeScript Settings tsconfig Create a tsconfig.json file at the root of the project. tsconfig.json COPY touch tsconfig.json 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"]
} {
  "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", "module": "NodeNext",
    "sourceMap": true,
    "outDir": "dist", " 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/ 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. outDir - Specify an output folder for all emitted files. " 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/ " 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/ NodeNext only https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/ https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/ 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. 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. sourceMap outDir - Specify an output folder for all emitted files. outDir - Specify an output folder for all emitted files. outDir /* AND if you're building for a library: */
    "declaration": true,

    /* If your code runs in the DOM: */
    "lib": ["es2022", "dom", "dom.iterable"] /* AND if you're building for a library: */
    "declaration": true,

    /* If your code runs in the DOM: */
    "lib": ["es2022", "dom", "dom.iterable"] declaration - Generate .d.ts files from TypeScript and JavaScript files in your project. 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. declaration - Generate .d.ts files from TypeScript and JavaScript files in your project. declaration - Generate .d.ts files from TypeScript and JavaScript files in your project. declaration 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. 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. lib es2022 dom dom.iterable Step 4: Write Our First Code Create a index.ts file, and write the following basic code: index.ts const add = (a: number, b: number): number => a + b;
const subtract = (a: number, b: number): number => a - b;

export { add, subtract }; 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: COPY tsup ./index.ts tsup ./index.ts You may now see we have a dist folder with an output file index.cjs dist index.cjs Let's integrate and run our first SDK! Create a app.js file, and paste the following code: app.js import { add, subtract } from "./dist/index.cjs";

console.log(add(1, 2));
console.log(subtract(2, 1)); 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 node app.js You should see the following output: 3
1 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 GitHub GitHub LinkedIn LinkedIn LinkedIn

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains new, firsthand information uncovered by the writer.

TypeScript SDK Development: A 5-Year-Old Could Follow This Step-By-Step ~ Part 1: Our First MVP

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

4 Ways to Destructure Array in JavaScript & Make Your Code Look Clean

Why Being Likable At Work Matters

Windows Sticky Keys Exploit: The War Veteran That Never Dies

Is ‘bias for action’ making product managers lazier?

Zero People Charged With Online Pirating, Swedish Prosecutor's Office Reports

4 Ways to Destructure Array in JavaScript & Make Your Code Look Clean

Why Being Likable At Work Matters

Windows Sticky Keys Exploit: The War Veteran That Never Dies

Is ‘bias for action’ making product managers lazier?

Zero People Charged With Online Pirating, Swedish Prosecutor's Office Reports

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps