Getting Started with TypeScript: Installation, Version Management, and Your First Program!

TypeScript is a powerful language that builds on JavaScript by adding static typing, allowing developers to catch errors early in the development process. TypeScript brings us closer to a “safe code” experience, making it easier to manage large codebases and collaborate in teams.

In this blog, we’ll explore:

1. What TypeScript is and why it matters
2. Setting up TypeScript with fnm and managing Node.js versions
3. Running TypeScript with ts-node and creating our first program

Let’s dive in!

1. What is TypeScript?

TypeScript is a superset of JavaScript that introduces static typing. It’s developed by Microsoft to help developers catch potential bugs earlier. Here’s why TypeScript is so popular:

• Static Typing: Helps prevent common mistakes by checking types at compile time.
• Readability: Makes code more understandable, which is crucial for large teams.
• Tooling: TypeScript integrates well with IDEs like VSCode, providing autocompletion and better error checking.

In short, if you’re serious about writing reliable, scalable JavaScript, TypeScript is worth the investment.

2. Installing TypeScript and Managing Node.js Versions with fnm

To get started with TypeScript, we need to install Node.js and TypeScript itself. Here, we’ll use Fast Node Manager (fnm) for managing Node versions. This allows you to easily switch between different Node versions for different projects.

Step 1: Installing fnm

1. Install fnm: Run the following command in PowerShell to install fnm:

   iwr -useb https://fnm.vercel.app/install | iex

This command downloads and installs fnm. After installation, restart your terminal to activate fnm.

1. Verify fnm Installation: After restarting, check if fnm is working:

   fnm --version

You should see the version number, which means fnm is ready!

Step 2: Installing Node.js with fnm

1. Choose a Node Version: With fnm, you can install a specific version of Node. Let’s install Node.js LTS (long-term support version):

   fnm install --lts

1. Set Default Node Version: To make the installed version default, use:

   fnm use --lts

1. Verify Node.js Installation: Check if Node.js and npm are properly installed:

   node -v
   npm -v

Now, you’re all set to use Node.js with fnm.

3. Installing TypeScript and ts-node

With Node.js ready, let’s install TypeScript and ts-node (a package that allows us to run TypeScript files directly).

1. Install TypeScript: Using npm, install TypeScript globally so that it’s accessible across projects:

   npm install -g typescript

1. Install ts-node: Now, install ts-node globally:

   npm install -g ts-node

1. Verify Installation: Check if TypeScript and ts-node are installed correctly:

   tsc -v
   ts-node -v

4. Running Your First TypeScript Program

Now that our environment is set up, let’s create and run a basic TypeScript program.

Step 1: Create a TypeScript File

1. Create a New File:
   In your preferred text editor, create a new file named hello.ts.

2. Write a Simple Program:
   Add the following code to hello.ts:
   

   const greet = (name: string): string => {
       return `Hello, ${name}! Welcome to TypeScript.`;
   };

   console.log(greet("LinkedIn"));

Explanation:

• const greet is a function that takes a name parameter of type string.
• : string after the parameter means that the function will return a string.
• console.log outputs the result to the terminal.

Step 2: Run the TypeScript File

With ts-node, you can run this file directly without compiling it separately.

ts-node hello.ts

You should see this output in your terminal:

Hello, LinkedIn! Welcome to TypeScript.

Summary

Congratulations! You’ve successfully set up a TypeScript environment, managed Node.js versions with fnm, and run your first TypeScript program using ts-node. Here’s what we covered:

• What TypeScript is and why it’s useful
• How to install fnm and manage Node.js versions
• Setting up TypeScript and ts-node for running TypeScript files
• Writing and running a basic TypeScript program

With TypeScript in your toolkit, you’ll experience more reliable, readable code in your JavaScript projects. Stay tuned for more tutorials on advanced TypeScript features and happy coding!

Let’s Connect!

If you found this article helpful or have any questions, feel free to connect with me on LinkedIn. I’d love to hear your thoughts and help you along your TypeScript journey!