DEV Community: 𝙴𝚣𝚎𝚔𝚒𝚎𝚕

Why you should stick to one Code editor

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Mon, 14 Jul 2025 08:13:18 +0000

Editor Fluency

Yes, its editor fluency. The speed at which a developer converts a well thought solution into the editor.

It also involves how well you use the editor to debug and run common tasks on a codebase.

I am not for JetBrains, or VS Code or Cursor. All I am implying here is; Whatever code editor you find yourself using, stick to it for a very long time.

A code editor has something called key bindings (keyboard shortcuts). The good part about key bindings is that it helps to speed up common tasks. The not so good part about them is that they take a lot of time to get used to.

Achieving editor fluency is paramount to a fast and enjoyable coding session. It also helps a lot with refactoring, eliminating repetition and improving productivity.

So how can you improve your productivity with the editor you are using?

Stick to only one editor when learning how to code or when building projects.
Begin to learn and use keyboard shortcuts in your editor to achieve results faster. You might take a productivity hit, but it will help on the long run.
Discover more ways to improve your productivity in your editor.
Read the editor documentation and also stay on top of new updates made to the code editor.

✨Meta Programming Guide.

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Sat, 03 May 2025 11:13:12 +0000

You want to learn Meta-programming, or you don't know what Meta-programming is. In this post, I will a give a brief guide into learning the concept

Meta programming is writing programs that treats other programs as data. It's derived from the word "meta," which refers to a self-referential, higher-order form of an object.

Most libraries and development tools use Meta programming as a development concept. Meta programming is a common term for most modern programming languages.

Though you may never have to use the concept in application code, it is a good way of understanding how libraries work under the hood. It can also be useful if you are building a framework for yourself or your team.

Here are some things to note about meta programming though.

1) Different languages have very different ways of handling meta-programming. For example, Python's way of handling the concept type.__prepare__() is different from JavaScript's way of handling it new Proxy ().

2) Metaprogramming comes with performance overhead. it brings in a form of flexibility in some languages that are rather rigid by structure.

For example, in Java, you can't set attributes for classes if the attributes are not declared with the class. With the Reflection API that's possible.

Java's speed is as a result of its rigidity and Meta-programming compromises that.

3) They need a rather deep knowledge of how the language works. I mean knowledge deeper than syntax, like runtime execution process and context management. So, it's generally advised to learn it in your preferred language.

4) They are easier in Object Oriented Programming languages than in other programming paradigms. Meta-programming is always included with the concepts of Classes, Types and Objects.

Libraries like Spring Boot, Svelte, Django, SQL-Alchemy all use meta programming in their codebases. Learning it will give you a significant advantage over other developers.

CSS Isn't Enough: Mastering the Design Principles That Make Websites Shine

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Mon, 24 Mar 2025 08:38:26 +0000

Have you ever found yourself struggling to create visually appealing webpages, despite your growing CSS knowledge? The issue often lies not in your CSS skills, but in your understanding of design principles. As a front-end web developer, developing a keen eye for basic design is crucial. This post offers practical tips to guide you when styling your websites with CSS.

Limit your color palette: Aim for a primary, secondary, and tertiary color scheme, with an optional accent. Use CSS variables to maintain a DRY codebase.
Leverage HSL for Dynamic Color Schemes: When selecting your primary colors, consider using the HSL (Hue, Saturation, Luminance) color model. HSL offers a flexible way to manipulate colors. Hue ranges from 0 to 360, while saturation and luminance range from 0 to 100.

Tip

For a dark color like hsl(219, 80%, 10%), its light mode (or inverted)
equivalent can be easily calculated as hsl(219, 80%, 90%). This simple
calculation, hsl(hue, saturation, (100 - luminance)%), is particularly
useful for implementing dark/light mode toggles or creating color
variations.

Experiment with adjusting the luminance value to create shades and tints of your chosen hue, maintaining consistent saturation.

