TYPESCRIPT Tutorial



Introduction to typescript


🧠 Introduction to TypeScript

TypeScript is a **typed superset of JavaScript** that compiles to plain JavaScript. It adds optional static typing, powerful features like interfaces and generics, and helps developers write cleaner, more robust code—especially for large-scale applications.

💡 Quick Note:

Anything you can do in JavaScript, you can do in TypeScript—plus more, with type safety and better tooling!

🔍 Why Use TypeScript?

  • ✅ Catches errors during development (not runtime).
  • ✅ Offers powerful code completion and refactoring tools.
  • ✅ Enables type annotations for variables, functions, objects, and more.
  • ✅ Supports modern JavaScript features + additional TypeScript-only features.

⚙️ Basic Example

 // TypeScript Example function greet(name: string): string { return 'Hello, ' + name; } console.log(greet('Alice')); // ✅ Works console.log(greet(42)); // ❌ Error: Argument of type 'number' is not assignable to type 'string' 
Explanation: In this function, name must be a string. Passing anything else will show an error during development!

📦 Installing TypeScript

  1. Install Node.js if you haven't already from nodejs.org.
  2. Open your terminal and run:
 npm install -g typescript 

You can now use the tsc command to compile TypeScript files!

🛠 Compiling TypeScript

Write your TypeScript in a file like app.ts, then compile it:

 tsc app.ts 

This creates a regular app.js file that can run in any browser or Node.js environment.

📁 Your First TypeScript Project

  1. Create a folder: mkdir ts-demo
  2. Initialize project: npm init -y
  3. Install TypeScript locally: npm install typescript --save-dev
  4. Generate config: npx tsc --init
  5. Create index.ts and start coding!

📌 Key TypeScript Features

  • Static Typing: Declaring variable and function types.
  • Interfaces: Enforce shape of objects.
  • Enums: Predefined constants.
  • Generics: Reusable components with flexible types.
  • Type Inference: Auto-detect types without explicitly writing them.

💡 Example: Interface

 interface Person { name: string; age: number; } function printPerson(person: Person): void { console.log(`${person.name} is ${person.age} years old.`); } 

📱 Responsive Tip

Use TypeScript with frameworks like React or Angular for large applications to prevent bugs and improve maintainability—especially for cross-device compatibility and long-term projects.

✅ Next Step:

Learn about TypeScript types like any, union, tuple, and more!


🌟 Enjoyed Learning with Us?

Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!

Leave a Google Review