TypeScript.

md 2025-05-13

TypeScript
Installing TypeScript
1. Install Node.js

Go to Node.js Official Website

Download LTS version
Verify installation with:

node -v
npm -v

2. Install TypeScript via npm

Run:

npm install -g typescript

3. Verify TypeScript Installation

Verify with:

tsc -v

4. Creating a TypeScript File

Create app.ts:

let message: string = "Hello, TypeScript!";

console.log(message);

5. Compile TypeScript to JavaScript

Run:

tsc app.ts

6. Run the JavaScript File

Run with:

node app.js

7. Automatically Compile TypeScript

Use --watch flag:

1/6
TypeScript.md 2025-05-13

tsc --watch

8. Use a TypeScript Configuration File (Optional)

Generate tsconfig.json:

tsc --init

Troubleshooting

Permission Issues: Use sudo (Linux/Mac) or admin command prompt (Windows):

sudo npm install -g typescript

Update TypeScript:

npm install -g typescript@latest

Functions
1. Function Declaration: Functions are defined with type annotations for parameters and return types.

function name(param: type): returnType { ... }

2. Arrow Functions: Shorter syntax for writing functions, with lexical this.

const name = (param: type): returnType => { ... }

3. Function Types: You can define a function signature type using a type alias.

type FunctionType = (param1: type1, param2: type2) => returnType

4. Optional Parameters: Use ? to make parameters optional.

function name(param1?: type)

5. Default Parameters: Assign default values to parameters.

function name(param1 = defaultValue)

6. Rest Parameters: Collects all the remaining arguments into an array.

function name(...params: type[])

Interfaces
1. Basic Interface Definition: Defines the shape of an object with specific properties and their types.
2. Optional Properties: Use ? to make properties optional.
3. Read-only Properties: Use readonly to prevent modification of properties.
4. Methods in Interfaces: Define method signatures in the interface to specify required methods for objects.
5. Extending Interfaces: Use extends to create new interfaces that build on existing ones.
6. Function Types: Use interfaces to define function signatures.
7. Interface as a Contract: Classes or objects must implement the structure defined by the interface.
8. Interface vs Type Alias: Interfaces are mainly used for objects, while type aliases are more flexible for other complex types.

2/6
TypeScript.md 2025-05-13

Duck Typing
Feature Explanation

Definition Structural type checking (not name-based)

Key Principle “If it walks like a duck and quacks like a duck…”

Type Checking Based On Object shape (property names and types)

Useful For Flexibility and code reuse with functions and interfaces

Function Types
Feature Example Syntax Description

Type Alias for Function type Fn = (a: number) => string; Defines a reusable function signature

Inline Type let fn: (x: string) => number Directly declares function type

Function as Parameter (fn: (a: number, b: number) => number) Accepts a typed function as argument

Interface Function interface Fn { (x: string): boolean } Function shape using an interface

Classes, Constructor, Access Modifiers,

Properties and Methods
Feature Description Example

Class Blueprint for objects class MyClass { ... }

Constructor Initializes objects constructor(name: string)

Access Modifiers Visibility of members public, private, protected

Properties Data members of a class name: string;

Methods Functions inside a class greet(): void { ... }

Modifier Meaning Accessible From

public Default. Accessible everywhere Anywhere

private Only inside the class Within the class only

protected Inside the class & its subclasses Class + Subclasses

Creating and using Namespaces

Namespaces in TypeScript help you organize code into logical groups and prevent naming conflicts — especially useful when
not using module systems.

- Feature Description

namespace keyword Declares a block to encapsulate related code

export keyword Exposes elements outside the namespace

namespace usage Access exported members via NamespaceName.memberName

nesting Namespaces can be nested inside each other

splitting across files Use /// to merge multiple files into one namespace

runtime impact Compiles into an IIFE (Immediately Invoked Function Expression)

1. Basic Namespace:

3/6
TypeScript.md 2025-05-13

namespace Utils {
export function greet(name: string) {
return `Hello, ${name}`;
}
}

console.log(Utils.greet("Levi")); // Output: Hello, Levi

2. Nested Namespaces:

namespace Game {
export namespace Engine {
export function start() {
console.log("Game started");
}
}
}

Game.Engine.start();

Use Namespaces For: browser-based apps not using modules.

Use Namespaces For: When keeping everything in a single global context.

Creating and using Modules

What is a Module?

Module: Any TypeScript file that uses import or export statements.

Every TypeScript file is a separate module by default.
Modules enable sharing and reusing code between files.
Feature Description

export Exposes variables, functions, or classes to other files.

import Imports code from other modules to use it in the current file.

Default Export Exports a single item from a module (export default).

Named Exports Exports multiple items from a module with names.

Creating & Using Modules

In the mathUtils.ts file:

export function add(x: number, y: number): number {

return x + y;
}

export function multiply(x: number, y: number): number {

return x * y;
}

In the main.ts file:

import { add, multiply } from "./mathUtils";

4/6
TypeScript.md 2025-05-13

console.log(add(5, 3)); // Output: 8

console.log(multiply(4, 2)); // Output: 8

Export Types

Named Exports: You can export multiple items from a module.

export const name = "Levi";

export function greet() { ... }

Import:

import { name, greet } from "./file";

Default Export: You can export one default value.

export default class Logger { ... }

Import:

import Logger from "./Logger";

Module Formats and Loaders

ES6
Concept CommonJS AMD SystemJS
Modules

import { define(['module'],
const { add } =
Import/Export add } from function(module) { System.import('module').then(...)
require('module');
'module'; ... });

Module Synchronous Synchronous and

Asynchronous Asynchronous and dynamic loading
Loading and Static Block-based

Browsers,
Node.js (Older Mainly in Browsers
Supported By Node.js All formats, used in various projects
versions) (via RequireJS)
(v12+)

Module Vs Namespace
Feature Module Namespace

Declaration
Uses export and import keywords Uses namespace and export within the namespace
Syntax

Code Typically confined to a single file (but can span multiple files in
Can be split across multiple files
Separation certain scenarios)

Each module is its own scope (i.e., Everything inside a namespace shares the same global scope
Scope
private by default) unless explicitly exported

For large-scale projects and external

Usage For grouping related code in non-modular codebases
code sharing

5/6
TypeScript.md 2025-05-13

Feature Module Namespace

Static Supported (imports are resolved at

No import; everything is merged into global space
Imports compile time)

Tree No, all code in a namespace is included unless manually

Yes, unused code can be excluded
Shakability excluded

Bundling Supported (webpack, rollup, etc.) No support for bundling, everything is part of the global scope

File Usage Each file is treated as a module Can span multiple files but typically in a single global space

namespace MathUtils { export function add() { ... }

Example import { add } from './utils';
}

Use Modules if:

You are working in modern TypeScript or JavaScript environments that support ES6 modules.
You want to take advantage of tree-shaking, which removes unused exports in the build process.
You want to separate your code into different files for better code organization.
You are using bundlers like Webpack, Rollup, or Parcel.
You need asynchronous loading or lazy loading of your code.

Use Namespaces if:

You are working with legacy code or in an environment where ES6 modules are not available.
You are building small-scale applications and don't need modular code splitting.
You don't require tree-shaking or dynamic imports.
Your project is small enough to benefit from grouping related functions together in a single space.

Generics
Concept Description

Generics Write reusable components that work with any data type while maintaining type safety.

Type Parameters Placeholders (e.g., <T>) for types that are provided when the function or class is used.

Generic Functions Functions that work with various types without compromising on type safety.

Generic Constraints Restrict the types a generic can be to those that satisfy a specific condition (using extends).

function printLength<T extends { length: number }>(arg: T): number {

return arg.length;
}

Connect
GitHub omteja04

LinkedIn omteja

6/6