Adopt a single-column approach for mobile responsiveness: A one-column layout simplifies content consumption and improves overall usability on mobile devices.
Optimize line-height for readability: Employ a reduced line-height for headings and larger text elements, while increasing line-height for body text and long-form articles to enhance legibility.
Prioritize left alignment for extended text blocks: For improved readability, avoid centering text that spans more than two lines. Instead, align text according to the language's writing direction.
Enhance button clarity with bold text: Applying bold formatting to button labels improves visual distinction and user comprehension.
Prioritize font weight over size in card layouts: This creates subtle emphasis within confined spaces.
Leverage flexbox or grid with the gap property for uniform spacing: To achieve consistent spacing between elements within components, prioritize flex or grid with gap over margins. When constructing site layouts, segment the design into major sections and apply flex or grid with gap to distribute whitespace evenly.
Use luminance to establish text prominence: To draw attention to vital text, strategically decrease the luminance of secondary elements. Identify the focal point by considering: "What's the immediate message I want to convey upon a user's initial glance?"

Deconstruct website layouts through browser developer tools: By examining the CSS within the style panel of your browser's dev tools, you can acquire practical insights into layout strategies and CSS best practices.

React vs. Svelte: A Developer's Honest Opinion

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Mon, 17 Mar 2025 19:46:29 +0000

Meme

As a software developer, I have learned and worked with both React and Svelte. Let's explore the pros and cons of React versus Svelte.

React's Strengths

React has been around for a while unlike Svelte which is relatively new. This results in:

A significantly larger ecosystem when working with libraries than Svelte. Finding libraries to achieve specific functionalities in Svelte can be challenging.
React is highly sought after in frontend development roles.

Svelte's Strengths

Svelte is much easier and fun to use than React which means that

You can get from an idea to a working prototype faster in Svelte than in React (This makes it useful for backend developers)
Working with the DOM is easier in Svelte thanks to element bindings unlike in React with the cumbersome useRef hook
Svelte is much faster since it has a compiler.

In conclusion, While React is a staple in the industry, I find Svelte's simplicity and speed to be a refreshing and efficient development experience.

What are your thoughts on React and Svelte?⭐

How to properly learn CSS

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Thu, 06 Mar 2025 10:56:14 +0000

Meme

Don't replicate entire websites first: Replicate components first. When starting out with CSS, it's better to start by replicating UI components such as navbars, modals and testimonial cards to get a understanding of basic CSS concepts. Replicating entire websites as a beginner can be daunting at first. Once you've created a level of proficiency, i.e, after learning flexbox and grid. You can now start replicating entire websites.
Follow a curriculum: Websites like web.dev and w3schools offer a detailed course on CSS (I personally prefer web.dev). Following these courses and practicing the examples demonstrated can help to gain a basic understanding of basic CSS concepts before moving on to the more advanced ones, ensuring you don't miss any important concepts.
Understand CSS terms and terminologies: Terms like writing-direction, main axis in flexbox, stacking context are among the many useful terms to learn in CSS. Understanding them are very important especially when learning more advanced CSS concepts. Trust me, they help.
Inspect Websites: Go to your browser's developer tools and navigate to the styles panel. Choose a website you admire or one that sparks your curiosity. Observe how the webpage's elements are styled. You'll gain valuable insights (layout techniques, responsive design) into real-world CSS implementation and discover techniques you can apply to your own projects.
Ask AI: What is the clamp() function in CSS?, what does max-inline-size property do in CSS?. AI is like that patient friend that can take all of your seemingly silly questions. By asking clear and specific questions, you can get the answers you need. For example, try asking: 'Explain stacking context in css like i'm a 5 year old child.'.

Bonus Tip

Tailwind is not a CSS replacement. What tailwind essentially does is to reduce the reliance on writing custom CSS files, it does not replace the need for core CSS knowledge. A strong foundation in CSS is still essential when working with Tailwind.

Do you have any CSS learning tips that have worked for you? Or perhaps you have a different perspective on the tips shared above? We'd love to hear from you! Share your thoughts in the comments below.

Native HTML Dialogs

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Fri, 31 Jan 2025 02:38:24 +0000

Native HTML dialogs have been around for a while eliminating the need to rely completely on JavaScript to create pop-up modals and dialogs.

A dialog is made up of three html elements; a open button (or event), the dialog element itself, and a close button (or event),

Dialog opening and closing are basic DOM methods therefore they can be invoked within event handlers

the HTMLDialogElement which is obtained from the document.getElementByTagName('dialog') or any other similar query method has two main methods which can be invoked;

