User photo

How to setup a typescript project

Typescript is a programming language that is an extension of the JavaScript language. Why? When running JavaScript, you would see errors during runtime. Typescript solves that problem by introducing types, where we can see errors before we even run our program. That is my overview of TypeScript, but I will do an in-depth course later on.

Installing Nodejs

Nodejs is a JavaScript interpreter. In simple terms, in order to run JavaScript we need Nodejs to be installed in our system. You can install Nodejs on the Nodejs website. If you have already installed Nodejs, you can skip this part.

Please note:

When you install Nodejs, you are also installing npm (Node package manager) automatically. It just comes with Nodejs.

# Check node version 
node --version

# Check npm version
npm --version
To check if you have successfully installed Nodejs and npm, run these commands on your terminal separately.
You should get something like this 10.2.0. Yours will be different from mine or the same depending on the version you installed.
If you get an error, it means it was not installed properly. I have placed a resource on the side bar to help you.

Installing typescript globally

To install typescript globally, we are going to use npm. Open your terminal and run the following command:

npm install -g typescript
The -g flag means that this will be installed globally in your PC or laptop.
Please note:

Once you have installed typescript globally, you do not need to install it again. Just use it in every project.

Setting up the environment

In order to use TypeScript, we need to setup our node environment first, why? Nodejs is not familiar with TypeScript, so we need to convert the TypeScript to JavaScript. We are going to prove this as we proceed.

Open up a project folder. Open the folder with your code editor of your choice. Then open the terminal, and run the following command:

npm init -y
This will initialize the environment by creating a file called package.json. We will be using this file to configure our environment. To learn more about this file, check the resources on the side bar.

Proving that Nodejs doesn’t know TypeScript

Create a folder called src and inside that folder create a file called index.ts. Inside the file, write the following code:

console.log(123)

Now to run the file we will use Nodejs with the following command:

node src/index.ts
This should run okay and output 123 on the terminal. So am I wrong? Let us try writing code with typescript:
function add(a: number, b: number) {
    return a + b;
}
 
console.log(add(1, 2))
Now try running this code using npm src/index.ts and see what you will get. An error right? 👀 (If you don’t get an error, I don’t what your PC or laptop is smoking)
Exactly! This is the reason why we need to convert TypeScript to JavaScript because Nodejs doesn't know how to compile typescript.

Converting Typescript to JavaScript

Now that we have our environment setup and we have installed everything we need, let us convert the Typescript to Javascript. In order to convert Typescript to Javascript, use the following command in your terminal:

tsc src/index.ts
After running this command, you should see a index.js file created inside the src folder you created.
The converted JavaScript will look like this:
function add(a, b) {
    return a + b;
}
console.log(add(1, 2));
Now we can run the JavaScript file instead of the Typescript file with the following command in your terminal:
node src/index.js
This should give you an output of 3 in the terminal.
Yeyyy ✨ we now know how to to convert TypeScript to JavaScript and run it.

The problem with the above approach

Every time we make changes to your index.ts we have to convert it to JavaScript manually using tsc src/index.ts. Let us say that we have ten files in the src folder, it will be a pain to manually convert them one-by-one to JavaScript. How do we automate this?

Please note:

As a developer, time is crucial, hence you would want to automate the easy task and focus on building the complex parts.

The better approach

Instead of manually doing the conversion, let us automate it. Let us start by initializing a Typescript configuration file. Why? This will help us with setting up our typescript environment, like where we want to store our converted files and how we want them to be stored, etc. To initialize this typescript config file, run the following command in your terminal:

tsc --init --sourceMap --rootDir src --outDir dist
This will create a file called tsconfig.json in your project folder.
The tsc is a typescript command that we use for anything typescript, just like we would use node for everything node and npm for everything npm
The —init flag, is used to initialize the configuration file that was created.
The —sourceMap allows to create a relationship between the converted JavaScript file and the TypeScript file. This relationship will be stored in a source map file that ends with .map.js
The —rootDir src flag specifies where we will be storing our typescript file, in our case they are found on the src folder.
The —outDir dist flag specifies where will be storing our converted JavaScript file along with their source map, in our case we want to store them in the dist folder.

Now that we have configured our Typescript environment, Let's work on automating the conversion. Remember that package.json file? This is where it will come in handy. Update only this part of the file:

"scripts": {
  "build": "tsc",
  "predev": "npm run build",
  "dev": "node dist/index.js"
},
These are called scripts which we will use on our terminal. Instead of running node index.js for example, we can create a script called ”start”: “node index.js” which we can use on the terminal by typing npm start instead of node index.js. This is just an overview of what scripts are in json.
Based on the changes we made: We want to first convert the Typescript files in the src folder (our rootDir) by using tsc which we have created a script for. Then, after we run the Javascript file in our dist folder (outDir), in our case, we want to run the index.js file that was created.

Running the automation

Create a folder called dist (where we will store our converted JavaScript). Make sure you have all your Typescript files in the src folder. Delete any JavaScript that you have in the src folder. Open your terminal and run the following command:

npm run dev
This command will start by converting the typescript to JavaScript because of this script, "predev": "npm run build" which uses the "build": "tsc" to convert the files.
Then, it will run the index.js file that was created during conversion.
And that’s it 😄. We have automated the conversion system.

Conclusion

Typescript is a great language to use because it ensures that we run our programs error-free with no stress. Knowing how to set it up the right way can be challenging, but I hope I helped you. Please share this content with others if you found it useful, or add a comment if you have any questions or suggestions. Happy coding 😄.