Getting Hands-On with TypeScript: A Beginner's Guide

Are you ready to dive into the world of TypeScript? In this blog post, we'll explore the basics of TypeScript compilation and get our hands dirty with some practical examples. Let's get started!

Prerequisites

Before we begin, make sure you're familiar with the basics of JavaScript. If you need to install any tools, check out my first blog in this series for a complete list of prerequisites.

Understanding the TypeScript Compiler

The TypeScript compiler, often called tsc, is a powerful command-line tool that converts our TypeScript code into JavaScript code. But why do we need this extra step?

The Need for Compilation

Most browsers and serverless tools such as AWS Lambda come with built-in JavaScript engines. However, they can't directly execute TypeScript. That's where our compiler comes in handy – it translates TypeScript into JavaScript that these tools can understand and run.

The compiler does more than just translation. It checks our code at compile-time, helping us catch potential errors before runtime. This process significantly reduces the number of bugs we might encounter during execution.

Compile-Time vs. Runtime

It's crucial to understand the difference between compile-time and runtime:

• Compile-time is when our program is being compiled.

• Runtime is when our program is being executed.

Remember, TypeScript's type-checking magic happens at compile-time. Once our code is transpiled to JavaScript, we lose that type safety net.

Pro tip: Remember the acronym CCR – Code, Compile, Run. It's a simple way to remember the TypeScript development process!

Let's Get Coding!

Now that we understand the basics, let's create a simple TypeScript project and see the compiler in action.

Setting Up Our Project

1. Create a new directory called lesson-1.

• Navigate into this directory and run npm init.

• When prompted for the entry point, enter src/index.ts.

• Install TypeScript as a dev dependency:

    npm install typescript --save-dev
  

Creating Our First TypeScript File

Let's create a file called level.ts with the following content:

let level: number;
level = 2;

Now, let's compile this file:

tsc level.ts

You should see a new level.js file in your directory.

This is your TypeScript code transpiled to JavaScript!

Handling Errors

What happens if we introduce an error? Let's modify our level.ts file:

let level: number;
level = '2'; // Assigning a string to a number type

If we run tsc level.ts again, we'll get an error:

error TS2322: Type 'string' is not assignable to type 'number'.

Interestingly, TypeScript still created a level.js file. If you want to prevent this behavior, you can use the --noEmitOnError flag when running tsc:

tsc --noEmitOnError level.ts

Configuring TypeScript

TypeScript offers various configuration options to customize its behavior. While you can pass these as command-line arguments, it's often more convenient to use a configuration file.

Introducing tsconfig.json

The tsconfig.json file is where you can specify compiler options for your project. To generate a default configuration, run:

npx tsc --init

This creates a tsconfig.json file with common options pre-configured. As you progress in your TypeScript journey, you'll learn to customize these settings to suit your project needs.

Wrapping Up

Congratulations! You've taken your first steps into the world of TypeScript. We've covered the basics of the TypeScript compiler, created a simple project, and learned about configuration options.

In the next part of our series, we'll dive deeper into TypeScript's type system and explore more advanced features.

Stay tuned!

---

Remember, practice makes perfect. Try creating more TypeScript files, introduce different types of errors, and experiment with compiler options.

Happy coding!