The showModal() method opens the dialog and displays it on the screen.
The close() method closes the dialog (as you would expect).

 <dialog id="dialog">
       <h1>This is a dialog</h1>
     <button onclick="document.getElementById('dialog').close()">
     Close Dialog
     </button>
</dialog>

    <button onclick="document.getElementById('dialog').showModal()">
       Open Dialog
    </button>

Initially, a dialog element is not presented on the browser page, so the showModal() method needs to be invoked before the dialog is visible.

Additionally (for CSS), dialog elements also have a ::backdrop pseudo-element which represents and styles the background of the dialog.

It is a common practice to set the background color (of the dialog::backdrop element) to a dark-grey-black colour with a medium-high transparency to increase readability and prevent obstruction from underlying content..

dialog::backdrop {
    background-color: #21212150;
}

Even though dialogs are block elements, they do (and should) not respect the position of other elements. (You would want them at the center of the page).

Svelte

In Svelte, there is a feature called element binding. This feature uses the bind:this={variable} construct to bind an html element to a variable (the variable is undefined until the element is mounted), which is more convenient (and live).

<script lang="ts">
    let dialog: HTMLDialogElement;
</script>

<dialog bind:this={dialog}>
     <h1>This is a dialog</h1>
     <button onclick={() => {dialog.close()}}>
     Close Dialog
     </button>
</dialog>

    <button onclick={() => {dialog.showModal()}}>
       Open Dialog
    </button>

We are using typescript annotations and we used it to automatically initialize the type of dialog as HTMLDialogElement

The functions in the onclick attribute of the open and close buttons, opens and closes the dialog with the appropriate Vanilla DOM methods.

If you have any additional questions or suggestions on how native html dialogs might be useful, please mention them in the comments below 🌟

Choosing the Right Programming Language for your backend

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Tue, 21 Jan 2025 03:05:05 +0000

When it comes to frontend development, every developer knows there's one language to rule them all: JavaScript (HTML and CSS are not programming languages). But when it comes to building backend systems, there are several languages efficient enough to get the job done.

In this relatively short post, I aim to suggest the best language to learn for a particular subset of backend systems, considering factors like scalability, security, and concurrency. That said:

This advice is primarily based on trends in existing organizations, so there may be objections. If you have any, feel free to share them in the comments.

Java

If you're building a backend system where scalability and resilience are critical, I recommend using Java. These factors are why Java is widely adopted in large-scale enterprise systems. It has been thoroughly battle-tested, powering large systems for companies like Amazon, Google, and Spotify (serving millions of users daily).

Python

If you're building backend systems that need to integrate well with AI, data processing, or machine learning (such as recommendation systems or data collection services), I suggest using Python.

Among the three main backend frameworks:

Django: Best for enterprise adoption and scalability.
Flask: Offers better integration with external libraries and tools (like TensorFlow and Matplotlib) compared to Django.
FastAPI: Ideal for microservices and distributed systems due to its speed and support for asynchronous programming.

If you're a data scientist looking to create web applications, consider trying out Streamlit, which simplifies the process.

JavaScript/TypeScript

If you're building systems where the frontend and backend are closely coupled, TypeScript is a great option. Additionally, if you need to build and deploy something quickly (like an MVP), frameworks like Next.js, Astro, or SvelteKit are excellent choices.

Frontend web developers often lean toward this option due to their familiarity with JavaScript/TypeScript from building frontend systems.

C-Sharp

If you're building systems where security is a top priority, consider using C#. Financial applications and banking systems commonly rely on C# for their backends due to its robust security features, such as secure type safety and a wealth of libraries for cryptographic operations.

Rust/Go

Go: Ideal for scalable microservices systems thanks to its efficient concurrency model and simplicity.
Rust: Best suited for systems requiring low-level control and where performance and memory safety are critical.

If you're new to backend web development and unsure which language to choose, I hope this post provides some guidance.

All you need to know about Streams

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Sun, 05 Jan 2025 14:38:20 +0000

What is a stream?

A Stream is a collection of potentially unlimited data made available over time. It can be thought of as a conveyor belt with data pieces available on it. Streams are essentially important in computing and programming as a whole. For instance;

Data which is transported over a network is usually streamed from the server to the client.
Reading from and writing to the console (standard output and input) also occur in stream interfaces.
Writing to files occur in stream interfaces
Linux system commands such as grep and sed have stream interfaces for efficient operations. (sed means stream editor)
There is the word 'stream' in Video Streaming

