TS Fundamentals: Reference Guide

Overview

This guide serves as a structured reference for TypeScript fundamentals, covering essential concepts from basic type annotations to advanced patterns. TypeScript extends JavaScript by adding static type definitions, enabling better development tooling, early error detection, and improved code maintainability.

1. Environment Setup & Basic Output

TypeScript vs JavaScript

Difference: TypeScript requires compilation to JavaScript before execution, while JavaScript runs directly.

Key Differences:

• TypeScript compiles to JavaScript before execution

• TypeScript provides static type checking at compile time

• TypeScript enhances IDE support with autocomplete and error detection

• JavaScript: No compilation step, runs directly in browser/Node.js

  
  

2. Type Annotations & Variable Declarations

TypeScript vs JavaScript

Major Difference: TypeScript allows explicit type declarations; JavaScript does not.

TypeScript Advantages:

• Compile-time error detection

• Better IDE IntelliSense

• Self-documenting code through types

• Refactoring safety

JavaScript: Variables can hold any type; type errors only discovered at runtime.

3. Advanced Type System

TypeScript vs JavaScript

Major Difference: TypeScript has a sophisticated type system; JavaScript has dynamic typing only.

Professional Benefits (TypeScript Only):

• Prevents runtime type errors

• Enforces consistent data structures

• Enables advanced IDE features

• JavaScript: Maximum flexibility but no type safety

4. String Manipulation with Type Safety

TypeScript vs JavaScript

Difference: TypeScript provides compile-time type checking for string operations; JavaScript only checks at runtime.

Type Safety Benefits (TypeScript Only):

• Catches string concatenation errors at compile time

• Ensures consistent string formatting

• Prevents accidental type coercion issues

JavaScript: Same syntax but type errors only discovered at runtime.

5. Interfaces & Object Type Definitions

TypeScript vs JavaScript

Major Difference: TypeScript has interfaces for structural typing; JavaScript has no equivalent.

TypeScript Exclusive Features:

• Interface definitions for object structure

• Compile-time property validation

• IDE autocomplete for object properties

• Optional property syntax

JavaScript: Objects are flexible but provide no structural guarantees.

6. Type-Safe Comparisons

TypeScript vs JavaScript

Difference: TypeScript provides compile-time warnings for potentially problematic comparisons.

TypeScript Advantages:

• Prevents accidental type coercion

• Enforces explicit type conversions

• Catches comparison errors at compile time

JavaScript: Same operators but no compile-time safety nets.

7. Logical Operations with Type Safety

TypeScript vs JavaScript

Difference: TypeScript enforces boolean types in logical operations; JavaScript is more permissive.

TypeScript Benefits:

• Enforces boolean types in logical contexts

• Structured data validation through interfaces

• Compile-time checking of property access

JavaScript: More flexible with truthy/falsy values but less predictable.

8. Type-Safe Control Flow

TypeScript vs JavaScript

Minor Difference: Same control flow syntax, but TypeScript adds type checking within conditionals.

Same in Both: Control flow syntax and logic are identical. TypeScript Adds: Type checking within conditionals and structured data validation.

9. Typed Iteration Patterns

TypeScript vs JavaScript

Minor Difference: Same loop syntax, but TypeScript provides type inference and safety.

Same in Both: All loop syntax and array methods are identical. TypeScript Adds: Compile-time type inference, IDE support, and type annotations for clarity.

10. Function Signatures & Type Safety

TypeScript vs JavaScript

Major Difference: TypeScript allows explicit parameter and return type annotations; JavaScript does not.

TypeScript Exclusive Features:

• Parameter and return type annotations

• Optional parameter syntax (?)

• Function overloads

• Compile-time parameter validation

JavaScript: Same functionality but no compile-time type safety.

11. Module System & Type Exports

TypeScript vs JavaScript

Difference: TypeScript can export types and interfaces; JavaScript can only export values.

TypeScript Exclusive:

• Interface exports/imports

• Type alias exports

• Type-only imports

• Implementation type checking

JavaScript: Same module syntax but limited to value exports/imports.

12. Class-Based Architecture with Types

TypeScript vs JavaScript

Difference: TypeScript adds access modifiers, type annotations, and interface implementation to classes.

TypeScript Exclusive Features:

• Access modifiers (private, public, protected)

• Parameter properties

• Type annotations on methods and properties

• Generic methods

• Interface implementation

JavaScript: Basic class functionality without type safety or access control.

13. Configuration & Build Setup

TypeScript vs JavaScript

Major Difference: TypeScript requires compilation configuration; JavaScript runs directly.

TypeScript Requirements:

• TypeScript compiler (tsc)

• Configuration file (tsconfig.json)

• Type definitions for libraries

• Build step before execution

JavaScript: No compilation, runs directly.

14. Advanced TypeScript Features

TypeScript vs JavaScript

Major Difference: Advanced features are TypeScript-exclusive and have no JavaScript equivalent.

TypeScript Exclusive:

• Generics for reusable, type-safe code

• Utility types for type transformations

• Conditional and mapped types

• Advanced type inference

• Compile-time type manipulation

JavaScript: These concepts don't exist; would require runtime solutions and documentation.

Summary

Where TypeScript and JavaScript are Same:

• Basic syntax (variables, functions, loops, conditionals)

• Runtime behavior and performance

• Standard library and built-in objects

• Module import/export syntax

• Class syntax basics

Where TypeScript Differs from JavaScript:

• Type System: Static typing vs dynamic typing

• Interfaces: Structural type definitions vs none

• Compilation: Requires build step vs direct execution

• IDE Support: Enhanced autocomplete and error detection

• Error Detection: Compile-time vs runtime only

• Advanced Features: Generics, utility types, decorators vs none

• Configuration: Requires tsconfig.json vs none needed

Key Advantage of TypeScript:

Compile-time safety - catch errors before code runs, better tooling, and improved maintainability.

Key Advantage of JavaScript:

Simplicity - no build step, maximum flexibility, and faster development iteration.