Helloooooooo! Hope you're doing great! This is SMY! 👋 Let's Jump right in 🚀 Part 2 of our SDK development series is where we will dive into creating a folder structure and integrating an API. Heads up: any attribute or method starting from # is a private field. Private fields are truly private and are not emitted on the console log, d.ts, or elsewhere. Contents: ⚡ Creating a folder strucutre
⚡ Coding an example for fetching users from API Step 1: Creating a folder structure apis - for all external APIs models - for all our interfaces services - for business logic code index.ts - our entry point example-apps - contains our test apps for React, Browser, Node Step 2: Create a HTTP Client In src/services create a HttpClient.service.ts file and paste the following content: export class HttpClient {
  static #baseUrl: string = "https://jsonplaceholder.typicode.com";

  constructor() {}

  async get(endpoint: string) {
    try {
      const response = await fetch(`${HttpClient.#baseUrl}${endpoint}`);
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return await response.json();
    } catch (error) {
      console.error("Error fetching data:", error);
      throw error;
    }
  }
} We have created a basic HTTP Client and using jsonplaceholder as our testing API endpoint. Step 3: Creating a User Model In src/models create a User.model.ts file and paste the following content: export interface User {
  id: number;
  username: string;
  email: string;
} Step 4: Create an API to fetch Users In src/apis create a Users.api.ts file and paste the following content: import type { User } from "../models/User.model.ts";
import { HttpClient } from "../services/HttpClient.service.ts";

export class UsersAPI {
  #httpClient: HttpClient;

  constructor() {
    this.#httpClient = new HttpClient();
  }

  async getUsers(): Promise<User[]> {
    try {
      const users = await this.#httpClient.get("/users");
      return users as User[];
    } catch (error) {
      console.error("Error fetching users:", error);
      throw error;
    }
  }
} Created a basic example of fetching users from an external endpoint. Step 5: Create an Entry Point Inside src/index.ts paste the following content: import { UsersAPI } from "./apis/Users.api.ts";

class SDK {
  static #instance: SDK;
  #usersAPI: UsersAPI;

  constructor() {
    this.#usersAPI = new UsersAPI();
  }

  public static getInstance(): SDK {
    if (!SDK.#instance) {
      SDK.#instance = new SDK();
    }
    return SDK.#instance;
  }

  public fetchUsers() {
    return this.#usersAPI.getUsers();
  }
}

export default SDK.getInstance(); A basic entry point of SDK. This is a Singleton Class to have 1 existence throughout our application. Later useful when initializing with properties like API key once in application. Step 6: Build the SDK Add the following script to your package.json "build": "tsup ./src/index.ts --watch" --watch the command will watch for any changes to the directory and automatically build your SDK. Now run: npm run build Step 7: Create a test Node App In example-apps create a index.js file and paste the following content: import sdk from "../../dist/index.js";

console.log(await sdk.fetchUsers()); Now run the file with node: node index.js Your output should be looking like the following: Congrats 🎉🥳 🚀🚀🚀 We Just Built and Ran our first proper SDK! Wrapping Up: We Just completed the basic steps to build and run our proper SDK. Head over to Part 3, where we will integrate our first test React app, Browser app, Node app, and Legacy Node app 🚀 ..... 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 🚀 Part 2 of our SDK development series is where we will dive into creating a folder structure and integrating an API. Heads up: any attribute or method starting from # is a private field. Private fields are truly private and are not emitted on the console log, d.ts , or elsewhere. # d.ts Contents: ⚡ Creating a folder strucutre ⚡ Coding an example for fetching users from API ⚡ Creating a folder strucutre Creating a folder strucutre ⚡ Coding an example for fetching users from API Coding an example for fetching users from API Step 1: Creating a folder structure apis - for all external APIs apis models - for all our interfaces models services - for business logic code services index.ts - our entry point index.ts example-apps - contains our test apps for React, Browser, Node example-apps Step 2: Create a HTTP Client In src/services create a HttpClient.service.ts file and paste the following content: src/services HttpClient.service.ts export class HttpClient {
  static #baseUrl: string = "https://jsonplaceholder.typicode.com";

  constructor() {}

  async get(endpoint: string) {
    try {
      const response = await fetch(`${HttpClient.#baseUrl}${endpoint}`);
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return await response.json();
    } catch (error) {
      console.error("Error fetching data:", error);
      throw error;
    }
  }
} export class HttpClient {
  static #baseUrl: string = "https://jsonplaceholder.typicode.com";

  constructor() {}

  async get(endpoint: string) {
    try {
      const response = await fetch(`${HttpClient.#baseUrl}${endpoint}`);
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return await response.json();
    } catch (error) {
      console.error("Error fetching data:", error);
      throw error;
    }
  }
} We have created a basic HTTP Client and using jsonplaceholder as our testing API endpoint. jsonplaceholder Step 3: Creating a User Model In src/models create a User.model.ts file and paste the following content: src/models User.model.ts export interface User {
  id: number;
  username: string;
  email: string;
} export interface User {
  id: number;
  username: string;
  email: string;
} Step 4: Create an API to fetch Users In src/apis create a Users.api.ts file and paste the following content: src/apis Users.api.ts import type { User } from "../models/User.model.ts";
import { HttpClient } from "../services/HttpClient.service.ts";