So what does this mean to us as developers? Basically every reading and writing in the computer system occur in stream interfaces i.e. every external interface that your program interacts with will likely pull or push data in chunks rather than in a whole.

Understanding streams is vital to building memory efficient systems which maximize performance and can scale easily

Stream Terminologies

The way programming languages work around streams is that data comes in through the standard input, get processed and is returned through the output stream, but, weirdly enough, there is also a third stream called the error stream which is handled separately for logging and debugging purposes. Also;

Flushing a stream means to make sure that data is already in its destination.
Closing a stream means to release every data in the stream to its destination.
Piping actually means converting the output stream of an operation into the input stream of another operation. (mostly used in Linux commands). For example

ps axwww | grep -E "code"

the ps commands returns an output stream containing all the current running processes in the computer system. The pipe (|) character however, passes the output stream of the initial operation into the input stream of the grep command, in which then the "code" filter is applied and then the result is then written to the standard output (console).

Streams in Different Programming Languages

I took some time to observe how 4 of the most programming languages approached streams; Python, JavaScript, Java and C#. I also focused on console as well as file interfaces and, well, one of them was rather different.

Java

The System.out field of the System class just represents the standard output stream (console stream) and the System.in corresponds to the standard input stream and System.err corresponds to the standard error stream.

public static void main(String[] args){
    System.out.println("Hello World")
}

For file interfaces however, Java uses the Java.io.FileWriter class or Java.io.FileReader class to read and write to files. They both inherit from the OutputStreamWriter and the InputStreamReader respectively which proves that Java works in streams.

Trust me the Object inheritance hierarchy is confusing. You can check the docs for more info

Python

Python, most used language of 2024.

I somehow felt betrayed when I found out that the print and input functions are wrappers over the sys.stdout.write() and sys.stdin.read() methods respectively. One thing to note here is that they are both similar to the file.read() and file.write() functions which are methods of the io.TextIOWrapper class which is basically a class for interacting with streams.

Basically, sys.stdout and sys.stdin are file objects which are file-like objects or streams.

C-sharp

The Console.Write() method writes a "text representation of an object to the standard output" using the format string. When it comes to files, C# gets a little upfront by using a StreamWriter class which then writes to the output stream (a file)

JavaScript (Node JS)

Most programming languages by default deal with streams as blocking synchronous operations, but JavaScript again proves to be different by making stream operations non-blocking asynchronous operations.

const {readFile} = require("fs")

function displayContent (text, error){
    if (error){
        throw error
    }
    else {
        console.log(text)
    }
}

readFile("filename.ext", "utf-8", displayContent)

That is why most nodejs functions involve a callback argument function.

Basically what happens is that when the reading is complete, the callback (displayContent) function is called. Until then, Node JS does things that are worth its time. It does have advantages; improved performance and scalability compared to other programming language implementations.

But if you still find it awkward, you could use the readFileSync or operationSync (notice the 'Sync') to read files synchronously making it a blocking operation.

const {readFileSync} = require("fs")

const text = readFileSync("filename.ext", "utf-8")
console.log(text)

Also console.log is a fine wrapper over the process.stdout.write method.

In JavaScript however, I mostly dealt with file or console streams and not network streams. Network streams in Node JS involves event driven programming which is the weirdest implementation of them all.

Annotating Functions in Python

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Thu, 26 Dec 2024 04:19:37 +0000

I just recently posted a blog about Annotating functions in Typescript. I just finished doing a bit of a study and understood more on how to annotate functions in Python and this blog is going to be all about annotating Python functions with similar examples to the last blog.

You can validate your type annotations in Visual Studio Code by >setting python.analysis.typeCheckingMode to one of basic, standard, >strict,. basic and standard options doesn't necessarily make sure >you annotate your functions and variables but strict does.

Function Values

This might shock you but you can return functions and pass functions as values in Python. Callback functions are actually annotated using the Callable type which is written like this;

Callable[[argtype1, argtype2, argtype3], returnType]

For instance, a function length(text: str) -> int will be annotated as Callable[[str], int]

For example;

This function in JavaScript

function multiplier(factor){
    return value => factor * value
}

const n = multiplier(6)
n(8) // 48

can be written like this in Python

