TypeScript Guide 01: Introduction to TypeScript

Video

Watch the full video on YouTube:

What is TypeScript?

TypeScript is a superset of JavaScript developed by Microsoft that adds static typing and improved syntax to the language. Unlike what many people think, TypeScript is not a completely new language with additional features, but rather a tool that enhances the existing development experience.

TypeScript was created by Microsoft in 2012 and since then has seen massive adoption in the development community. Today, most modern frameworks and libraries like Angular, React, and NestJS use TypeScript by default.

Why is it Important?

JavaScript is a very permissive language that allows creating objects at runtime and accessing values that may or may not exist. While this flexibility is useful, it also creates uncertainty during development because we don’t know for certain if an attribute or method actually exists.

TypeScript solves this problem with its static typing. For example, if we create an object with firstName, lastName, and role attributes, TypeScript will show us an error if we try to access an attribute that doesn’t exist, like name.

Installing Node.js

To start working with TypeScript we need to have Node.js installed. Visit nodejs.org and download the LTS (Long Term Support) version.

You can install Node.js in several ways:

• nvm (Node Version Manager): Recommended for managing multiple versions
• fnm (Fast Node Manager): A fast alternative to nvm
• Direct installer: Download the .pkg file for macOS or .msi for Windows

Once installed, verify the installation by running in your terminal:

node -v
npm -v

If you prefer to use pnpm as your package manager (recommended), you can also install it:

npm install -g pnpm
pnpm -v

Creating Our First Project

Create a new folder for your project and navigate to it:

mkdir ts-example
cd ts-example

Initialize the project with your package manager:

pnpm init

This will create a basic package.json file.

Installing Dependencies

Install TypeScript and the necessary dependencies:

pnpm add -D typescript @types/node tsx

• typescript: The TypeScript compiler
• @types/node: Type definitions for Node.js
• tsx: Tool for running TypeScript directly (optional but recommended)

Approve the esbuild installation when prompted:

pnpm approve-builds

Configuring TypeScript

Initialize TypeScript configuration:

pnpm tsc --init

This will create a tsconfig.json file with all configuration options. The most important attributes are:

• rootDir: Defines where your project source files are located
• outDir: Defines where compiled files will be saved

Project Structure

Create the basic structure of your project:

ts-example/
├── src/
│   └── main.ts
├── package.json
└── tsconfig.json

Create a src/main.ts file with basic code:

console.log("Hello from TypeScript!")

Scripts in package.json

Add scripts to your package.json to facilitate execution:

{
  "scripts": {
    "dev": "tsx src/main.ts",
    "build": "tsc"
  }
}

Now you can run:

pnpm dev    # For development with watch mode
pnpm build  # To compile the project

Running TypeScript

If you have Node.js 22.6 or higher, you can run TypeScript directly:

node src/main.ts

If you have an older version, use tsx:

pnpm dev

Compiling the Project

To compile your project to JavaScript:

pnpm build

This will create a dist/ folder with compiled files ready for production.

Variables and Types in TypeScript

TypeScript allows us to define the type of our variables:

// Type inference
let name = "Angel" // TypeScript infers it's a string

// Explicit typing
let age: number = 25
let isActive: boolean = true

// Union types
let identifier: string | null = "abc"
identifier = null // Allowed

Static vs Dynamic Typing

In JavaScript you can reassign variables to any type:

let name = "Angel"
name = 123 // No error
name = true // No error
name = {} // No error

In TypeScript, this generates an error if the type doesn’t match:

let name: string = "Angel"
name = 123 // Error: Type 'number' is not assignable to type 'string'
name = true // Error: Type 'boolean' is not assignable to type 'string'

Primitive and Utility Types

TypeScript offers several primitive types:

• string: Text strings
• number: Numbers
• boolean: True/false values
• null and undefined: Null or undefined values
• object: Objects

It also offers utility types for arrays:

// Array of strings
let names: string[] = ["Angel", "Maria"]
let names2: Array<string> = ["Angel", "Maria"]

// Objects with interfaces
interface User {
  firstName: string
  lastName: string
  role: string
}

let user: User = {
  firstName: "Angel",
  lastName: "Rada",
  role: "developer",
}

Conclusion

TypeScript is a powerful tool that significantly enhances the development experience by adding static typing to JavaScript. While it doesn’t add new runtime features, it provides security, better IntelliSense, and improved code maintainability.