A Beginner’s Guide to Writing Your First TypeScript Code

TypeScript has become one of the most popular programming languages for modern web development. Built as a superset of JavaScript, it introduces static typing and additional features that make coding more robust, scalable, and easier to debug. If you’re a beginner, this guide will walk you through the basics of getting started with TypeScript and writing your first piece of code: the classic “Hello World.”

What is TypeScript?

TypeScript is an open-source programming language developed by Microsoft. It extends JavaScript by adding optional static typing, which allows you to define variable types explicitly. This helps catch errors during development rather than runtime, providing better code maintainability and reducing bugs in larger projects.

Why Use TypeScript?

1. Type Safety: Helps prevent common bugs by catching type errors early.
2. Improved Code Readability: Clearly defined types make code easier to understand and maintain.
3. Better Tooling: Offers features like IntelliSense, autocompletion, and refactoring support in IDEs.
4. Seamless JavaScript Integration: TypeScript compiles down to plain JavaScript, making it compatible with any JavaScript environment.

Setting Up TypeScript

Before diving into code, let’s get your environment ready for TypeScript development.

Prerequisites

• Node.js and npm: Ensure Node.js is installed on your computer. You can download it from nodejs.org.
• Code Editor: A modern editor like Visual Studio Code is highly recommended.

Installation Steps

1. Install TypeScript: Open your terminal and run the following command to install TypeScript globally: npm install -g typescript
2. Verify Installation: Confirm TypeScript is installed by running: tsc --version This will display the installed TypeScript version.
3. Set Up a Project: Create a new directory for your project and navigate into it: mkdir typescript-hello-world cd typescript-hello-world
4. Initialize the Project: Run the following command to initialize a package.json file: npm init -y
5. Create a tsconfig File: Use the TypeScript compiler to generate a tsconfig.json file, which contains configuration settings for your TypeScript project: tsc --init

Writing Your First TypeScript Code

Now that your environment is ready, let’s create the “Hello World” program.

Step 1: Create a TypeScript File

Inside your project folder, create a new file named hello.ts. This will be your TypeScript file.

Step 2: Write the Code

Open the hello.ts file in your code editor and type the following code:

// hello.ts
const message: string = "Hello, World!";
console.log(message);

Here’s what’s happening:

1. const message: string: Declares a constant variable message with a type annotation string.
2. console.log(message): Logs the value of message to the console.

Step 3: Compile the Code

TypeScript code cannot run directly in a browser or Node.js. It needs to be compiled into JavaScript first. Run the following command to compile hello.ts into a JavaScript file:

tsc hello.ts

This will generate a file named hello.js in the same directory.

Step 4: Run the JavaScript File

Run the compiled JavaScript file using Node.js:

node hello.js

You should see the following output in the terminal:

Hello, World!

Adding a Personal Touch

TypeScript allows you to enhance your program with more features. Let’s expand the “Hello World” example by accepting user input:

// hello.ts
import readline from "readline";

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

rl.question("What is your name? ", (name: string) => {
  console.log(`Hello, ${name}! Welcome to TypeScript.`);
  rl.close();
});

How It Works:

1. readline Module: Enables input from the user via the terminal.
2. Dynamic Greeting: The program customizes the message based on the user’s input.

Compile and run the code to test the interactive “Hello World” experience.

Key Takeaways

TypeScript is a powerful tool for building modern web applications with fewer bugs and better maintainability.

• Setting up a TypeScript environment involves installing the TypeScript compiler and configuring your project.
• Writing your first TypeScript program is as simple as defining types, compiling the code, and running the resulting JavaScript.

Now that you’ve written your first TypeScript program, you’re ready to explore more advanced features like interfaces, classes, and modules. The journey into TypeScript has just begun, and the possibilities are endless!

I’ve created an article titled “How to Write and Run a Simple Hello World Script.” Let me know if you’d like to make any changes or add more details!

K1/10