TypeScript Pocket Guide

JavaScript is a high-level, interpreted, dynamically typed language for adding client-side interactivity to websites (visual effects, animations, interactive forms, pop-ups, dropdown menus…). It is multi-paradigm, supporting procedural, functional, and object-oriented styles, with inheritance based on prototypes rather than classes.

TypeScript is a statically typed superset of JavaScript that that adds type annotations, interfaces, and compile-time checks. It transpiles to JavaScript, enabling early error detection and improved tooling without altering runtime behavior. Unlike compilation to machine code, transpilation keeps the output in the same language family, just a different version or dialect

Advantages of TS: improves code maintainability through interfaces, enums, and generics, and supports advanced tooling like autocompletion, refactoring, and real-time feedback in IDEs.

TypeScript History & Conventions

TypeScript was first released as version 0.8 in October 2012 by Microsoft, led by Anders Hejlsberg—the architect behind C#, Delphi and Turbo Pascal.

Naming Conventions

• camelCase → variables, functions, file names

• PascalCase → classes, interfaces, enums

• UPPER_SNAKE_CASE → constants

This superset of JavaScript enables us to define types for variables, function parameters, and return values, which enhances code readability and maintainability. While it is often advised to learn TypeScript after having a strong understanding of JavaScript, which may be true to a certain extent. However, as TypeScript is a superset of JavaScript, and in order to keep this course as simple as possible, I will exclusively focus on TypeScript, as all JavaScript concepts will apply.

1. TypeScript Basics

• Running TypeScript Files

• Transpiling with NodeJS: The tsc scriptExample.ts command can be used with NodeJS to transpile the code to JavaScript (scriptExample should be changed to your own file name, without forgetting the “.ts” extension).

• Executing with Astro: Astro supports TypeScript out of the box, handling the transpilation process automatically. Thus, it is possible to write and execute scripts directly.

• Console

• console.log() can be used to display information. A similar instruction would be console.info(). Console.warn • Console.alert

• console.warn is mostly used to display alerts.

2. TypeScript Data Types

• TypeScript Variable Declaration
• Declaration Keywords: var, let, or const.
• TypeScript Data Types
• Primitive Data Types: TypeScript supports and recognizes all seven primitive data types found in JavaScript, which are bigint, boolean, null, number, string, symbol, and undefined, although the commonly used are boolean, number, and string.
• Non-Primitive Data Types: TypeScript also supports non-primitive types, such as object or classes, which can represent collections of values or instances of classes.
• Array: They can hold multiple values of a specific data type, declared as type[] (e.g., number[] for an array of numbers).
• Tuple: Fixed-size array with specified types for each element. For example, [string, number] represents a tuple where the first element is a string and the second is a number.
• Enum: Used to define a set of named constants, which can make code more readable by assigning meaningful names to values.
• Any: Flexible type that can hold values of any type. It is useful for cases where type information is not known or when integrating with older JavaScript code.
• Unknown: Similar to any, but safer, as you are required to perform type checking before working with its value.
• Void: Typically used in functions to signify that there is no return value.
• TypeScript Custom Types
• Alias Types: Useful to create simple or complex type definitions.
• Union & Intersection Type: Unions allow a value to be one of several types, while intersections combine multiple types into one, requiring the value to satisfy all types.
• Interface Type: Useful for defining objects, but with the ability to inherit from other interfaces with extends, define optional properties with ? or make properties immutable with readonly.

4.3. TypeScript Conditions

TypeScript Conditionals: Double (==) vs Triple (===) Equality

4.3. TypeScript Functions

In TypeScript, functions are a core feature for writing reusable and maintainable code.

• Functions
• Regular Functions
• Arrow Functions
• Function Overloading

4.4. TypeScript Classes

TypeScript object oriented.

• TypeScript Object-Oriented Principles
• Encapsulation: Accessors such as public, private, and protected.
• Inheritance
• Abstraction
• Polymorphism

4.5. TypeScript DOM Manipulation