DEV Community: ManuelMartinDev

Typescript 5.0 is here

ManuelMartinDev — Fri, 27 Jan 2023 22:20:46 +0000

Typescript 5.0 is now in beta and comes with some cool new things.

Enums got slightly better
Let's check a sample code

enum Rol {
  USER,
  GUEST,
  ADMIN
}

function changeUserRol(rol:Rol) {

}

changeUserRol(4)

This code would be no problem to Typescript 4.9, however, we crearly see that it's wrong since there is no 4 position on the enum, thankfully Typescript 5 can now detect this and mark it with an error

Let's be honest, enums aren't amazing yet, but this could be the first step

const Generics
Let's look at this sample code

function settings<T>(settings: T[]) {
  function setSetting(setting: T, value: string) {}
  return {
    setSetting,
  };
}

Nothing too fancy here, just a function that takes a generic, use an array of that generic to type a parameter called settings, and return a function that expect that generic type on it's setting param.
Let's call the function now and pass an array of settings

const currentSettings = settings([
  "font-size",
  "font-family",
  "background-color",
]);

now I have access to the function that gives me the chance to upload a specific setting

currentSettings.setSetting("random-setting", "othervalue");

There's something wrong here, we all see that "random-setting" is not part of the settings array that I used before. However Typescript does not detect it as an error, since using the type infer concluded that "setting" is type string, so any string should be valid

Thanks to Typescript 5.0 we now have a way to tell Typescript to use the literal values, we just need to add "const" before the generic, our code would look like this

function settings<const T>(settings: T[]) {
  function setSetting(setting: T, value: string) {}
  return {
    setSetting,
  };
}

const currentSettings = settings([
  "font-size",
  "font-family",
  "background-color",
]);


currentSettings.setSetting("random-setting", "othervalue");

Now Typescript understand that what we are doing is wrong

Thank you Typescript!

Decorators

Decorators were available in Typescript with an experimental flag, but will now be officially part of it.

Decorators are a way to add extra functionality to your classes without having to change the original source code

Let's look at this code:

class User {
  createPost() {
    console.log("Created post");
  }
  createComment() {
    console.log("Created comment");
  }
}

I have a class called User with methods to create posts and comments, if I want both of them to check if the user is authenticated I would need to repeat the logic in both methods, decorators would make this a lot better, let's create one


function isAuth(
  originalMethod: (...args: any[]) => any,
  _context: ClassMemberDecoratorContext
) {
  return function newMethod() {
    if (!auth) {
      return console.log("You need auth");
    }
    originalMethod();
  };
}

a decorator is just a function that receive the originalMethod and the context as arguments, and return the modified method with the added logic, in this case we will only let the original method run if auth is true.

Let's add the decorator to the methods now:

class User {
  @isAuth
  createPost() {
    console.log("Created post");
  }
  @isAuth
  createComment() {
    console.log("Created comment");
  }
}

And that easy we have protected methods!

Typescript is every day better and devs every day happier with it, what a pleasure to be a dev on 2023

Create a custom map/filter/reduce in JavaScript,Python and Ruby

ManuelMartinDev — Thu, 02 Sep 2021 19:42:24 +0000

When I learn a new language I like to create my own map/filter/reduce functions in it because is a great way to test my skills, working with functions,arrays,functions as arguments,etc.

So now I will compare how I would create it in all of them starting with JavaScript


// Map

function myMap(array,callback) {
    newArray=[]
    array.forEach(value => newArray.push(callback(value)))
    return newArray
}

const transformed = myMap(["red","blue","purple"] , (color) => `Color ${color}`)

console.log(transformed)

//Filter

function myFilter(array,callback) {
    newArray=[]
    array.forEach(value => callback(value) && newArray.push(value))
    return newArray
}

const filtered = myFilter([1,4,8,2,10,6] , number => number > 5)

console.log(filtered)

// Reduce

function myReduce(array,callback) {
    let acc = 0
    array.forEach(value => acc = callback(acc,value))
    return acc
}

