PART 1: HISTORICAL CONTEXT AND EVOLUTION
JavaScript emerged in 1995 when Brendan Eich created it in just ten days for Netscape Navigator. Originally named Mocha, then LiveScript, it was finally renamed JavaScript to capitalize on Java's popularity, despite having no direct relationship with Java. The language was designed to make web pages interactive and dynamic, running directly in the browser.
In the early years, JavaScript suffered from inconsistent implementations across different browsers. This led to the standardization effort by ECMA International, resulting in ECMAScript as the official specification. The first edition of ECMAScript was published in 1997. For many years, JavaScript evolved slowly, with ECMAScript 3 in 1999 being the dominant version for nearly a decade.
The turning point came in 2009 with the release of Node.js by Ryan Dahl. Node.js brought JavaScript to the server side by embedding the V8 JavaScript engine from Chrome into a runtime environment. This allowed developers to use JavaScript for both frontend and backend development, creating the foundation for full-stack JavaScript development.
ECMAScript 5, released in 2009, brought significant improvements including strict mode, JSON support, and new array methods. However, the real revolution occurred in 2015 with ECMAScript 6, also known as ES2015 or ES6. This version introduced classes, modules, arrow functions, promises, template literals, destructuring, and many other features that transformed JavaScript into a modern programming language.
Since 2015, the ECMAScript specification has followed an annual release cycle. Each year brings incremental improvements and new features. As of 2024, we have ECMAScript 2024 (ES15), which includes features like array grouping methods, Promise.withResolvers, and regular expression enhancements. The language continues to evolve with proposals moving through a four-stage process before becoming part of the official specification.
TypeScript was created by Microsoft and first released in 2012 under the leadership of Anders Hejlsberg, the architect behind C#. TypeScript was designed to address JavaScript's lack of static typing and tooling support for large-scale applications. Rather than creating a completely new language, TypeScript is a superset of JavaScript, meaning that any valid JavaScript code is also valid TypeScript code.
The key innovation of TypeScript is its optional static type system. Developers can gradually add type annotations to their code, receiving compile-time type checking and enhanced IDE support. TypeScript code is transpiled to JavaScript, allowing it to run anywhere JavaScript runs. This approach provides the benefits of static typing during development while maintaining JavaScript's runtime flexibility and compatibility.
TypeScript gained rapid adoption, particularly in enterprise environments and large-scale applications. Major frameworks like Angular adopted TypeScript as their primary language. React and Vue.js also provide excellent TypeScript support. As of 2024, TypeScript 5.6 is the latest stable version, with TypeScript 5.7 in development. Recent versions have focused on performance improvements, better type inference, and new type system features.
The relationship between JavaScript and TypeScript is symbiotic. JavaScript provides the runtime and ecosystem, while TypeScript adds developer productivity through static typing and advanced tooling. Understanding both languages is essential for modern web development.
PART 2: APPLICATION DOMAINS AND USE CASES
JavaScript and TypeScript excel in several application domains, each leveraging different aspects of the language ecosystem.
Web frontend development represents the original and still dominant use case for JavaScript. Every modern web browser includes a JavaScript engine, making it the only language that runs natively in browsers without plugins or compilation. JavaScript manipulates the Document Object Model, handles user interactions, performs asynchronous operations, and creates dynamic user interfaces. Frameworks like React, Angular, and Vue.js provide structured approaches to building complex single-page applications. TypeScript is particularly valuable here because large frontend applications benefit significantly from static typing, catching errors before runtime and improving code maintainability.
Server-side development with Node.js has become increasingly popular. Node.js uses an event-driven, non-blocking I/O model that makes it efficient for handling concurrent connections. This architecture is particularly well-suited for real-time applications, API servers, microservices, and applications requiring high throughput with many simultaneous connections. Companies like Netflix, LinkedIn, and PayPal use Node.js in production for various services. TypeScript is widely adopted for Node.js development because server applications tend to be complex and long-lived, making type safety valuable for maintenance and refactoring.
Full-stack development benefits from using JavaScript or TypeScript across the entire stack. Developers can share code between frontend and backend, use the same language and tooling throughout the project, and leverage a unified ecosystem. Frameworks like Next.js and Remix enable server-side rendering and full-stack capabilities with React. NestJS provides a TypeScript-first framework for building scalable server applications with architecture inspired by Angular.
Mobile development is possible through frameworks like React Native and Ionic. React Native allows developers to build native mobile applications for iOS and Android using JavaScript or TypeScript. The code compiles to native components rather than running in a web view, providing better performance and native look and feel. Many companies use React Native to maintain a single codebase for multiple platforms while achieving near-native performance.
Desktop applications can be built using Electron, which combines Node.js with Chromium to create cross-platform desktop applications. Popular applications like Visual Studio Code, Slack, Discord, and Microsoft Teams are built with Electron. While Electron applications can be memory-intensive, they enable web developers to create desktop software using familiar technologies.
Command-line tools and build systems frequently use JavaScript or TypeScript. Tools like webpack, Babel, ESLint, and Prettier are written in JavaScript. The npm ecosystem provides thousands of packages for building CLI applications. TypeScript is particularly useful for CLI tools because it provides better error checking and code organization for complex command-line interfaces.
WebAssembly integration allows JavaScript to interoperate with code compiled from languages like Rust, C++, or Go. JavaScript serves as the glue code, handling DOM manipulation and browser APIs while delegating performance-critical computations to WebAssembly modules. AssemblyScript, a TypeScript-like language, compiles directly to WebAssembly, enabling developers to write high-performance code using familiar syntax.
Serverless functions and edge computing represent growing use cases. Platforms like AWS Lambda, Cloudflare Workers, and Vercel Edge Functions support JavaScript and TypeScript. These environments execute code in response to events without managing servers, making JavaScript's quick startup time and small footprint advantageous.
For developers coming from Java, Go, C#, Rust, or Python, JavaScript and TypeScript offer different trade-offs. Unlike Java and C#, JavaScript uses prototypal inheritance rather than classical inheritance, though modern JavaScript classes provide familiar syntax. Unlike Go and Rust, JavaScript is dynamically typed at runtime, though TypeScript adds compile-time type checking. Unlike Python, JavaScript has a more complex asynchronous model based on promises and async/await rather than generators and coroutines. Understanding these differences helps experienced developers adapt their mental models to JavaScript's paradigms.
PART 3: FUNDAMENTAL JAVASCRIPT CONCEPTS
Let us begin with the basics of JavaScript syntax and semantics, highlighting differences from languages you already know.
Variables in JavaScript can be declared using three keywords: var, let, and const. The var keyword is legacy and should be avoided in modern code because it has function scope and hoisting behavior that can lead to bugs. The let keyword declares block-scoped variables that can be reassigned. The const keyword declares block-scoped variables that cannot be reassigned, though objects and arrays declared with const can still have their contents modified.
// Variable declarations demonstrating let and const
let count = 0; // Mutable variable
const maxCount = 100; // Immutable binding
count = 5; // Valid reassignment
// maxCount = 200; // Error: Assignment to constant variable
// Block scoping demonstration
if (true) {
let blockScoped = "visible only in this block";
const alsoBlockScoped = "same here";
}
// console.log(blockScoped); // Error: blockScoped is not defined
JavaScript has several primitive types: number, string, boolean, null, undefined, symbol, and bigint. Unlike Java or C#, JavaScript has only one number type that represents both integers and floating-point values using IEEE 754 double-precision format. This means there is no distinction between int, long, float, and double as in Java or C#.
// Primitive types in JavaScript
const integer = 42; // Number (integer)
const floating = 3.14159; // Number (floating-point)
const text = "Hello, World!"; // String
const isActive = true; // Boolean
const nothing = null; // Null (intentional absence)
const notDefined = undefined; // Undefined (uninitialized)
const uniqueId = Symbol("id"); // Symbol (unique identifier)
const bigNumber = 9007199254740991n; // BigInt (arbitrary precision)
Strings in JavaScript can be created using single quotes, double quotes, or backticks. Backticks create template literals, which support string interpolation and multi-line strings. This is similar to string interpolation in C# or Python f-strings.
// String creation and template literals
const name = "Alice";
const age = 30;
// Template literal with interpolation
const greeting = `Hello, ${name}! You are ${age} years old.`;
// Multi-line strings
const multiLine = `This is a
multi-line string
that preserves line breaks`;
// Expression evaluation in templates
const calculation = `The sum of 5 and 3 is ${5 + 3}`;
JavaScript uses dynamic typing, meaning variables can hold values of any type and can change types during execution. This differs significantly from statically typed languages like Java, C#, Go, and Rust. The typeof operator returns the type of a value as a string.
// Dynamic typing demonstration
let dynamic = 42; // Initially a number
console.log(typeof dynamic); // "number"
dynamic = "now a string"; // Changed to string
console.log(typeof dynamic); // "string"
dynamic = true; // Changed to boolean
console.log(typeof dynamic); // "boolean"
Functions in JavaScript are first-class values, meaning they can be assigned to variables, passed as arguments, and returned from other functions. This is similar to function pointers in C or delegates in C#, but more flexible. JavaScript supports multiple ways to define functions.
// Function declaration (hoisted to top of scope)
function add(a, b) {
return a + b;
}
// Function expression (not hoisted)
const subtract = function(a, b) {
return a - b;
};
// Arrow function (concise syntax, lexical this binding)
const multiply = (a, b) => {
return a * b;
};
// Arrow function with implicit return (single expression)
const divide = (a, b) => a / b;
// Using functions
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2
console.log(multiply(5, 3)); // 15
console.log(divide(6, 3)); // 2
Arrow functions have an important difference from regular functions: they do not have their own this binding. Instead, they inherit this from the enclosing scope. This is called lexical this binding and is particularly useful in callbacks and event handlers.
// Lexical this binding in arrow functions
class Counter {
constructor() {
this.count = 0;
}
// Regular function would lose 'this' context
incrementWrong() {
setTimeout(function() {
this.count++; // 'this' is undefined or global object
}, 100);
}
// Arrow function preserves 'this' context
incrementCorrect() {
setTimeout(() => {
this.count++; // 'this' refers to Counter instance
}, 100);
}
}
Objects in JavaScript are collections of key-value pairs. Unlike Java or C# where objects are instances of classes, JavaScript objects are more like Python dictionaries or Go maps, but with additional capabilities. Object properties can be accessed using dot notation or bracket notation.
// Object literal creation
const person = {
name: "Bob",
age: 25,
email: "bob@example.com",
greet: function() {
return `Hello, I'm ${this.name}`;
}
};
// Property access
console.log(person.name); // "Bob" (dot notation)
console.log(person["age"]); // 25 (bracket notation)
// Adding properties dynamically
person.city = "New York";
person["country"] = "USA";
// Method invocation
console.log(person.greet()); // "Hello, I'm Bob"
JavaScript supports object destructuring, which allows extracting multiple properties from an object into variables. This is similar to pattern matching in Rust or tuple unpacking in Python.
// Object destructuring
const user = {
username: "alice",
email: "alice@example.com",
role: "admin"
};
// Extract properties into variables
const { username, email } = user;
console.log(username); // "alice"
console.log(email); // "alice@example.com"
// Destructuring with renaming
const { username: userName, role: userRole } = user;
console.log(userName); // "alice"
console.log(userRole); // "admin"
// Destructuring with default values
const { username: name, status = "active" } = user;
console.log(name); // "alice"
console.log(status); // "active" (default value used)
Arrays in JavaScript are dynamic and can hold elements of different types. They are similar to Python lists or Java ArrayLists. JavaScript provides many built-in array methods for manipulation and transformation.
// Array creation and manipulation
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "two", true, null, { key: "value" }];
// Array methods
numbers.push(6); // Add to end: [1, 2, 3, 4, 5, 6]
numbers.pop(); // Remove from end: [1, 2, 3, 4, 5]
numbers.unshift(0); // Add to beginning: [0, 1, 2, 3, 4, 5]
numbers.shift(); // Remove from beginning: [1, 2, 3, 4, 5]
// Array access
console.log(numbers[0]); // 1 (first element)
console.log(numbers.length); // 5 (array length)
Array destructuring works similarly to object destructuring, allowing extraction of elements by position.
// Array destructuring
const colors = ["red", "green", "blue", "yellow"];
// Extract elements into variables
const [first, second] = colors;
console.log(first); // "red"
console.log(second); // "green"
// Skip elements using commas
const [, , third] = colors;
console.log(third); // "blue"
// Rest operator to collect remaining elements
const [primary, ...others] = colors;
console.log(primary); // "red"
console.log(others); // ["green", "blue", "yellow"]
The spread operator allows expanding arrays or objects. This is useful for creating copies, merging collections, or passing array elements as function arguments.
// Spread operator with arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// Combine arrays
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
// Create shallow copy
const copy = [...arr1]; // [1, 2, 3]
// Spread operator with objects
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
// Merge objects
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }
// Override properties
const updated = { ...obj1, b: 99 }; // { a: 1, b: 99 }
Control flow in JavaScript uses familiar syntax from C-family languages. The if, else, switch, for, and while statements work as expected.
// Conditional statements
const score = 85;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else if (score >= 70) {
console.log("Grade: C");
} else {
console.log("Grade: F");
}
// Switch statement
const day = "Monday";
switch (day) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
console.log("Weekday");
break;
case "Saturday":
case "Sunday":
console.log("Weekend");
break;
default:
console.log("Invalid day");
}
JavaScript provides several loop constructs. The traditional for loop works like C or Java. The for-of loop iterates over iterable values like arrays. The for-in loop iterates over object keys.
// Traditional for loop
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
// For-of loop (iterates over values)
const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
console.log(fruit); // "apple", "banana", "cherry"
}
// For-in loop (iterates over keys)
const person = { name: "Alice", age: 30 };
for (const key in person) {
console.log(`${key}: ${person[key]}`); // "name: Alice", "age: 30"
}
// While loop
let count = 0;
while (count < 3) {
console.log(count);
count++;
}
Higher-order array methods are a key idiom in JavaScript. These methods take functions as arguments and are used extensively for data transformation. They are similar to LINQ in C# or stream operations in Java.
// Map: transform each element
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// Filter: select elements matching a condition
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]
// Reduce: accumulate values into a single result
const sum = numbers.reduce((accumulator, current) => {
return accumulator + current;
}, 0); // 0 is the initial value
console.log(sum); // 15
// Find: return first element matching condition
const firstEven = numbers.find(n => n % 2 === 0);
console.log(firstEven); // 2
// Some: check if any element matches condition
const hasEven = numbers.some(n => n % 2 === 0);
console.log(hasEven); // true
// Every: check if all elements match condition
const allPositive = numbers.every(n => n > 0);
console.log(allPositive); // true
These array methods can be chained together to create data processing pipelines, which is a common JavaScript idiom.
// Chaining array methods
const users = [
{ name: "Alice", age: 25, active: true },
{ name: "Bob", age: 30, active: false },
{ name: "Charlie", age: 35, active: true },
{ name: "David", age: 28, active: true }
];
// Get names of active users over 25, sorted alphabetically
const result = users
.filter(user => user.active)
.filter(user => user.age > 25)
.map(user => user.name)
.sort();
console.log(result); // ["Charlie", "David"]
PART 4: ASYNCHRONOUS JAVASCRIPT
Asynchronous programming is fundamental to JavaScript because the language is single-threaded. Unlike Go with goroutines or Java with threads, JavaScript uses an event loop to handle concurrent operations. Understanding asynchronous patterns is essential for effective JavaScript development.
The traditional approach to asynchronous operations used callbacks. A callback is a function passed as an argument to another function, which is invoked when the asynchronous operation completes.
// Callback-based asynchronous operation
function fetchData(callback) {
setTimeout(() => {
const data = { id: 1, name: "Product" };
callback(null, data); // First argument is error, second is result
}, 1000);
}
// Using the callback
fetchData((error, data) => {
if (error) {
console.error("Error:", error);
} else {
console.log("Data:", data);
}
});
Callbacks work but lead to callback hell when multiple asynchronous operations depend on each other. This creates deeply nested code that is difficult to read and maintain.
// Callback hell example
function step1(callback) {
setTimeout(() => callback(null, "result1"), 100);
}
function step2(input, callback) {
setTimeout(() => callback(null, input + " -> result2"), 100);
}
function step3(input, callback) {
setTimeout(() => callback(null, input + " -> result3"), 100);
}
// Nested callbacks become difficult to manage
step1((err1, result1) => {
if (err1) {
console.error(err1);
} else {
step2(result1, (err2, result2) => {
if (err2) {
console.error(err2);
} else {
step3(result2, (err3, result3) => {
if (err3) {
console.error(err3);
} else {
console.log(result3);
}
});
}
});
}
});
Promises were introduced in ES2015 to solve callback hell. A Promise represents a value that may be available now, in the future, or never. Promises have three states: pending, fulfilled, or rejected.
// Creating a Promise
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true;
if (success) {
resolve({ id: 1, name: "Product" });
} else {
reject(new Error("Failed to fetch data"));
}
}, 1000);
});
}
// Using a Promise with then/catch
fetchData()
.then(data => {
console.log("Data:", data);
return data.id;
})
.then(id => {
console.log("ID:", id);
})
.catch(error => {
console.error("Error:", error);
})
.finally(() => {
console.log("Operation complete");
});
Promises can be chained, making sequential asynchronous operations more readable than nested callbacks.
// Promise chaining
function step1() {
return new Promise(resolve => {
setTimeout(() => resolve("result1"), 100);
});
}
function step2(input) {
return new Promise(resolve => {
setTimeout(() => resolve(input + " -> result2"), 100);
});
}
function step3(input) {
return new Promise(resolve => {
setTimeout(() => resolve(input + " -> result3"), 100);
});
}
// Clean promise chain
step1()
.then(result1 => step2(result1))
.then(result2 => step3(result2))
.then(result3 => {
console.log(result3); // "result1 -> result2 -> result3"
})
.catch(error => {
console.error("Error in chain:", error);
});
The async/await syntax, introduced in ES2017, provides a more synchronous-looking way to work with Promises. This is similar to async/await in C# or Python. An async function always returns a Promise, and the await keyword pauses execution until a Promise resolves.
// Async/await syntax
async function fetchUserData(userId) {
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
return data;
} catch (error) {
console.error("Error fetching user:", error);
throw error;
}
}
// Using async function
async function displayUser() {
try {
const user = await fetchUserData(123);
console.log("User:", user);
} catch (error) {
console.error("Failed to display user:", error);
}
}
displayUser();
The async/await syntax makes sequential asynchronous operations much clearer.
// Sequential async operations
async function processData() {
try {
const result1 = await step1();
const result2 = await step2(result1);
const result3 = await step3(result2);
console.log(result3);
} catch (error) {
console.error("Error:", error);
}
}
processData();
For parallel asynchronous operations, Promise.all executes multiple Promises concurrently and waits for all to complete. This is more efficient than sequential await calls when operations are independent.
// Parallel async operations
async function fetchMultipleUsers() {
try {
const [user1, user2, user3] = await Promise.all([
fetchUserData(1),
fetchUserData(2),
fetchUserData(3)
]);
console.log("All users:", user1, user2, user3);
} catch (error) {
console.error("Error fetching users:", error);
}
}
Promise.race returns when the first Promise settles, useful for implementing timeouts.
// Promise.race for timeout implementation
function timeout(ms) {
return new Promise((_, reject) => {
setTimeout(() => reject(new Error("Timeout")), ms);
});
}
async function fetchWithTimeout(url, ms) {
try {
const result = await Promise.race([
fetch(url),
timeout(ms)
]);
return result;
} catch (error) {
console.error("Request timed out or failed:", error);
throw error;
}
}
Promise.allSettled waits for all Promises to settle regardless of success or failure, returning an array of results.
// Promise.allSettled for handling mixed results
async function fetchAllUsers() {
const results = await Promise.allSettled([
fetchUserData(1),
fetchUserData(2),
fetchUserData(999) // This might fail
]);
results.forEach((result, index) => {
if (result.status === "fulfilled") {
console.log(`User ${index + 1}:`, result.value);
} else {
console.error(`User ${index + 1} failed:`, result.reason);
}
});
}
ES2024 introduced Promise.withResolvers, which provides a more convenient way to create Promises with externally accessible resolve and reject functions.
// Promise.withResolvers (ES2024)
function createManualPromise() {
const { promise, resolve, reject } = Promise.withResolvers();
// Resolve or reject from outside the Promise constructor
setTimeout(() => {
resolve("Resolved after delay");
}, 1000);
return promise;
}
createManualPromise().then(result => {
console.log(result); // "Resolved after delay"
});
PART 5: OBJECT-ORIENTED PROGRAMMING IN JAVASCRIPT
JavaScript uses prototypal inheritance rather than classical inheritance. However, ES2015 introduced class syntax that provides familiar syntax for developers from class-based languages while still using prototypes under the hood.
Before classes, JavaScript used constructor functions and prototypes to create object hierarchies.
// Constructor function (pre-ES2015 style)
function Person(name, age) {
this.name = name;
this.age = age;
}
// Adding methods to prototype
Person.prototype.greet = function() {
return `Hello, I'm ${this.name}`;
};
// Creating instances
const person1 = new Person("Alice", 30);
console.log(person1.greet()); // "Hello, I'm Alice"
Modern JavaScript uses class syntax, which is syntactic sugar over the prototype system but provides clearer and more maintainable code.
// Modern class syntax
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hello, I'm ${this.name}`;
}
getInfo() {
return `${this.name} is ${this.age} years old`;
}
}
// Creating instances
const person = new Person("Bob", 25);
console.log(person.greet()); // "Hello, I'm Bob"
console.log(person.getInfo()); // "Bob is 25 years old"
Classes support inheritance using the extends keyword, similar to Java or C#. The super keyword calls the parent class constructor or methods.
// Class inheritance
class Employee extends Person {
constructor(name, age, employeeId, department) {
super(name, age); // Call parent constructor
this.employeeId = employeeId;
this.department = department;
}
getInfo() {
const personInfo = super.getInfo(); // Call parent method
return `${personInfo}, Employee ID: ${this.employeeId}`;
}
work() {
return `${this.name} is working in ${this.department}`;
}
}
// Using the derived class
const employee = new Employee("Charlie", 35, "E123", "Engineering");
console.log(employee.greet()); // "Hello, I'm Charlie"
console.log(employee.getInfo()); // "Charlie is 35 years old, Employee ID: E123"
console.log(employee.work()); // "Charlie is working in Engineering"
JavaScript classes support static methods and properties, which belong to the class itself rather than instances.
// Static methods and properties
class MathUtils {
static PI = 3.14159;
static add(a, b) {
return a + b;
}
static multiply(a, b) {
return a * b;
}
static circleArea(radius) {
return MathUtils.PI * radius * radius;
}
}
// Using static members
console.log(MathUtils.PI); // 3.14159
console.log(MathUtils.add(5, 3)); // 8
console.log(MathUtils.circleArea(10)); // 314.159
Private fields and methods were introduced in ES2022 using the hash prefix. These are truly private and cannot be accessed outside the class.
// Private fields and methods
class BankAccount {
#balance; // Private field
#transactionHistory;
constructor(initialBalance) {
this.#balance = initialBalance;
this.#transactionHistory = [];
}
deposit(amount) {
if (amount > 0) {
this.#balance += amount;
this.#recordTransaction("deposit", amount);
}
}
withdraw(amount) {
if (amount > 0 && amount <= this.#balance) {
this.#balance -= amount;
this.#recordTransaction("withdrawal", amount);
return true;
}
return false;
}
getBalance() {
return this.#balance;
}
#recordTransaction(type, amount) { // Private method
this.#transactionHistory.push({
type,
amount,
date: new Date()
});
}
}
// Using the class
const account = new BankAccount(1000);
account.deposit(500);
account.withdraw(200);
console.log(account.getBalance()); // 1300
// console.log(account.#balance); // Error: Private field
Getters and setters provide controlled access to object properties, similar to properties in C#.
// Getters and setters
class Temperature {
#celsius;
constructor(celsius) {
this.#celsius = celsius;
}
get celsius() {
return this.#celsius;
}
set celsius(value) {
if (value < -273.15) {
throw new Error("Temperature below absolute zero");
}
this.#celsius = value;
}
get fahrenheit() {
return (this.#celsius * 9/5) + 32;
}
set fahrenheit(value) {
this.celsius = (value - 32) * 5/9;
}
}
// Using getters and setters
const temp = new Temperature(25);
console.log(temp.celsius); // 25
console.log(temp.fahrenheit); // 77
temp.fahrenheit = 86;
console.log(temp.celsius); // 30
PART 6: MODULES AND CODE ORGANIZATION
JavaScript modules allow code to be organized into separate files with explicit imports and exports. This is similar to packages in Java or Go, namespaces in C#, or modules in Python and Rust.
ES modules use the export keyword to make values available to other modules and the import keyword to use exported values.
// math.js - Exporting individual items
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
export class Calculator {
add(a, b) {
return a + b;
}
subtract(a, b) {
return a - b;
}
}
Modules can also use default exports for a single primary export.
// logger.js - Default export
export default class Logger {
constructor(name) {
this.name = name;
}
log(message) {
console.log(`[${this.name}] ${message}`);
}
error(message) {
console.error(`[${this.name}] ERROR: ${message}`);
}
}
Importing from modules uses various syntax forms depending on what is being imported.
// app.js - Importing from modules
import { PI, add, multiply, Calculator } from './math.js';
import Logger from './logger.js';
// Using named imports
console.log(PI); // 3.14159
console.log(add(5, 3)); // 8
const calc = new Calculator();
console.log(calc.add(10, 20)); // 30
// Using default import
const logger = new Logger("App");
logger.log("Application started");
Imports can be renamed using the as keyword to avoid naming conflicts.
// Renaming imports
import { add as sum, multiply as product } from './math.js';
console.log(sum(2, 3)); // 5
console.log(product(2, 3)); // 6
All exports from a module can be imported into a namespace object.
// Importing everything as namespace
import * as MathLib from './math.js';
console.log(MathLib.PI);
console.log(MathLib.add(5, 3));
const calculator = new MathLib.Calculator();
Re-exporting allows a module to export items from other modules, useful for creating public APIs.
// index.js - Re-exporting from multiple modules
export { add, multiply } from './math.js';
export { default as Logger } from './logger.js';
export { fetchData, saveData } from './api.js';
Dynamic imports allow loading modules conditionally or on-demand, which is useful for code splitting and lazy loading.
// Dynamic import
async function loadMathModule() {
if (needsMath) {
const math = await import('./math.js');
console.log(math.add(5, 3));
}
}
// Conditional module loading
async function loadFeature(featureName) {
try {
const module = await import(`./features/${featureName}.js`);
module.initialize();
} catch (error) {
console.error(`Failed to load feature ${featureName}:`, error);
}
}
PART 7: ERROR HANDLING
JavaScript uses try-catch-finally blocks for error handling, similar to Java, C#, and Python. Errors can be thrown using the throw keyword with any value, though Error objects are conventional.
// Basic error handling
function divide(a, b) {
if (b === 0) {
throw new Error("Division by zero");
}
return a / b;
}
try {
const result = divide(10, 0);
console.log(result);
} catch (error) {
console.error("Error occurred:", error.message);
} finally {
console.log("Cleanup code runs regardless of error");
}
Custom error classes can be created by extending the Error class.
// Custom error classes
class ValidationError extends Error {
constructor(message, field) {
super(message);
this.name = "ValidationError";
this.field = field;
}
}
class NetworkError extends Error {
constructor(message, statusCode) {
super(message);
this.name = "NetworkError";
this.statusCode = statusCode;
}
}
// Using custom errors
function validateUser(user) {
if (!user.email) {
throw new ValidationError("Email is required", "email");
}
if (!user.age || user.age < 0) {
throw new ValidationError("Valid age is required", "age");
}
}
try {
validateUser({ email: "", age: -5 });
} catch (error) {
if (error instanceof ValidationError) {
console.error(`Validation failed for ${error.field}: ${error.message}`);
} else {
console.error("Unexpected error:", error);
}
}
Async error handling requires special attention. Errors in async functions are automatically wrapped in rejected Promises.
// Async error handling
async function fetchUserData(userId) {
if (!userId) {
throw new Error("User ID is required");
}
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
throw new NetworkError(
`Failed to fetch user: ${response.statusText}`,
response.status
);
}
return await response.json();
} catch (error) {
console.error("Error in fetchUserData:", error);
throw error; // Re-throw to allow caller to handle
}
}
// Handling async errors
async function displayUser(userId) {
try {
const user = await fetchUserData(userId);
console.log("User:", user);
} catch (error) {
if (error instanceof NetworkError) {
console.error(`Network error (${error.statusCode}): ${error.message}`);
} else {
console.error("Unexpected error:", error);
}
}
}
Unhandled Promise rejections should be caught to prevent silent failures.
// Handling unhandled rejections
process.on('unhandledRejection', (reason, promise) => {
console.error('Unhandled Rejection at:', promise, 'reason:', reason);
});
// This Promise rejection would be unhandled without the listener
Promise.reject(new Error("Unhandled error"));
PART 8: INTRODUCTION TO TYPESCRIPT
TypeScript adds static typing to JavaScript, providing compile-time type checking and enhanced IDE support. TypeScript code is transpiled to JavaScript, so it runs anywhere JavaScript runs.
The most basic TypeScript feature is type annotations. Variables, parameters, and return types can be explicitly typed.
// Type annotations in TypeScript
let name: string = "Alice";
let age: number = 30;
let isActive: boolean = true;
let items: number[] = [1, 2, 3, 4, 5];
let tuple: [string, number] = ["Alice", 30];
// Function with type annotations
function add(a: number, b: number): number {
return a + b;
}
// Arrow function with types
const multiply = (a: number, b: number): number => {
return a * b;
};
TypeScript can infer types from initialization values, reducing the need for explicit annotations.
// Type inference
let inferredString = "Hello"; // Type: string
let inferredNumber = 42; // Type: number
let inferredArray = [1, 2, 3]; // Type: number[]
function inferredReturn(x: number) {
return x * 2; // Return type inferred as number
}
Interfaces define the shape of objects, providing contracts that objects must satisfy. This is similar to interfaces in Java, C#, or Go.
// Interface definition
interface User {
id: number;
name: string;
email: string;
age?: number; // Optional property
}
// Using the interface
function displayUser(user: User): void {
console.log(`${user.name} (${user.email})`);
if (user.age) {
console.log(`Age: ${user.age}`);
}
}
const user: User = {
id: 1,
name: "Bob",
email: "bob@example.com"
};
displayUser(user);
Type aliases provide alternative names for types and can represent complex type combinations.
// Type aliases
type ID = string | number;
type Status = "pending" | "approved" | "rejected";
interface Task {
id: ID;
title: string;
status: Status;
}
const task: Task = {
id: "T123",
title: "Review code",
status: "pending"
};
Union types allow a value to be one of several types, similar to sum types in Rust.
// Union types
function formatValue(value: string | number): string {
if (typeof value === "string") {
return value.toUpperCase();
} else {
return value.toFixed(2);
}
}
console.log(formatValue("hello")); // "HELLO"
console.log(formatValue(3.14159)); // "3.14"
Intersection types combine multiple types into one, requiring all properties from all types.
// Intersection types
interface Nameable {
name: string;
}
interface Ageable {
age: number;
}
type Person = Nameable & Ageable;
const person: Person = {
name: "Alice",
age: 30
};
Generics provide type parameters for reusable code, similar to generics in Java, C#, Go, or Rust.
// Generic function
function identity<T>(value: T): T {
return value;
}
const numberResult = identity<number>(42);
const stringResult = identity<string>("hello");
// Generic with type inference
const inferredResult = identity(100); // Type inferred as number
// Generic array function
function firstElement<T>(array: T[]): T | undefined {
return array[0];
}
const first = firstElement([1, 2, 3]); // Type: number | undefined
const firstStr = firstElement(["a", "b"]); // Type: string | undefined
Generic classes allow creating reusable data structures with type safety.
// Generic class
class Container<T> {
private value: T;
constructor(value: T) {
this.value = value;
}
getValue(): T {
return this.value;
}
setValue(value: T): void {
this.value = value;
}
}
const numberContainer = new Container<number>(42);
console.log(numberContainer.getValue()); // 42
const stringContainer = new Container<string>("hello");
console.log(stringContainer.getValue()); // "hello"
Generic constraints restrict type parameters to types that satisfy certain conditions.
// Generic constraints
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(item: T): void {
console.log(item.length);
}
logLength("hello"); // 5
logLength([1, 2, 3]); // 3
// logLength(42); // Error: number doesn't have length property
Enums provide named constants, similar to enums in Java, C#, or Rust.
// Numeric enum
enum Direction {
North,
East,
South,
West
}
let direction: Direction = Direction.North;
console.log(direction); // 0
// String enum
enum Status {
Pending = "PENDING",
Approved = "APPROVED",
Rejected = "REJECTED"
}
let status: Status = Status.Pending;
console.log(status); // "PENDING"
TypeScript 5.0 introduced const type parameters for more precise type inference with generic functions.
// Const type parameters (TypeScript 5.0+)
function createArray<const T>(items: readonly T[]): T[] {
return [...items];
}
const result = createArray(["a", "b", "c"] as const);
// Type is ["a", "b", "c"] not string[]
TypeScript 5.2 added the using keyword for explicit resource management, similar to using in C# or RAII in Rust.
// Using declarations (TypeScript 5.2+)
interface Disposable {
[Symbol.dispose](): void;
}
class FileHandle implements Disposable {
constructor(private filename: string) {
console.log(`Opening ${filename}`);
}
write(data: string): void {
console.log(`Writing to ${this.filename}: ${data}`);
}
[Symbol.dispose](): void {
console.log(`Closing ${this.filename}`);
}
}
function processFile() {
using file = new FileHandle("data.txt");
file.write("Hello, World!");
// File automatically disposed at end of scope
}
TypeScript 5.5 introduced inferred type predicates for better type narrowing.
// Inferred type predicates (TypeScript 5.5+)
function isString(value: unknown) {
return typeof value === "string";
}
function processValue(value: string | number) {
if (isString(value)) {
// TypeScript now knows value is string here
console.log(value.toUpperCase());
}
}
PART 9: ADVANCED TYPESCRIPT FEATURES
TypeScript's type system is remarkably powerful, supporting advanced patterns that enable precise type safety.
Mapped types transform properties of existing types, creating new types based on old ones.
// Mapped types
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
type Partial<T> = {
[P in keyof T]?: T[P];
};
interface User {
id: number;
name: string;
email: string;
}
type ReadonlyUser = Readonly<User>;
// All properties are readonly
type PartialUser = Partial<User>;
// All properties are optional
Conditional types select types based on conditions, similar to ternary operators but for types.
// Conditional types
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false
// Extract return type from function
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function getUser() {
return { id: 1, name: "Alice" };
}
type UserType = ReturnType<typeof getUser>;
// Type: { id: number; name: string; }
Template literal types create string literal types using template literal syntax.
// Template literal types
type Greeting = `Hello, ${string}`;
const greeting1: Greeting = "Hello, World"; // Valid
const greeting2: Greeting = "Hello, Alice"; // Valid
// const greeting3: Greeting = "Hi, Bob"; // Error
// Combining with unions
type Direction = "top" | "bottom" | "left" | "right";
type Margin = `margin-${Direction}`;
// Type: "margin-top" | "margin-bottom" | "margin-left" | "margin-right"
Utility types provide common type transformations built into TypeScript.
// Utility types
interface Todo {
title: string;
description: string;
completed: boolean;
}
// Pick: Select subset of properties
type TodoPreview = Pick<Todo, "title" | "completed">;
// Omit: Exclude properties
type TodoInfo = Omit<Todo, "completed">;
// Record: Create object type with specific keys and values
type PageInfo = Record<"home" | "about" | "contact", { title: string }>;
const pages: PageInfo = {
home: { title: "Home Page" },
about: { title: "About Us" },
contact: { title: "Contact Us" }
};
Discriminated unions provide type-safe handling of different variants, similar to enums in Rust.
// Discriminated unions
interface Circle {
kind: "circle";
radius: number;
}
interface Rectangle {
kind: "rectangle";
width: number;
height: number;
}
interface Triangle {
kind: "triangle";
base: number;
height: number;
}
type Shape = Circle | Rectangle | Triangle;
function calculateArea(shape: Shape): number {
switch (shape.kind) {
case "circle":
return Math.PI * shape.radius ** 2;
case "rectangle":
return shape.width * shape.height;
case "triangle":
return (shape.base * shape.height) / 2;
default:
// Exhaustiveness checking
const _exhaustive: never = shape;
throw new Error(`Unhandled shape: ${_exhaustive}`);
}
}
Type guards are functions that narrow types within conditional blocks.
// Type guards
interface Dog {
bark(): void;
}
interface Cat {
meow(): void;
}
// User-defined type guard
function isDog(animal: Dog | Cat): animal is Dog {
return (animal as Dog).bark !== undefined;
}
function makeSound(animal: Dog | Cat): void {
if (isDog(animal)) {
animal.bark(); // TypeScript knows it's a Dog
} else {
animal.meow(); // TypeScript knows it's a Cat
}
}
Assertion functions assert conditions about types, throwing errors if conditions are not met.
// Assertion functions
function assertIsString(value: unknown): asserts value is string {
if (typeof value !== "string") {
throw new Error("Value must be a string");
}
}
function processValue(value: unknown): void {
assertIsString(value);
// TypeScript now knows value is string
console.log(value.toUpperCase());
}
Decorators are experimental features that add metadata and modify classes, methods, and properties. They are similar to attributes in C# or annotations in Java.
// Decorators (experimental)
function logged(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Calling ${propertyKey} with args:`, args);
const result = originalMethod.apply(this, args);
console.log(`${propertyKey} returned:`, result);
return result;
};
return descriptor;
}
class Calculator {
@logged
add(a: number, b: number): number {
return a + b;
}
}
const calc = new Calculator();
calc.add(5, 3);
// Logs: Calling add with args: [5, 3]
// Logs: add returned: 8
TypeScript 5.6 introduced improved type narrowing for truthiness checks and better support for iterator helpers.
// Improved narrowing (TypeScript 5.6+)
function processValue(value: string | null | undefined) {
if (value) {
// TypeScript narrows to string (excludes null and undefined)
console.log(value.toUpperCase());
}
}
PART 10: TYPESCRIPT CONFIGURATION AND PROJECT SETUP
TypeScript projects use a tsconfig.json file to configure the compiler. This file specifies compilation options, included files, and project structure.
// tsconfig.json example
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"lib": ["ES2022", "DOM"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"declaration": true,
"declarationMap": true,
"sourceMap": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
The strict flag enables all strict type checking options, which is recommended for new projects. Individual strict options can be controlled separately.
// Strict mode options
{
"compilerOptions": {
"strict": true,
// Or enable individually:
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true
}
}
TypeScript supports path mapping for cleaner imports, avoiding relative path chains.
// Path mapping configuration
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@models/*": ["models/*"],
"@utils/*": ["utils/*"],
"@services/*": ["services/*"]
}
}
}
With path mapping, imports become cleaner and more maintainable.
// Using path mapping
import { User } from "@models/user";
import { validateEmail } from "@utils/validation";
import { UserService } from "@services/user-service";
TypeScript can generate declaration files for libraries, allowing other TypeScript projects to use them with full type information.
// Library configuration
{
"compilerOptions": {
"declaration": true,
"declarationMap": true,
"outDir": "./dist",
"rootDir": "./src"
}
}
PART 11: DEVELOPMENT TOOLS AND IDES
Modern JavaScript and TypeScript development relies on excellent tooling support. Several IDEs and editors provide comprehensive features for these languages.
Visual Studio Code is the most popular editor for JavaScript and TypeScript development. It is built with TypeScript and provides exceptional support including IntelliSense, debugging, refactoring, and integrated terminal. VS Code includes built-in TypeScript support and extensive extension marketplace. Popular extensions include ESLint for linting, Prettier for formatting, and language-specific extensions for frameworks like React or Vue.
WebStorm by JetBrains is a full-featured IDE specifically designed for web development. It provides intelligent code completion, advanced refactoring, built-in debugger, and integrated version control. WebStorm has excellent TypeScript support and deep integration with Node.js and modern frameworks. It requires a paid license but offers powerful features for professional development.
Sublime Text with appropriate plugins can be configured for JavaScript and TypeScript development. It is lightweight and fast but requires more manual configuration than VS Code or WebStorm. The TypeScript plugin provides syntax highlighting and basic IntelliSense.
Vim and Neovim can be configured with plugins like CoC (Conquer of Completion) or native LSP support for TypeScript development. This setup appeals to developers who prefer modal editing and keyboard-driven workflows.
The TypeScript Language Server provides IDE features to any editor that supports the Language Server Protocol. This enables consistent TypeScript support across different editors.
For building and bundling JavaScript and TypeScript applications, several tools are commonly used.
Webpack is a module bundler that processes JavaScript, TypeScript, CSS, and other assets. It creates optimized bundles for production deployment. Webpack uses loaders to transform files and plugins to extend functionality.
// webpack.config.js example
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Vite is a modern build tool that provides extremely fast development server startup and hot module replacement. It uses native ES modules during development and Rollup for production builds. Vite has excellent TypeScript support out of the box.
// vite.config.ts example
import { defineConfig } from 'vite';
export default defineConfig({
build: {
outDir: 'dist',
sourcemap: true
},
server: {
port: 3000
}
});
ESBuild is an extremely fast JavaScript and TypeScript bundler and minifier written in Go. It is often used as part of other build tools or directly for simple projects.
Rollup is a module bundler optimized for libraries. It produces smaller bundles than Webpack for library code and has excellent tree-shaking capabilities.
For package management, npm (Node Package Manager) is the default package manager for Node.js. It manages dependencies, scripts, and package publishing. The package.json file defines project metadata and dependencies.
// package.json example
{
"name": "my-app",
"version": "1.0.0",
"description": "Example application",
"main": "dist/index.js",
"scripts": {
"build": "tsc",
"dev": "tsc --watch",
"test": "jest",
"lint": "eslint src/**/*.ts"
},
"dependencies": {
"express": "^4.18.0"
},
"devDependencies": {
"@types/express": "^4.17.0",
"typescript": "^5.6.0",
"eslint": "^8.50.0",
"@typescript-eslint/parser": "^6.0.0",
"@typescript-eslint/eslint-plugin": "^6.0.0"
}
}
Yarn is an alternative package manager that provides faster installation and better dependency resolution than npm. It uses the same package.json format.
pnpm is another package manager that saves disk space by using a content-addressable store for packages. Multiple projects share the same packages, reducing duplication.
For code quality and consistency, ESLint is the standard linting tool for JavaScript and TypeScript. It identifies problematic patterns and enforces coding standards.
// .eslintrc.json example
{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"plugins": ["@typescript-eslint"],
"env": {
"node": true,
"es2022": true
},
"rules": {
"no-console": "warn",
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/explicit-function-return-type": "warn"
}
}
Prettier is an opinionated code formatter that enforces consistent style across the codebase. It integrates with ESLint to handle formatting while ESLint handles code quality.
// .prettierrc.json example
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 4
}
For testing, Jest is the most popular testing framework for JavaScript and TypeScript. It provides test runner, assertion library, and mocking capabilities in one package.
// Jest test example
import { add, multiply } from './math';
describe('Math functions', () => {
test('add should sum two numbers', () => {
expect(add(2, 3)).toBe(5);
expect(add(-1, 1)).toBe(0);
});
test('multiply should multiply two numbers', () => {
expect(multiply(3, 4)).toBe(12);
expect(multiply(0, 5)).toBe(0);
});
});
Vitest is a modern testing framework designed for Vite projects. It provides Jest-compatible API with faster execution.
For debugging, Node.js includes a built-in debugger that can be used from the command line or integrated with IDEs. VS Code provides excellent debugging support with breakpoints, watch expressions, and call stack inspection.
// launch.json for VS Code debugging
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug TypeScript",
"program": "${workspaceFolder}/src/index.ts",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"sourceMaps": true
}
]
}
PART 12: SERVER-SIDE JAVASCRIPT WITH NODE.JS
Node.js brings JavaScript to the server, enabling full-stack JavaScript development. Node.js uses the V8 JavaScript engine and provides APIs for file system access, networking, and other server-side operations.
A basic Node.js HTTP server demonstrates the event-driven architecture.
// Basic HTTP server with Node.js
import http from 'http';
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello, World!\n');
});
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
});
Express is the most popular web framework for Node.js, providing routing, middleware, and request handling.
// Express server with TypeScript
import express, { Request, Response, NextFunction } from 'express';
const app = express();
const PORT = 3000;
// Middleware for parsing JSON
app.use(express.json());
// Logging middleware
app.use((req: Request, res: Response, next: NextFunction) => {
console.log(`${req.method} ${req.path}`);
next();
});
// Route handlers
app.get('/', (req: Request, res: Response) => {
res.json({ message: 'Welcome to the API' });
});
app.get('/users/:id', (req: Request, res: Response) => {
const userId = req.params.id;
res.json({ id: userId, name: 'John Doe' });
});
app.post('/users', (req: Request, res: Response) => {
const userData = req.body;
res.status(201).json({ id: 123, ...userData });
});
// Error handling middleware
app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
console.error(err.stack);
res.status(500).json({ error: 'Internal server error' });
});
app.listen(PORT, () => {
console.log(`Server listening on port ${PORT}`);
});
NestJS is a TypeScript-first framework for building scalable server applications. It uses decorators and dependency injection, providing architecture similar to Angular.
// NestJS controller example
import { Controller, Get, Post, Body, Param } from '@nestjs/common';
interface CreateUserDto {
name: string;
email: string;
}
@Controller('users')
export class UsersController {
@Get()
findAll(): string {
return 'This returns all users';
}
@Get(':id')
findOne(@Param('id') id: string): string {
return `This returns user ${id}`;
}
@Post()
create(@Body() createUserDto: CreateUserDto): string {
return `Created user: ${createUserDto.name}`;
}
}
File system operations in Node.js use the fs module, which provides both callback and promise-based APIs.
// File system operations with TypeScript
import { promises as fs } from 'fs';
import path from 'path';
async function readConfigFile(filename: string): Promise<any> {
try {
const filePath = path.join(__dirname, filename);
const data = await fs.readFile(filePath, 'utf-8');
return JSON.parse(data);
} catch (error) {
console.error('Error reading config file:', error);
throw error;
}
}
async function writeLogFile(message: string): Promise<void> {
const logPath = path.join(__dirname, 'logs', 'app.log');
const timestamp = new Date().toISOString();
const logEntry = `[${timestamp}] ${message}\n`;
try {
await fs.appendFile(logPath, logEntry);
} catch (error) {
console.error('Error writing to log file:', error);
}
}
Database access in Node.js typically uses libraries specific to each database. For PostgreSQL, the pg library is common. For MongoDB, mongoose provides an ODM (Object Document Mapper).
// PostgreSQL with TypeScript
import { Pool } from 'pg';
const pool = new Pool({
host: 'localhost',
port: 5432,
database: 'myapp',
user: 'dbuser',
password: 'dbpassword'
});
interface User {
id: number;
name: string;
email: string;
}
async function getUser(userId: number): Promise<User | null> {
try {
const result = await pool.query(
'SELECT id, name, email FROM users WHERE id = $1',
[userId]
);
return result.rows[0] || null;
} catch (error) {
console.error('Database error:', error);
throw error;
}
}
async function createUser(name: string, email: string): Promise<User> {
try {
const result = await pool.query(
'INSERT INTO users (name, email) VALUES ($1, $2) RETURNING *',
[name, email]
);
return result.rows[0];
} catch (error) {
console.error('Database error:', error);
throw error;
}
}
Environment variables configure applications without hardcoding sensitive data. The dotenv package loads variables from .env files.
// Using environment variables
import dotenv from 'dotenv';
dotenv.config();
interface Config {
port: number;
databaseUrl: string;
jwtSecret: string;
}
function getConfig(): Config {
return {
port: parseInt(process.env.PORT || '3000', 10),
databaseUrl: process.env.DATABASE_URL || '',
jwtSecret: process.env.JWT_SECRET || ''
};
}
const config = getConfig();
console.log(`Starting server on port ${config.port}`);
PART 13: FRONTEND DEVELOPMENT WITH REACT
React is a popular library for building user interfaces using a component-based architecture. React components can be written in JavaScript or TypeScript, with TypeScript providing better type safety.
Functional components with hooks are the modern approach to React development. The useState hook manages component state.
// React functional component with TypeScript
import React, { useState } from 'react';
interface CounterProps {
initialCount?: number;
}
const Counter: React.FC<CounterProps> = ({ initialCount = 0 }) => {
const [count, setCount] = useState<number>(initialCount);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
const reset = () => {
setCount(initialCount);
};
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
<button onClick={reset}>Reset</button>
</div>
);
};
export default Counter;
The useEffect hook handles side effects like data fetching, subscriptions, or DOM manipulation.
// useEffect for data fetching
import React, { useState, useEffect } from 'react';
interface User {
id: number;
name: string;
email: string;
}
const UserProfile: React.FC<{ userId: number }> = ({ userId }) => {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchUser = async () => {
try {
setLoading(true);
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error('Failed to fetch user');
}
const data = await response.json();
setUser(data);
setError(null);
} catch (err) {
setError(err instanceof Error ? err.message : 'Unknown error');
setUser(null);
} finally {
setLoading(false);
}
};
fetchUser();
}, [userId]); // Re-run when userId changes
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
if (!user) {
return <div>No user found</div>;
}
return (
<div>
<h2>{user.name}</h2>
<p>Email: {user.email}</p>
</div>
);
};
export default UserProfile;
Custom hooks encapsulate reusable logic across components.
// Custom hook for form handling
import { useState, ChangeEvent, FormEvent } from 'react';
interface FormValues {
[key: string]: string;
}
function useForm<T extends FormValues>(initialValues: T) {
const [values, setValues] = useState<T>(initialValues);
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setValues({
...values,
[name]: value
});
};
const handleSubmit = (callback: (values: T) => void) => {
return (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
callback(values);
};
};
const reset = () => {
setValues(initialValues);
};
return {
values,
handleChange,
handleSubmit,
reset
};
}
// Using the custom hook
const LoginForm: React.FC = () => {
const { values, handleChange, handleSubmit, reset } = useForm({
username: '',
password: ''
});
const onSubmit = (formValues: typeof values) => {
console.log('Login attempt:', formValues);
// Handle login logic
reset();
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
type="text"
name="username"
value={values.username}
onChange={handleChange}
placeholder="Username"
/>
<input
type="password"
name="password"
value={values.password}
onChange={handleChange}
placeholder="Password"
/>
<button type="submit">Login</button>
</form>
);
};
Context API provides a way to share data across component tree without prop drilling.
// Context for theme management
import React, { createContext, useContext, useState, ReactNode } from 'react';
type Theme = 'light' | 'dark';
interface ThemeContextType {
theme: Theme;
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
const [theme, setTheme] = useState<Theme>('light');
const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
export const useTheme = (): ThemeContextType => {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within ThemeProvider');
}
return context;
};
// Using the theme context
const ThemedButton: React.FC = () => {
const { theme, toggleTheme } = useTheme();
return (
<button
onClick={toggleTheme}
style={{
background: theme === 'light' ? '#fff' : '#333',
color: theme === 'light' ? '#333' : '#fff'
}}
>
Toggle Theme (Current: {theme})
</button>
);
};
PART 14: FRONTEND DEVELOPMENT WITH ANGULAR
Angular is a comprehensive framework for building web applications. It is written in TypeScript and provides a complete solution including routing, forms, HTTP client, and dependency injection.
Angular components use decorators to define metadata and TypeScript classes to implement logic.
// Angular component with TypeScript
import { Component, OnInit } from '@angular/core';
interface User {
id: number;
name: string;
email: string;
}
@Component({
selector: 'app-user-list',
template: `
<div>
<h2>Users</h2>
<ul>
<li *ngFor="let user of users">
{{ user.name }} - {{ user.email }}
</li>
</ul>
</div>
`,
styles: [`
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
}
`]
})
export class UserListComponent implements OnInit {
users: User[] = [];
ngOnInit(): void {
this.loadUsers();
}
private loadUsers(): void {
this.users = [
{ id: 1, name: 'Alice', email: 'alice@example.com' },
{ id: 2, name: 'Bob', email: 'bob@example.com' },
{ id: 3, name: 'Charlie', email: 'charlie@example.com' }
];
}
}
Angular services provide shared functionality across components using dependency injection.
// Angular service
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
interface User {
id: number;
name: string;
email: string;
}
@Injectable({
providedIn: 'root'
})
export class UserService {
private apiUrl = 'https://api.example.com/users';
constructor(private http: HttpClient) {}
getUsers(): Observable<User[]> {
return this.http.get<User[]>(this.apiUrl);
}
getUser(id: number): Observable<User> {
return this.http.get<User>(`${this.apiUrl}/${id}`);
}
createUser(user: Omit<User, 'id'>): Observable<User> {
return this.http.post<User>(this.apiUrl, user);
}
updateUser(id: number, user: Partial<User>): Observable<User> {
return this.http.patch<User>(`${this.apiUrl}/${id}`, user);
}
deleteUser(id: number): Observable<void> {
return this.http.delete<void>(`${this.apiUrl}/${id}`);
}
}
Components inject services through the constructor.
// Component using service
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-users',
template: `
<div>
<h2>Users</h2>
<div *ngIf="loading">Loading...</div>
<div *ngIf="error">Error: {{ error }}</div>
<ul *ngIf="!loading && !error">
<li *ngFor="let user of users">
{{ user.name }}
</li>
</ul>
</div>
`
})
export class UsersComponent implements OnInit {
users: User[] = [];
loading = false;
error: string | null = null;
constructor(private userService: UserService) {}
ngOnInit(): void {
this.loadUsers();
}
private loadUsers(): void {
this.loading = true;
this.userService.getUsers().subscribe({
next: (users) => {
this.users = users;
this.loading = false;
},
error: (err) => {
this.error = err.message;
this.loading = false;
}
});
}
}
Angular forms provide two approaches: template-driven and reactive. Reactive forms offer better type safety and testability.
// Reactive form with TypeScript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-user-form',
template: `
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<div>
<label>Name:</label>
<input type="text" formControlName="name">
<div *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched">
Name is required
</div>
</div>
<div>
<label>Email:</label>
<input type="email" formControlName="email">
<div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
Valid email is required
</div>
</div>
<button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>
`
})
export class UserFormComponent implements OnInit {
userForm!: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.userForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
}
onSubmit(): void {
if (this.userForm.valid) {
console.log('Form data:', this.userForm.value);
// Handle form submission
}
}
}
PART 15: WEBASSEMBLY INTEGRATION
WebAssembly allows running high-performance code in the browser alongside JavaScript. JavaScript serves as the glue code, calling WebAssembly functions and handling browser APIs.
WebAssembly modules are loaded and instantiated from JavaScript.
// Loading WebAssembly module
async function loadWasmModule() {
try {
const response = await fetch('module.wasm');
const buffer = await response.arrayBuffer();
const module = await WebAssembly.instantiate(buffer);
return module.instance.exports;
} catch (error) {
console.error('Failed to load WebAssembly module:', error);
throw error;
}
}
// Using WebAssembly functions
async function runWasm() {
const wasmExports = await loadWasmModule();
// Call exported functions
const result = wasmExports.add(5, 3);
console.log('Result from WASM:', result);
}
runWasm();
AssemblyScript is a TypeScript-like language that compiles to WebAssembly. It allows writing WebAssembly modules using familiar syntax.
// AssemblyScript example (compiles to WebAssembly)
export function fibonacci(n: i32): i32 {
if (n <= 1) {
return n;
}
return fibonacci(n - 1) + fibonacci(n - 2);
}
export function isPrime(n: i32): bool {
if (n <= 1) {
return false;
}
for (let i: i32 = 2; i * i <= n; i++) {
if (n % i === 0) {
return false;
}
}
return true;
}
JavaScript code loads and uses the compiled AssemblyScript module.
// Using AssemblyScript module from JavaScript
import { fibonacci, isPrime } from './build/module.js';
async function runAssemblyScript() {
// Calculate Fibonacci number
const fib10 = fibonacci(10);
console.log('Fibonacci(10):', fib10);
// Check if number is prime
const prime = isPrime(17);
console.log('Is 17 prime?', prime);
}
runAssemblyScript();
WebAssembly is particularly useful for computationally intensive tasks like image processing, cryptography, or game engines where JavaScript performance is insufficient.
// Image processing with WebAssembly
async function processImage(imageData: ImageData): Promise<ImageData> {
const wasmExports = await loadWasmModule();
// Pass image data to WebAssembly
const memory = new Uint8Array(wasmExports.memory.buffer);
const dataPtr = wasmExports.allocate(imageData.data.length);
// Copy data to WebAssembly memory
memory.set(imageData.data, dataPtr);
// Process image in WebAssembly
wasmExports.applyFilter(dataPtr, imageData.width, imageData.height);
// Copy result back to JavaScript
const processedData = memory.slice(dataPtr, dataPtr + imageData.data.length);
imageData.data.set(processedData);
// Free WebAssembly memory
wasmExports.deallocate(dataPtr);
return imageData;
}
PART 16: SUMMARY AND CONCLUSIONS
JavaScript and TypeScript have evolved into powerful languages for modern software development. JavaScript provides the runtime and ecosystem, while TypeScript adds static typing and enhanced tooling. Together, they enable development across the entire stack from frontend to backend, mobile to desktop, and even embedded systems.
The historical evolution from a simple browser scripting language to a comprehensive platform demonstrates JavaScript's adaptability and the community's commitment to improvement. The annual ECMAScript release cycle ensures continuous enhancement while maintaining backward compatibility. TypeScript's success shows the value of optional static typing in large-scale applications.
For developers experienced in Java, Go, C#, Rust, or Python, JavaScript and TypeScript offer familiar concepts with different implementations. The prototype-based inheritance differs from classical inheritance but modern class syntax provides familiar patterns. The dynamic typing at runtime contrasts with compile-time type systems, though TypeScript bridges this gap. The asynchronous programming model based on promises and async/await provides powerful concurrency without threads.
The JavaScript ecosystem is vast and rapidly evolving. The npm registry contains over two million packages covering virtually every domain. Popular frameworks like React, Angular, and Vue.js provide structured approaches to building user interfaces. Server-side frameworks like Express and NestJS enable scalable backend development. Build tools like Webpack, Vite, and ESBuild optimize applications for production.
TypeScript has become the preferred choice for large-scale applications and enterprise development. Its type system catches errors at compile time, improves code documentation, and enables powerful refactoring tools. The gradual typing approach allows incremental adoption in existing JavaScript projects. Modern frameworks increasingly provide first-class TypeScript support.
Development tooling for JavaScript and TypeScript is exceptional. Visual Studio Code provides outstanding support with IntelliSense, debugging, and refactoring. The Language Server Protocol ensures consistent IDE features across different editors. Linters like ESLint and formatters like Prettier maintain code quality and consistency. Testing frameworks like Jest and Vitest provide comprehensive testing capabilities.
Node.js brings JavaScript to the server with an event-driven, non-blocking architecture ideal for I/O-intensive applications. The same language across frontend and backend enables code sharing and unified development workflows. Frameworks like Express provide minimalist approaches while NestJS offers comprehensive architecture for enterprise applications.
Frontend frameworks provide different philosophies and trade-offs. React focuses on component composition with a minimal core and extensive ecosystem. Angular provides a complete framework with opinionated structure and comprehensive features. Vue.js balances between React's flexibility and Angular's completeness. All three have excellent TypeScript support.
WebAssembly integration extends JavaScript's capabilities by allowing high-performance code alongside JavaScript. This enables computationally intensive applications in the browser while JavaScript handles UI and browser APIs. AssemblyScript provides a TypeScript-like language for writing WebAssembly modules.
The future of JavaScript and TypeScript looks bright. The ECMAScript specification continues evolving with features like pattern matching, records and tuples, and temporal API in various stages. TypeScript continues improving type inference, performance, and developer experience. The ecosystem grows with new frameworks, tools, and best practices emerging regularly.
For developers learning JavaScript and TypeScript, the key is understanding the fundamental concepts and idioms. Master asynchronous programming with promises and async/await. Understand prototypal inheritance and modern class syntax. Learn functional programming patterns with array methods. Embrace TypeScript's type system for better code quality. Practice with real projects to internalize these concepts.
The investment in learning JavaScript and TypeScript pays dividends across multiple domains. Whether building web applications, mobile apps, desktop software, server APIs, or command-line tools, these languages provide the foundation. The skills transfer across different frameworks and platforms, making developers versatile and productive.
JavaScript and TypeScript represent more than just programming languages. They embody a philosophy of pragmatic evolution, community-driven development, and universal applicability. From humble beginnings as a browser scripting language, JavaScript has become one of the most important programming languages in the world. TypeScript enhances this foundation with type safety and tooling while maintaining JavaScript's flexibility and reach.
The journey from JavaScript to TypeScript mirrors the journey from dynamic to static typing, from small scripts to large applications, from simple web pages to complex distributed systems. Understanding both languages and their relationship provides developers with powerful tools for building modern software. The ecosystem continues growing, the community remains vibrant, and the future holds exciting possibilities for these languages that have transformed software development.
No comments:
Post a Comment