Menttor
Library
LibraryYour first TypeScript program

Your first TypeScript program

Learn about Your first TypeScript program as part of TypeScript Full-Stack Development

Table of Contents

Your First TypeScript Program: A Gentle Introduction

Welcome to the exciting world of TypeScript! This module will guide you through writing and running your very first TypeScript program. We'll cover the essential steps to get you started, setting the foundation for your full-stack development journey.

What is TypeScript?

TypeScript is a superset of JavaScript that adds static typing. This means you can define the types of your variables, function parameters, and return values. This helps catch errors early in the development process, making your code more robust and maintainable.

TypeScript adds static typing to JavaScript.

Static typing allows you to specify the expected data types for your variables and function arguments. This helps prevent runtime errors by catching type mismatches during compilation.

In JavaScript, variables can hold any type of data, and this can change dynamically. While flexible, this can lead to unexpected behavior and bugs. TypeScript introduces static typing, where you declare the intended type of a variable (e.g., string, number, boolean). The TypeScript compiler then checks your code for type consistency before it's executed. If there's a mismatch, it will flag an error, allowing you to fix it before it causes problems in your application.

Setting Up Your Environment

Before you can write TypeScript, you need to install Node.js and npm (Node Package Manager), which usually comes bundled with Node.js. Then, you'll install the TypeScript compiler globally.

What are the two essential tools needed to start with TypeScript development?

Node.js and npm.

Once Node.js and npm are installed, open your terminal or command prompt and run the following command to install the TypeScript compiler:

bash
npm install -g typescript

The -g flag installs TypeScript globally, making the tsc command available anywhere on your system.

Writing Your First TypeScript File

Let's create a simple TypeScript file. Open your favorite text editor or IDE and create a new file named

code
hello.ts
. The
code
.ts
extension is crucial for TypeScript files.

Add the following code to

code
hello.ts
:

typescript
function greet(person: string, date: Date) {
  return `Hello, ${person}! Today is ${date.toDateString()}.`;
}
const message = greet("Mona", new Date());
console.log(message);

Understanding the Code

In this code:

  • We define a function
    code
    greet
    that accepts two arguments:
    code
    person
    (which must be a
    code
    string
    ) and
    code
    date
    (which must be a
    code
    Date
    object).
  • The function returns a formatted string.
  • We then call
    code
    greet
    with a name and a new
    code
    Date
    object, storing the result in the
    code
    message
    variable.
  • Finally,
    code
    console.log
    displays the
    code
    message
    in the console.

The greet function demonstrates TypeScript's core feature: static typing. The : string after person and : Date after date are type annotations. These tell the TypeScript compiler that person is expected to be a string and date is expected to be a Date object. If you were to call greet('Alice', '2023-10-27'), TypeScript would flag an error because the second argument is a string, not a Date object. This early error detection is a major benefit of using TypeScript.

📚

Text-based content

Library pages focus on text content

Compiling and Running Your TypeScript Code

TypeScript code needs to be compiled into JavaScript before it can be run by a JavaScript engine (like the one in your browser or Node.js). Open your terminal in the directory where you saved

code
hello.ts
and run the TypeScript compiler:

bash
tsc hello.ts

This command will create a new file named

code
hello.js
in the same directory. This
code
hello.js
file contains the equivalent JavaScript code.

What command compiles a TypeScript file into JavaScript?

tsc <filename.ts>

Now, you can run the generated JavaScript file using Node.js:

bash
node hello.js

You should see the following output in your terminal:

code
Hello, Mona! Today is [Current Date].

Next Steps

Congratulations! You've successfully written, compiled, and run your first TypeScript program. This is a fundamental step towards building more complex applications. In subsequent modules, we'll explore more advanced TypeScript features and how they integrate into full-stack development.

Learning Resources

TypeScript for JavaScript Programmers(documentation)

An official guide from the TypeScript team that explains the transition from JavaScript to TypeScript, highlighting key differences and benefits.

Your First TypeScript Program(documentation)

The official TypeScript handbook's introduction, covering the basics of setting up and running a simple TypeScript program.

Node.js Installation Guide(documentation)

The official download page for Node.js, essential for running JavaScript and TypeScript applications outside the browser.

Getting Started with TypeScript(video)

A beginner-friendly video tutorial that walks through setting up TypeScript and writing a basic program.

TypeScript Tutorial for Beginners(blog)

A comprehensive blog post covering the fundamentals of TypeScript, including setup, basic syntax, and types.

What is TypeScript?(wikipedia)

A Wikipedia article providing a broad overview of TypeScript, its history, features, and relationship with JavaScript.

TypeScript Compiler Options(documentation)

Learn about the various options available for the TypeScript compiler (`tsc`), which allow you to customize the compilation process.

Running TypeScript with ts-node(documentation)

A guide to using `ts-node`, a tool that allows you to run TypeScript files directly without a separate compilation step.

VS Code Setup for TypeScript(documentation)

Instructions on how to configure Visual Studio Code for an optimal TypeScript development experience, including IntelliSense and debugging.

The TypeScript Handbook(documentation)

The definitive guide to TypeScript, covering everything from basic syntax to advanced concepts and best practices.