How To Set-Up A Simple Typescript Application In A Nodejs Environment

Good day, friend! I hope you are doing great and having a wonderful time on your coding journey.

In this blog post, we will discuss how to set up a simple TypeScript application and perform the basic configuration needed to run it successfully.

So let’s get started ….

Why use typescript:

TypeScript is favored by developers for its ability to add static typing to JavaScript, which helps catch errors early in the development process and improves code reliability. It enhances IDE support with better autocompletion, refactoring tools, and code navigation. This makes it particularly useful for large-scale projects, as it aids in managing complex codebases and maintaining code quality. Additionally, TypeScript supports modern JavaScript features and can compile code to ensure compatibility with various environments, making it a robust choice for both current and future-proof development.

Let’s dive into the steps to build a TypeScript project.

Pre-requisites:

• Ensure you have installed Nodejs in your device, you can use this link to install Nodejs
• Install typescript through running this command: npm install -g typescript

1. Open your device terminal and let’s create a new Node project with this command:

mkdir typescript_tut

2. Next, lets initialize node in our project, open your project in your favorite IDE and run this command on the terminal:

npm init --y

This will initialize the newly created project with Node and create a new file package.json

3. Lets also initialize TypeScript into the project by running this command:

tsc --init

This will create a tsconfig.json file for the TypeScript configurations

4. Next, we will create a folder src and then create a file inside it called index.ts

NOTE: when creating a Typescript file, the extension is .ts

5. Next, lets configure the TypeScript project. Go to the tsconfig.json and adjust/edit it to look like this:

{
  "compilerOptions": {
    "target": "ES2022",          /* Specify ECMAScript target version */
    "module": "commonjs",        /* Specify module code generation */
    "rootDir": "./src",          /* Specify the root directory of input files */
    "outDir": "./dist",          /* Redirect output structure to the directory */
    "strict": true,              /* Enable all strict type-checking options */
    "esModuleInterop": true,     /* Enables emit interoperability between CommonJS and ES Modules */
    "skipLibCheck": true         /* Skip type checking of all declaration files (*.d.ts) */
  }
}

Note: This setup provides basic configuration, but you can still customize it according to your project specifications.

6. We will also configure the package.json files, so inside the script object add this command:

"start": "tsc && node dist/index.js"

So, what this does is, when you run your application it first compiles the typescript then run the javascript application

NOTE: tsc command compiles the TypeScript code to JavaScript and then output the result

7. Now that we have configured our application to how we want it, next we will write a little code to see how the whole operation works.
Add this simple code snippet inside the index.ts file you created in src folder.

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

console.log(addNumber(5, 10))

This is just a simple function that adds two values. Originally browsers don’t run TypeScript files directly, they only understand JavaScript. So therefore we will need to compile the TypeScript to JavaScript.

8. Next, we need to run this command on the terminal:

npm run start

This command will compile TypeScript and also run JavaScript due to the configuration we did on the package.json file.

By following these steps, your application will generate a dist/index.js file where the compiled JavaScript code is located.

Following this tutorial, you will have a working project that looks like this:

Congratulations, you have successfully created a TypeScript application in a Nodejs environment.

What’s next:

Moving forward with this TypeScript series, we will be treating more advance topics like installing types packages, creating API’s, connecting to the database and deploying our project.

Show some love by ❤💛🧡💙❤
✅liking
💌subscribing
🚶‍♂️following

Thank you 🎉