export class UsersAPI {
  #httpClient: HttpClient;

  constructor() {
    this.#httpClient = new HttpClient();
  }

  async getUsers(): Promise<User[]> {
    try {
      const users = await this.#httpClient.get("/users");
      return users as User[];
    } catch (error) {
      console.error("Error fetching users:", error);
      throw error;
    }
  }
} import type { User } from "../models/User.model.ts";
import { HttpClient } from "../services/HttpClient.service.ts";

export class UsersAPI {
  #httpClient: HttpClient;

  constructor() {
    this.#httpClient = new HttpClient();
  }

  async getUsers(): Promise<User[]> {
    try {
      const users = await this.#httpClient.get("/users");
      return users as User[];
    } catch (error) {
      console.error("Error fetching users:", error);
      throw error;
    }
  }
} Created a basic example of fetching users from an external endpoint. Step 5: Create an Entry Point Inside src/index.ts paste the following content: src/index.ts import { UsersAPI } from "./apis/Users.api.ts";

class SDK {
  static #instance: SDK;
  #usersAPI: UsersAPI;

  constructor() {
    this.#usersAPI = new UsersAPI();
  }

  public static getInstance(): SDK {
    if (!SDK.#instance) {
      SDK.#instance = new SDK();
    }
    return SDK.#instance;
  }

  public fetchUsers() {
    return this.#usersAPI.getUsers();
  }
}

export default SDK.getInstance(); import { UsersAPI } from "./apis/Users.api.ts";

class SDK {
  static #instance: SDK;
  #usersAPI: UsersAPI;

  constructor() {
    this.#usersAPI = new UsersAPI();
  }

  public static getInstance(): SDK {
    if (!SDK.#instance) {
      SDK.#instance = new SDK();
    }
    return SDK.#instance;
  }

  public fetchUsers() {
    return this.#usersAPI.getUsers();
  }
}

export default SDK.getInstance(); A basic entry point of SDK. This is a Singleton Class to have 1 existence throughout our application. Later useful when initializing with properties like API key once in application. Step 6: Build the SDK Add the following script to your package.json package.json "build": "tsup ./src/index.ts --watch" "build": "tsup ./src/index.ts --watch" --watch the command will watch for any changes to the directory and automatically build your SDK. --watch Now run: npm run build npm run build Step 7: Create a test Node App In example-apps create a index.js file and paste the following content: example-apps index.js import sdk from "../../dist/index.js";

console.log(await sdk.fetchUsers()); import sdk from "../../dist/index.js";

console.log(await sdk.fetchUsers()); Now run the file with node: node index.js node index.js Your output should be looking like the following: Congrats 🎉🥳 🚀🚀🚀 We Just Built and Ran our first proper SDK! Wrapping Up: We Just completed the basic steps to build and run our proper SDK. Head over to Part 3, where we will integrate our first test React app, Browser app, Node app, and Legacy Node app 🚀 ..... 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 LinkedIn LinkedIn

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

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

A 5-Year-Old Could Follow This TypeScript SDK Development Guide ~ Part 3: Making Test Apps

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

Read My Stories

View my Portfolio

Too Long; Didn't Read

Make resilience your competitive advantage

TypeScript SDK Development: A 5-year-old could follow this step-by-step ~ Part 2, structure & API

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

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

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

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps