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