def multiplier(factor):
    def inner(value):
        return value * factor
    return inner     

n = multiplier(6)
n(8) #48

We can create a TypeAlias called number which is a Union (literally) of both an int and a float like;

from typing import TypeAlias, Union

number: TypeAlias = Union[int, float]

To approach the parameters as JavaScript numbers.

So therefore, to annotate this function, we have;

def multiplier(factor: number) -> Callable[[number], number]:
    def inner(value: number) -> inner:
        return value * factor
    return inner

a = multiplier(4.5)
a(3) #13.5

Generic functions

The classic generic function example is

def pick(array, index):
    return array[index]

pick([1,2,3], 2) #3

Using TypeVar we can now create generic verbose (more verbose than typescript).

from typing import TypeVar

T = TypeVar("T") # the argument and the name of the variable should be the same

so that we have

from typing import TypeVar, Sequence

def pick(array: Sequence[T], index: int) -> T:
    return array[index]

print(pick([1,2,3,4], 2))

So what about a custom myMap function that acts like map in JavaScript. such that we have;

Remember: map() in Python returns an Iterable type not a List type

def myMap(array, fn):
    return map(fn, array)

def twice(n): return n * 2
print(myMap([1,2,3], twice))

We can use a mixture of Callable and TypeVar types to annotate this function. Observe...

from typing import TypeVar, Iterable, Callable

Input = TypeVar("Input")  # Input and "Input" must be the same
Output = TypeVar("Output")

def myMap(array: Iterable[Input], fn: Callable[[Input], Output]) -> Iterable[Output]:
    return map(fn, array)

def twice(n: int) -> int: return n * 2
print(myMap([1,2,3], twice))

or we can alias the Callable function

from typing import TypeVar, Iterable, Callable

Input = TypeVar("Input")
Output = TypeVar("Output")

MappableFunction = Callable[[Input], Output]

def myMap(array: Iterable[Input], fn: MappableFunction[Input, Output]) -> Iterable[Output]:
    return map(fn, array)

Observe that MappableFunction takes those generic types Input and Output and applies them to the context of Callable[[Input], Output].

Take a minute to think of how the myFilter function will be annotated?

Well if you thought of this

from typing import Iterable, TypeVar, Callable

Input = TypeVar("Input")

def myFilter(array: Iterable[Input], fn: Callable[[Input], bool]) -> Iterable[Input]:
    return filter(fn, array)

You're right

Generic Classes

I know I'm not supposed to be talking about class annotation but give me some time to explain generic classes.

If you came from the Typescript-verse, this was how you would define them

class GenericStore<Type>{
    stores: Array<Type> = []

    constructor(){
        this.stores = []
    }

    add(item: Type){
        this.stores.push(item)
    }
}

const g1 = new GenericStore<string>(); //g1.stores: Array<string>
g1.add("Hello") //only string are allowed

But in Python they are rather different and awkward.

First we import the Generic type, then we make them the child of the Generic class

So to recreate this GenericStore class in Python

from typing import Generic, TypeVar
from dataclasses import dataclass

Type = TypeVar("Type")

@dataclass
class GenericStore(Generic[Type]):

    store: list[Type] = []

    def add(self, item: Type) -> None:
        self.store.append(item)

g1 = GenericStore([True, False]) #g1.store: list[bool]
g1.add(False) # only bool is allowed

Why should I learn how to annotate functions in Python?

As I have said in the former blog, It helps in building a much smarter type system which in turn reduces your chances of bugs (especially when using static file checkers like mypy). Also when writing libraries (or SDKs) using a robust type system can improve the productivity of the developer using the library by a margin (mostly because of editor suggestions)

If you have any questions or there are mistakes in this writing, feel free to share them in the comments below ⭐

⭐

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Wed, 18 Dec 2024 16:46:48 +0000

Annotating Functions in Typescript

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 ・ Dec 18 '24

#typescript #javascript #webdev #programming

Annotating Functions in Typescript

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Wed, 18 Dec 2024 16:45:57 +0000

The most basic way of annotating a function in typescript is like this

function add(a: number, b: number): number{
 // logic
}

// or

const add = (a: number, b: number): number => {
    //logic
}

optional parameters are annotated with question marks param? like this

function optional(a: number, b?: number){
    console.log(a)
}

