DEV Community: Aro

Setup a simple Node Typescript Project in 5 minutes - 2024 edition

Aro — Tue, 07 May 2024 12:39:07 +0000

This article was originally posted on my blog

We are in May 2024, I just want to setup a simple Node project. But it’s so freaking hard. I tried every blog post in google’s first page results. None are working, at least as I want it.

Why is it so ducking 🦆 hard to have a Node development setup that is in Typescript and uses ESM !?

So, after a frustrating couple of hours of searching and tweaking, I finally found a way to have a simple setup that just works (for now)

Requirements

So as I said, I want to it to use

Typescript
ESM - import and export
Node 20 (this is a LTS version)

That’s literally it.

The solution

Dependencies

First of all, install all the dependencies

pnpm i -D typescript @types/node tsx tsc-alias rimraf

typescript and @types/node : those are the usual packages needed for every TS project. Nothing special here
tsx : for typescript code execution. It is a replacement of ts-node. As the latter does not work in Node 20
tsc-alias : for replacing alias paths after typescript compilation
rimraf : a simple utility for deleting the dist folder before each compilation

DISCLAIMER: I am NOT an experienced Node developer. I mostly work in frontend development with React. This is just a simple node setup that works for me. I am sure it’s possible to make it even simpler without relying on third party dependencies like tsx and tsc-alias.. But I am just not in the mood of digging further 🥲

tsconfig.json

For the tsconfig file, I use the config from this TotalTypescript blog post.

NOTE : I did try to follow this blog post steps. But I didn’t like to have two dev scripts that run concurrently. At the time, I was playing with some AI stuff and was trying to console.log the stream response from the AI, and it just didn’t get displayed to the console. I suspect this concurrent run of two dev scripts.

{
  "compilerOptions": {
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "moduleResolution": "NodeNext",
    "module": "NodeNext",
    "outDir": "dist",
    "sourceMap": true,
    "lib": ["es2022"],

    /* I add this part because I want absolute imports */
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"]
    }
  }
}

package.json

{
  "type": "module",
  "scripts": {
    "build": "rimraf dist && tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
    "dev": "NODE_ENV=development tsx --watch --env-file=.env src/index.ts",
    "start": "node --env-file=.env dist/index.js"
  },
  "engines": {
    "node": "20"
  }
}

type:"module" : tells Node to use ESM
build : builds the project with tsc and replaces alias paths with tsc-alias
dev : here lies the magic, tsx just works and can be used as a replacement of node. All node arguments can be used with tsx and that is awesome
start : runs the compiled files with Node
--env-file : loads environment variables, so no need of dotenv anymore
--watch : watch mode introduced in Node 18

Caveats when importing a file

This is the last thing you want to be aware of. When importing a file, you have to suffix the import paths with .js

import { hello } from "src/utils/hello.js";

Conclusion

And that’s it, holy cow I struggled so much just to find this setup. Some of you that are already familiar with tsx may call me a noob 😅 and you are not totally wrong.

I was used to use nodemon and ts-node before but my previous setup don’t work anymore 🤷🏽‍♂️

I think it is not not normal that it’s so hard to setup a modern Node project but also to find the right information to do that, as there are literally no single way of doing this.

But in the end I am happy that I succeed (for now). Thanks for reading, ciao ciao

You can find the complete repo here

This article was originally posted on my blog

Your turn

So what do you think about this setup ? Is there a way to simplify it more ?

Why I love Javascript

Aro — Tue, 23 Jun 2020 23:22:04 +0000

Version française -> Pourquoi j'adore Javascript

I know, I know. Naysayers will tell you that if you love Javascript, you are a person with a bad taste. And that you're not one the true programmers.

You are just another random person who thinks he can be a software developer after attending a bootcamp for 3 months or so - Naysayers

But I really love this language. There is some cool things and tricks in Javascript that I find very interesting and useful. Maybe, I am a person with a bad taste. Maybe. But that's not the question right now.

In this article, I'll try to give you insight or a refresh on some really nice features of Javascript, compared to other programming languages. So let's go.

Destructuring

This one is my favorite. I use it every single day, all the time.

Destructuring syntax allows you to access data inside an object or an array easily and assign them to variables.

Say, you have an object person, with some attributes and a nested object inside it.

const person = {
  fName: "Thomas",
  lName: "Durand",
  age: 25,
  job: {
    title: "Software Developer",
    company: "Renault",
  }
}

Normally if you want to access one or more attributes separately from the object, you would do something like that:

const firstName = person.fName,
const lastName = person.lName,
const job = person.job.title,
// ...

