DEV Community: buddha lama

BackToBasics:How To Run and Debug TypeScript Scripts with ts-node

buddha lama — Tue, 03 Dec 2024 05:50:57 +0000

Sometimes latest new techs just pile up, and in the process of using them, we tend to forget the basics and foundations. It is good to go back and start from scratch to understand the foundation and basics.

Introduction:

Typescript is an additional layer to JS that adds type safety. It cannot compile on its own. So it needs a separate compiler to compile to JS before running it. tsc is the TS compiler that does that work.
But wait, then what the hell is ts-node?
Okay, till now we know that tsc is a compiler that compiles TS to JS to run the code. Till now there is no Node.js in action. If you want to use TS with Node.js, using tsc does not make sense. What we really want is just code in TS and let node handle everything. So, ts-node does that for us. We setup ts-node, and it will enable us to run Typescript directly in Node. Amazing, right?

`tsc` vs `node-ts`

If we were using tsc, we have to run tsc tsfile.ts command every time and then run the generated JS file.
If we use ts-node, we use ts-node tsfile.ts, and boom it will execute the code.
I am not going to write every step to make a project run with ts-node. I followed this steps form digitalocean. https://www.digitalocean.com/community/tutorials/typescript-running-typescript-ts-node

The steps above in the link did not work out of the box for me, it might happen to you too, so make sure:

You have initialized a "tsconfig.json" file, I did that with npx tsc --init. It just initializes a tsconfig.json file.
If it shows an error related to the --loader flag, use this option "scripts": { "start": "NODE_OPTIONS=\"-r ts-node/register --no-warnings\" node index.ts" } https://www.npmjs.com/package/ts-node#node-flags-and-other-tools

Debugging in vscode

To start debugging, we just need to update the launch.json. I took the code from this gist file.

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "args": ["${relativeFile}"], "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"], "args": ["src/script.ts", "--example", "hello"], "cwd": "${workspaceFolder}", "skipFiles": [ "<node_internals>/**" ], "program": "${workspaceFolder}/index.ts", "outFiles": [ "${workspaceFolder}/**/*.js" ] } ] }.

Alternative

You can use tsx which seems to work out of the box unlike ts-node, which always has some difficulty setting up.
If you are just experimenting and digging up, understanding basics and foundations: make mistakes, give yourself time to learn and grow more.

Some FlashCard questions

I usually make flashcards for active recall. Here are some flashcard questions while doing this blog:

What is TypeScript? How does it differ from JavaScript?
What is the role of the tsc compiler? When is it used?
What is ts-node? How does it differ from tsc?
Why would you use ts-node over tsc during development?
What is the purpose of the tsconfig.json file?
ESModule vs Common JS Module?
In Node.js, what is node_options and what is it used for?
Are the changes made by node_options permanent?
What is the "cross-env" package in Node and why use it even though the same functionality can be achieved using system tools like shell?
Which JS engine is Node based upon?

Happy Coding, Happy Learning 🎉

Delegate Design Pattern in Swift

buddha lama — Wed, 17 Jul 2024 13:00:03 +0000

What is the Delegate Design Pattern?

The Delegate Design Pattern is used when one object needs to use another object to perform a task or action. It's like having a personal assistant – you delegate tasks to them, but you're still in charge.

Why Use It?

The beauty of this pattern lies in its ability to tie objects together for specific tasks while keeping them responsible for different things. It's all about teamwork without losing individual identity.

Key Players: Delegator and Delegate

In this pattern, we have two main characters:

The Delegator: This is the object that sends the signal. Think of it as the boss giving orders.
The Delegate: This is the object that receives the signal and performs the action. It's like the employee carrying out the tasks.

The Secret Sauce: Protocols

Now, here's where it gets interesting. The Delegate Pattern often uses protocols (similar to interfaces in Java). These protocols are like a contract between the Delegator and the Delegate.

Why Protocols?

Loose Coupling:
Protocols help in loosely coupling the objects. This means the Delegator and Delegate aren't tightly bound to each other.
Limited Access:
The Delegator only knows about the methods and properties defined in the protocol. It's like giving someone a to-do list without revealing all your secrets.
Reusability:
Can be used in various scenarios with different delegate implementations.

In Practice

Imagine you're building a quiz app. The main quiz controller (Delegator) doesn't need to know how to calculate scores – it just needs to know that it can ask something else to do it. So, it delegates this task to a score calculator (Delegate) through a protocol.