But what about callback functions, or functions where the type of the arguments and the return types are related (in that case, generic).

Function Values

Observe this JavaScript function

function multiplier(factor){
    return value => factor * value
}

so that we can use the function like this;

const n  = multiplier(6)
n(8) // 48

Function values are annotated in typescript like this

(param1: type, param2: type)=> type

// or

const add: (a: number, b: number)=> number = function (a, b){
    return a + b
}

So to annotate the multiplier function, we have

function multiplier(factor: number): (value: number) => number{
    return value => factor * value
}

Your IDE (preferably) VSCode, will automatically infer the type of value (to be number) in the function logic

Generic functions

This function annotation is wrong

function pickFirst(array: Array<T>): T{
    return array[0]
}

Naturally this throws an error that
Cannot find name T

therefore, the format of annotating generic functions is

function fnName <T,U>(param: T): U{
    //logic
}

Observe where the generic names were declared. so, to correctly annotate the function above;

function pickFirst<T>(array: Array<T>): T{
    return array[0]
}

Now that works.

But what about Generic functions that have function parameters.

For instance, we want to annotate a custom map function named myMap which was written like this in Javascript

function myMap(arr, fn){
    rreturn arr.map(fn)
}

We can annotate it like this

function myMap<Input, Output>(arr: Input[], fn: (item: Input, index?: number) => Output): Output[]{
    return arr.map(fn)
}

What we should note in the snippet above is that the fn function takes an item of the same type of the Input array and returns an Output type.

What about the static Array.from() method?

function myFrom<Type>(iterable: Iterable<Type>): Array<Type>{
    // logic
}

or the array.filter() method?

function myFilter<Input>(arr: Input[], fn: (item: Input) => boolean): Input[]{
    return arr.filter(fn)
}

Generic constraints

You can also constrain generic variables to types that have a particular property. For instance,

function pickInnerFirst<T extends {length: number}>(array: Array<T>): T{
    return array[0][0]
}

This function picks the very first element in a 2 dimensional array

This ensures that it only works for arrays and strings (mostly) in such a way that

pickOne([12, 20, 30]) // wont work.

We can also use interfaces

interface Lengthly{
    length: number;
}

function pickInnerFirst<T extends Lengthly>(array: Array<T>): T{
    return array[0][0]
}

Function Interfaces

In case you don't know, Functions are objects and they have properties

const add = (a, b) => a + b

console.log(add.toString()) //(a, b) => a + b

// also
console.log(Object.getPrototypeOf(add) == Function.prototype) //true
console.log(Object.getPrototypeOf(Function.prototype) == Object.prototype) //true

The second example indicated that the add function is a child of Object.prototype (even though its not a direct child) and therefore is an object.

Funny enough, you can attach properties to a function in JavaScript

function shout(fn, value){
    fn(value)
    console.log(fn.description)
} 

function hey(value){
    console.log(value)
}

hey.description = `A function called ${hey.name}` // A

shout(hey, "Hola!!!")

This snippet will return

>> Hola!!!
>> A function called hey

Observe that at A we attached a property called description to the function which can only be possible with objects.

That is to conclude that;

Objects can be described with interfaces (normally). For functions, this is also possible. however, it is only something you should consider when you are adding special properties to your functions.

interface describableFunction{
    (value: string): void; //A
    description: string;
}

At comment A is where we describe the arguments and return types of the function.

So, to annotate the earlier code in typescript,

interface describableFunction{
    (value: string): void;
    description: string;
}

function shout(fn: describableFunction, value: string) { //A
    fn(value)
    console.log(fn.description)
}

function hey(value: string) {
    console.log(value)
}

hey.description = `A function called ${hey.name}`
shout(hey, "Hola!!!")

Observe the way we used the interface in the shout function at A.

Why should I understand how to annotate functions in Typescript?

Well, it helps in building a much smarter type system which in turn reduces your chances of bugs. If you are building a library or a framework, you might have to use some or most of the concepts mentioned here.
If you are just using libraries, these concepts are not really necessary, even though they can give you a much deeper understanding of the libraries you are working with.

If you have any questions or there are mistakes in this writing, feel free to share them in the comments below ⭐

Meme

𝙴𝚣𝚎𝚔𝚒𝚎𝚕 — Fri, 13 Dec 2024 12:45:42 +0000