const reduced = myReduce([4,5,9,10] , (acc,current) => acc + current)

console.log(reduced)

Let's do it in python now

python is pretty much the same, just using lambdas instead arrow functions


# Map

def myMap(list,callback):
    newList=[]
    for item in list:
        newList.append(callback(item))
    return newList

transformed=myMap(["red","blue","purple"],lambda color: "Color " + color)

print(transformed)

#Filter

def myFilter(list,callback):
    newList=[]
    for item in list:
        if callback(item) : newList.append(item)
    return newList

filtered= myFilter([1,4,8,2,10,6],lambda number : number>5)

print(filtered)

#Reduce

def myReduce(list,callback):
    acum=0
    for el in list:
        acum=callback(acum,el)
    return acum

reduced = myReduce([4,5,9,10] , lambda current,actual:current+actual)

print(reduced)

And now Ruby

Ruby is a little bit more different, you pass blocks that act like anonymous functions, arguments are enclosed in | argname |
and they are called inside the function using the yield word



#Map

def myMap(array)
    newarray=[]
    for value in array do
        result=yield(value)
        newarray.push(result)
    end
    return newarray
end

transformed=myMap(["red","blue","purple"]) do | color | "Color #{color} " end

puts transformed.inspect

# Filter

def myFilter(array)
    newarray=[]
    for value in array do
        newarray.push(value) if yield(value)
    end
    return newarray
end

filtered = myFilter([1,4,8,2,10,6]) do | number | number > 5 end

puts filtered.inspect


#Reduce

def myReduce(array)
    acc = 0
    for value in array do
        acc = yield(acc,value)
    end
    return acc
end

reduced = myReduce([4,5,9,10]) do | acc,curr | acc+curr end


puts reduced.inspect

Here is a image that show that all of them have the same result

In general I had a lot of fun learning new things and I think it is such a great thing to do to improve your coding skills.

Typescript: How I passed from find it useless to love it

ManuelMartinDev — Wed, 30 Dec 2020 00:48:04 +0000

I started my journey into programming in the Christmas of two years ago, I wanted to learn JavaScript because we would see it in class and I wanted to be prepared.
So my intention was just give the basics, no frameworks or anything like that, innocent me didn't know that I would fall in love with programming and web development.
The start was hard, it was my first programming language so it was a lot of new concepts in my mind,but with time and patience (I recognize I got frustrated a few times during the way,but the support of my girlfriend made a difference) I could learn it and then after that my ideas of stop there were totally gone.
I wanted more so I went to Nodejs and then React but it had a thing that was getting every time more trendy that was Typescript, I never touched any programming language that wasn't JavaScript so my experience with typed languages was null.
So my mind was like

¿ Why would I need to indicate the types ?
¿ Why would I take that effort and extra time ?

I just couldn't find the sense.
This changed one day that I started to learn Dart for Flutter, I wanted to create a mobile app for a project of school and even though I could have go for React Native I wanted to try a different thing to take some rest of JavaScript.
Dart is the language that made me start to appreciate the benefits of the Typed languages even do not being strongly typed It was perfect for me since I was doing it because I was having a more comfortable experience programming.
Then I did myself the magical question that started the trip that ended with me here writing this.
¿Why do not give a chance to Typescript?
And oh boy, It was like discover the fire.
I started using Typescript in my Node-Express Projects and it felt awesome, in the client side I took more time to give the Jump, but now I can say that both my Node and React code is written in Typescript and I don't have any regrets.
With this I don't want to say that Typescript is a obligatory thing and you are outdated and not a good programmer if you are still using JavaScript, not at all.
I want to share my experience so maybe someone read this and get the motivation necessary to give a try and maybe he finds as useful as I did , and in case that no, at least you tried a different thing that is always good.

My favorite things of Typescript are:

Detect errors while coding not while running
Autocomplete
You know in every moment what you are doing and with what you are working

So I hope someone find my experience useful and didn't get too bored with this long post

Thank you for read!