// Protocol for the Score Calculator Delegate
protocol ScoreCalculatorDelegate {
    func calculateScore(for answers: [String]) -> Int
}

// Quiz Controller (Delegator)
class QuizController {
    var delegate: ScoreCalculatorDelegate?
    private let correctAnswers = ["A", "B", "C"]

    func runQuiz() {
        print("Welcome to the Quiz! Please answer A, B, or C for each question.")
        var userAnswers: [String] = []

        for i in 1...3 {
            print("Question \(i): What's your answer?")
            if let answer = readLine() {
                userAnswers.append(answer.uppercased())
            }
        }

        if let score = delegate?.calculateScore(for: userAnswers) {
            print("Quiz completed! Your score is: \(score) out of 3")
        } else {
            print("Quiz completed, but score couldn't be calculated.")
        }
    }
}

// Score Calculator (Delegate)
class SimpleScoreCalculator: ScoreCalculatorDelegate {
    func calculateScore(for answers: [String]) -> Int {
        let correctAnswers = ["A", "B", "C"]
        return zip(answers, correctAnswers).filter { $0 == $1 }.count
    }
}

// Usage
let quizController = QuizController()
let scoreCalculator = SimpleScoreCalculator()
quizController.delegate = scoreCalculator

quizController.runQuiz()

In this example, QuizController doesn't care how the score is calculated. It just knows it can ask its delegate to do it.
Wrapping Up
The Delegate Design Pattern is a fantastic way to keep your code organized, flexible, and maintainable. By separating responsibilities and using protocols, you create a system where objects can work together harmoniously without losing their individual purposes.

JS Function Factories

buddha lama — Thu, 21 Sep 2023 16:28:59 +0000

A function factory is a design pattern that includes creating and returning a function from another function.

Closure is used to achieve this pattern. Function factory can encapsulate configurations within functions. It is used to create multiple functions with similar behaviors.

Example:

function createOperation(operation){

  return function(a,b){
    switch (operation){
        case 'add': return a+b;
      case 'minus': return  a-b;
      default:
      return NaN;
    }
  }

}
const addition = createOperation('add');
console.log("addition:",addition(1,2))


const expo = createOperation('exponent');
console.log("Exponent:",expo(1,2))

Output:

this in JS

buddha lama — Tue, 19 Sep 2023 06:45:42 +0000

Back to basics: `this` keyword

this represents the current execution context.
this may vary based on different scenarios

Global Context

this in the global context represents the window [browser environment]

Function Context

In a regular function, this varies based on how the function is invoked.

Note: this behaves differently for arrow functions

Function as method: If the function is invoked as a method of an object. this represents the object containing the function
Function as Standalone function: this represents the global context if the strict-mode is not enabled, in other case the this is undefined

const obj = {
  name: "John Doe",
  sayHello: function () {
    console.log("The name is " + this.name);
  }
};

//function as method
obj.sayHello(); // The name is John Doe

//function as standalone function
let sayHelloFn = obj.sayHello;
sayHelloFn(); // this is undefined and throws TypeError: Cannot read properties

Constructor Context

When a function is constructed using a new keyword. this represents the object that is newly created.

/**
 * Construction Context: 
 * this keyword represents the newly created object
 */
function Person(gender) {
  this.gender = gender;
}
const person = new Person("male");
console.log(person.gender); //male

Event Handler

In case of the event handler, this keyword represents the element of the DOM that triggers the event

/**
 * Event handler
 */
const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // The button element that was clicked
});

Arrow Function

Unlike the regular functions, the this value is not determined by how the function is invoked. Rather, this is determined by the context in which the function is defined. It is lexically scoped.

This difference that makes the arrow function useful is when you want to maintain this from the surrounding code.

const obj = {
  name: "OJ",
  printName() {
    console.log(this.name);
  },
  normalFunction: function () {
    return this;
  },
  arrowFunction: () => {
    return this;
  }
};

console.log(obj.printName());

/**
 * Normal function
 *  **/
//method is invoked
console.log("normalFunction:", obj.normalFunction()); // obj
//standalone function in invoked
const extNormalFunction = obj.normalFunction;
console.log("extNormalFunction:", extNormalFunction()); //global object when strict mode is off, otherwise undefined

/**
 * Arrow Function
 */
console.log("arrowFunction:", obj.arrowFunction()); //global/window object
const extArrowFunction = obj.arrowFunction;
console.log("extArrowFunction:", extArrowFunction()); //global/window object