Chapter 3: Fundamental differences between JavaScript and TypeScript

In this chapter we will see what are the fundamental differences between JavaScript and TypeScript:

Static vs Dynamic Typing
Primitive and complex types
Custom Interfaces and Types
Modules and namespaces
Classes, Inheritance and Decorators

🔗 Do you like Techelopment? Check out the website for all the details!

1. Static vs Dynamic Typing

🔸 JavaScript does not enforce any type. A variable can change type during execution:

let x = 5;
x = "hello"; // everything ok

🔹 TypeScript allows (and encourages) the use of static types, that is, types that do not change:

let x: number = 5;
x = "hello"; // Error: You cannot assign a string to a number variable

This check happens at compile time, not during execution.

2. Explicit definition of types

In TypeScript you can declare types for variables, parameters, function returns, objects, and more:

function greeting(name: string): string {
  return `Hello, ${name}`;
}

In JavaScript you can't do this, and the type of the name parameter is unknown until runtime.

3. Custom Interfaces and Types

🔸 In JavaScript, you often define objects "on the fly", without knowing exactly their shape:

const user = {
  name: "Carrie",
  age: 25,
};

🔹 In TypeScript, you can define an interface or a type to describe the expected structure.a:

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "Carrie",
  age: 25,
};

Pro: Every field is checked. If you misspell name or leave out age, TypeScript will warn you.

4. Union types

TypeScript lets you say: "this variable can be one thing or another":

let value: string | number;

value= "hello";
value = 42;
value = true; // Error: it is neither a string nor a number

In JavaScript, anything goes, but it can cause bugs if you expect one type and get another.

5. Funzioni più sicure

🔸 JavaScript doesn't warn you if you call a function the wrong way:

function sum(a, b) {
  return a + b;
}

sum(3); // NaN, no errors

🔹 TypeScript forces you to honor the function signature:

function sum(a: number, b: number): number {
  return a + b;
}

sum(3); // Error: missing argument

6. Classes with access modifiers

TypeScript enhances classes by introducing concepts from classic OOP languages:

class Person {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  greeting(): string {
    return `Hello, I am ${this.name}`;
  }
}

const p = new Person("Mike");
console.log(p.name); // Error: "name" is private

In JavaScript, all class members are public by default.

7. Decorators (advanced feature)

TypeScript supports decorators, a special function that can modify the behavior of classes or methods. It is still an "experimental" feature but widely used in frameworks such as Angular and NestJS.

Simple example:

function Log(target: any, key: string) {
  console.log(`Called method: ${key}`);
}

class MyClasse {
  @Log
  greeting() {
    console.log("Hello");
  }
}

8. Return type and `void`

You can clearly state what a function returns, or specify that it returns nothing. (void):

function logMessage(msg: string): void {
  console.log(msg);
}

This is very useful to understand the purpose of the function at a glance, without reading the body.

9. Intelligent type inference

TypeScript understands types by itself in many cases:

let greet = "Hello"; // it is a string
greet = 42; // Error

You don’t always have to write your types by hand: just use good practices and TypeScript will do the rest.

10. IDE suggestions and static checking

With TypeScript, your editor (especially VSCode) becomes much smarter:

Suggests valid methods and properties
It warns you of errors before you even save
It helps you navigate the code as if it were living documentation.

Example:

const today = new Date();
today.getFullYear(); // with IntelliSense

In summary

JavaScript	TypeScript
Dynamic types	Optional static types
No writing time checks	Bug checking during development
No native interface support	Interfaces for objects, classes, functions
Less "smart" IDE	IntelliSense, safe refactoring
Everything happens at runtime	Errors that can be found before the build

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog