Getting Started with TypeScript
Introduction To TypeScript
What is TypeScript?
• TypeScript is superset of JavaScript—it adds extra features to JavaScript.
• It compiles (converts) into regular JavaScript, so it runs anywhere JavaScript does.
• Files end in .ts (instead of .js).
How TypeScript Works?
1. You write code in TypeScript (.ts files).
2. The TypeScript compiler converts it into JavaScript (.js files).
3. The JavaScript runs in browsers, [Link], or any JS environment.
TypeScript vs. JavaScript
All JavaScript code is valid TypeScript!
• If your JavaScript code works, it will work in TypeScript too.
• TypeScript just adds optional features (like types) to make coding safer and easier.
[Link] [Link]
Why Use TypeScript?
• Helps catch mistakes early (before running the code).
• Makes large projects easier to manage.
• Works smoothly with existing JavaScript code.
Setting Up TypeScript
To begin with TypeScript, you'll need these tools:
• [Link]: This lets you run the TypeScript compiler.
• TypeScript Compiler: A tool that converts TypeScript code into JavaScript.
• VS Code (Recommended): A free code editor that works great with TypeScript.
Step 1: Install [Link]
1. Visit the [Link] download page.
2. Download and install the correct version (18+ recommended) for your system.
3. Verify installation by opening the command line and running:
node -v (or) node --version
You should see a version number (e.g., v22.12.0).
Step 2: Install the TypeScript Compiler
1. Open the command line.
2. Run this command:
npm install -g typescript
3. Check if TypeScript is installed:
tsc -v (or) tsc --version
You should see a version number (e.g., Version 5.8.2).
Fix for Windows Users: If you get a 'tsc' is not recognized error:
1. Go to C:\Users\<your-username>\AppData\Roaming\npm
2. Copy this path and add it to your System Environment Variables.
[Link] [Link]
Step 3: Install TSX (To Run TypeScript Directly)
To execute TypeScript files without compiling them first:
npm install -g tsx
Step 4: Install VS Code (Recommended Editor)
1. Go to the VS Code download page.
2. Download the version for your OS (Windows, Mac, or Linux).
3. Run the installer and follow the steps.
4. Open VS Code—you're ready to code!
Quick Summary
[Link] → Runs TypeScript.
TypeScript Compiler (tsc) → Converts .ts files to .js.
VS Code → Best editor for TypeScript.
TSX → Run TypeScript without compiling.
Now you're all set to start coding in TypeScript!
First TypeScript Program - Simple Steps
1. Create a Project Folder
• Make a new folder (e.g., TSDemo).
2. Open the Folder in VS Code
• Open VS Code → File > Open Folder → Select your folder.
3. Create a TypeScript File
• Inside the folder, create a file named [Link].
• Add this simple code:
[Link]("Welcome to TypeScript!");
4. Open the Terminal in VS Code
• Press Ctrl + ~ (backtick) or go to Terminal > New Terminal.
[Link] [Link]
5. Compile TypeScript to JavaScript
• Run the command:
tsc [Link]
• This generates [Link] (the JavaScript version).
6. Run the JavaScript File
• Execute it using [Link]:
node [Link]
• Output:
Welcome to TypeScript!
Run TypeScript Without Compiling (Recommended)
If you installed tsx, run:
tsx [Link]
(This runs .ts files directly!)
Expected Error while executing tsc command:
Solution:
Run the below command in the terminal to fix Execution Policies error.
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
[Link] [Link]