Key Syntax Differences Between TypeScript and JavaScript

Type Annotations and Static Type Checking

TypeScript introduces a static type system that allows developers to define types for variables, function parameters, and return values. This enables compile-time type checking and helps catch errors before runtime.

let completed: boolean = false;
function calculate(a: number, b: number): number {
    return a * b;
}

Interfaces

TypeScript provides interfaces to define the structure that objects must conform to. Interfaces specify what properties and methods an object should have.

interface User {
    firstName: string;
    id: number;
}

function introduce(user: User): void {
    console.log(`Hi, I'm ${user.firstName}`);
}

Type Aliases

TypeScript allows creating custom type names using the type keyword. This is useful for creating reusable type definitions.

type Coordinates = {
    latitude: number;
    longitude: number;
};

Enumerations

TypeScript supports enums, which provide meaningful names to numeric values. This improves code readability when working with related constant values.

enum Direction {
    Up,
    Down,
    Left,
    Right
}

let heading: Direction = Direction.Right;

Generics

Generics enable writing flexible, reusible code that works with multiple types while maintaining type safety. They allow functions, interfaces, and classes to operate on various data types without sacrificing type information.

function wrapInArray<T>(item: T): T[] {
    return [item];
}

Decorators

Decorators provide a way to add metadata or modify the behavior of classes and their members. They follow a declarative syntax and are useful for framework integration.

function frozen(target: Function): void {
    Object.freeze(target);
    Object.freeze(target.prototype);
}

@frozen
class Message {
    content: string;
}

Module System

TypeScript has supported modular code organization since its early vertions, using ES Module standards. This feature was later adopted by JavaScript in ES6 (ES2015).

import { NgModule } from '@angular/core';

Namespaces

Namespaces help organize code and prevent naming conflicts by grouping related functionality under a single name.

namespace FormRules {
    export interface Validator {
        check(value: string): boolean;
    }
}

Non-Null Assertion Operator

TypeScript encludes a non-null assertion operator that tells the compiler a value is guaranteed to not be null or undefined. This is useful when the developer knows better than the type system.

function processValue(input?: number | null): void {
    // No compile-time error despite optional parameter
    console.log(input!.toFixed(2));
}

Tags: TypeScript javascript Programming Languages Syntax web development

Posted on Thu, 28 May 2026 20:06:45 +0000 by BraniffNET