It's not really a convenient way with a big and nested objects. So here comes the destructuring syntax.

It's very simple, it is as if you declare variables. But you include them in curly braces and then asign them the object itself. Ok, less talk, more code..

// with the same object person
const {fName, lName, job} = person;

As you can see, you have to name your variables the same as the person attributes. But don't worry, you can rename them as you want.

const {fName: firstName, lName: lastName, job: profession} = person;

And voilà!

But it is more powerful than that. If you want to access nested objects, you extand the same logic with another curly braces.

const {job: {title, company}} = person;

Now you can just use the variables "title" and "company" directly. And if you want to rename them, again, the logic is the same colon + yourVariableName

const {job: {title: jobTitle, company: companyName}} = person;

Destructuring syntax is especially usefull when you use it when writing functions. It is used a lot in Javascript frameworks like React or Angular.

Instead of doing this:

const myFunction = (person) => {
  const {fName, lName, job: {title, company}} = person;
  // ...
}

You can directly write something like this:

const myFunction = ({fName, lName, job: {title, company}}) => {
  // ...
}

Destructuring syntax are used also with arrays. Below, a quick example for swaping variables with array destructuring:

const myArray = [1,2];
let [a,b] = myArray;
console.log(a); // 1
console.log(b); // 2

[b,a] = [a,b]; // re-assigns a in b and b in a

console.log(a); // 2
console.log(b); // 1

Spread operator

Another cool feature used with objects and arrays. As the name suggests (or not), it spreads the data from inside objects or arrays. For instance, it is very usefull for copying objects or arrays.

Ok, here is the code:

const personA = {
  name: "Doe",
  firstName: "John", 
  age: 25,
}

let personB = {}, personC = {};

// Say we have another person named John Doe but is 50 years old
// To copy some attributes from the already declared personA
// Normally, we write
Object.assign(personB, personA);
personB.age = 50;

// But with the spread operator, we can write something like this
personC = {...personA, age: 50};

And for arrays:

const todos = ["cooking","laundry"];
const tomorrowTodos = ["grocery shopping",...todos, "homework"];
console.log(tomorrowTodos); // ["grocery shopping", "cooking","laundry", "homework"]

And by combining it with the destructuring syntax, we can have elegant syntax like this:

const myArray = [1,2,3,4,5];
const [a, ...rest] = myArray;
console.log(a); // 1
console.log(rest); // [2,3,4,5]

Map, Filter and Reduce

Ok, those 3 are not exclusive to Javascript only. But they are so useful that you have to know how to use them.

Map, Filter and Reduce are array methods and allows you to, respectively:

perform a computation on each element of an array and return a new array
filter an array whose elements respect some condition and return the new filtered array
executes a reducer function on each elements and return one output based on the computation done with the array elements

Each 3 methods takes a callback function, as one of its parameters, to apply to the elements inside the array.

Using those features are a way of doing what is called declarative programming.

It is a style of programming that focuses on the resolution of the problem at hand by declaring the "what to do" instead of the "how to do it" (in contrast with imperative programming.

// Map
// Pluralize words inside an array
const singular = ["pizza", "baggel", "hat"];
const plural = singular.map(word => word + "s");
console.log(plural); // ["pizzas", "baggels", "hats"]

// Filter
// Returns all the even number inside an array
const numbers = [14, 5, 23, 28, 105];
const evenNumbers = numbers.filter(number => number%2 === 0); // returns all the numbers that returns true for the condition number%2===0
console.log(evenNumbers); // [14, 28]

// Reduce
// 1. Simple sum of all the elements in an array
const myArray = [2,3,4,1];
console.log(myArray.reduce((acc, num) => acc + num, 0)) // 10
// acc is the accumulator value and num the current value of the element beign tested
// the second parameter 0 of the reduce is the initial value we want for the accumulator

// 2. Find the common elements accross multiple arrays
function intersection(arrays, ) {
  return [...arguments].reduce((acc,array,i)=>{
    if(i===0){
      acc = [...array];
    } else {
      acc = acc.filter(x=>array.includes(x));
    }
    return acc;
  },[])
}
console.log(intersection([5, 10, 15, 20], [15, 88, 1, 5, 7], [1, 10, 15, 5, 20]));
// [5, 15]

Conclusion

There are far more nice features in Javascript but knowing and using correctly those three concepts will make you stand out from other developers.

That's it pal. I hope you liked the article (my first one). I'll write a lot more Javascript things in the future and more in depth too. For now, let me know what you think of this article.

PS: I'm sorry if I made some English mistakes. It is not my first nor my second language :)