TypeScript Introduction & Setup

1// JavaScript - Runtime Error
2function greet(name) {
3    return "Hello, " + name.toUpperCase();
4}
5greet(null); // Runtime Error: Cannot read property 'toUpperCase' of null
6
7// TypeScript - Compile-Time Error Prevention
8function greet(name: string): string {
9    return "Hello, " + name.toUpperCase();
10}
11greet(null); // TypeScript Error: Argument of type 'null' is not assignable to parameter of type 'string'

1// JavaScript - No type checking
2let user = { name: "John", age: 30 };
3user.age = "thirty"; // No error, but problematic
4console.log(user.age * 2); // NaN - silent failure

1// TypeScript - Type safety
2let user: { name: string; age: number } = { name: "John", age: 30 };
3user.age = "thirty"; // Error: Type 'string' is not assignable to type 'number'
4console.log(user.age * 2); // Safe: always a number

1// JavaScript - Runtime surprises
2function calculateArea(width, height) {
3    return width * height;
4}
5calculateArea("10", "20"); // Returns "1020" (string concatenation)
6calculateArea(); // Returns NaN

1// TypeScript - Compile-time safety
2function calculateArea(width: number, height: number): number {
3    return width * height;
4}
5calculateArea("10", "20"); // Error: Argument of type 'string' is not assignable
6calculateArea(); // Error: Expected 2 arguments, but got 0

1// JavaScript - Typos cause silent failures
2const config = { apiUrl: "https://api.example.com", timeout: 5000 };
3console.log(config.apiURl); // undefined (typo in property name)

1// TypeScript - Typos caught immediately
2const config: { apiUrl: string; timeout: number } = {
3    apiUrl: "https://api.example.com",
4    timeout: 5000
5};
6console.log(config.apiURl); // Error: Property 'apiURl' does not exist on type...

1# Check Node.js version
2node --version
3
4# Check npm version
5npm --version

1# Install TypeScript compiler globally
2npm install -g typescript
3
4# Verify installation
5tsc --version

1# Create project directory
2mkdir my-typescript-project
3cd my-typescript-project
4
5# Initialize npm project
6npm init -y
7
8# Install TypeScript as dev dependency
9npm install -D typescript
10
11# Install type definitions for Node.js
12npm install -D @types/node

1# Generate tsconfig.json
2npx tsc --init

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "commonjs",
5    "outDir": "./dist",
6    "rootDir": "./src",
7    "strict": true,
8    "esModuleInterop": true,
9    "skipLibCheck": true,
10    "forceConsistentCasingInFileNames": true,
11    "resolveJsonModule": true,
12    "declaration": true,
13    "declarationMap": true,
14    "sourceMap": true
15  },
16  "include": ["src/**/*"],
17  "exclude": ["node_modules", "dist"]
18}

1my-typescript-project/
2├── src/
3│   ├── index.ts
4│   ├── types/
5│   │   └── user.ts
6│   └── utils/
7│       └── calculator.ts
8├── dist/
9├── tsconfig.json
10└── package.json

1export interface User {
2  id: number;
3  name: string;
4  email: string;
5  age: number;
6  isActive: boolean;
7}
8
9export interface CreateUserRequest {
10  name: string;
11  email: string;
12  age: number;
13}

1export class Calculator {
2  static add(a: number, b: number): number {
3    return a + b;
4  }
5
6  static multiply(a: number, b: number): number {
7    return a * b;
8  }
9
10  static divide(a: number, b: number): number {
11    if (b === 0) {
12      throw new Error("Division by zero is not allowed");
13    }
14    return a / b;
15  }
16}
17
18export const formatCurrency = (amount: number, currency: string = "USD"): string => {
19  return new Intl.NumberFormat('en-US', {
20    style: 'currency',
21    currency: currency
22  }).format(amount);
23};

1import { User, CreateUserRequest } from './types/user';
2import { Calculator, formatCurrency } from './utils/calculator';
3
4// Function with type annotations
5function createUser(request: CreateUserRequest): User {
6  return {
7    id: Math.floor(Math.random() * 1000),
8    name: request.name,
9    email: request.email,
10    age: request.age,
11    isActive: true
12  };
13}
14
15// Array with type annotation
16const users: User[] = [];
17
18// Creating users with type safety
19const newUser = createUser({
20  name: "John Doe",
21  email: "[email protected]",
22  age: 30
23});
24
25users.push(newUser);
26
27// Using calculator with type safety
28const price = 29.99;
29const quantity = 3;
30const total = Calculator.multiply(price, quantity);
31
32console.log(`User created: ${newUser.name}`);
33console.log(`Total cost: ${formatCurrency(total)}`);
34
35// Type-safe array operations
36const activeUsers = users.filter((user: User) => user.isActive);
37const userNames = users.map((user: User) => user.name);
38
39console.log(`Active users: ${activeUsers.length}`);
40console.log(`User names: ${userNames.join(', ')}`);

1# Compile TypeScript to JavaScript
2npx tsc
3
4# Run the compiled JavaScript
5node dist/index.js

1# Watch mode - automatically recompile on changes
2npx tsc --watch
3
4# Or use ts-node for direct execution
5npm install -D ts-node
6npx ts-node src/index.ts

1{
2  "recommendations": [
3    "ms-vscode.vscode-typescript-next",
4    "bradlc.vscode-tailwindcss",
5    "esbenp.prettier-vscode",
6    "dbaeumer.vscode-eslint",
7    "ms-vscode.vscode-json"
8  ]
9}

1{
2  "scripts": {
3    "build": "tsc",
4    "dev": "ts-node src/index.ts",
5    "watch": "tsc --watch",
6    "clean": "rm -rf dist",
7    "type-check": "tsc --noEmit"
8  }
9}

1module.exports = {
2  parser: '@typescript-eslint/parser',
3  extends: [
4    '@typescript-eslint/recommended',
5    'prettier'
6  ],
7  parserOptions: {
8    ecmaVersion: 2020,
9    sourceType: 'module'
10  },
11  rules: {
12    '@typescript-eslint/no-unused-vars': 'error',
13    '@typescript-eslint/explicit-function-return-type': 'warn'
14  }
15};

1{
2  "semi": true,
3  "trailingComma": "es5",
4  "singleQuote": true,
5  "printWidth": 80,
6  "tabWidth": 2
7}

1{
2  "version": "0.2.0",
3  "configurations": [
4    {
5      "name": "Debug TypeScript",
6      "type": "node",
7      "request": "launch",
8      "program": "${workspaceFolder}/src/index.ts",
9      "runtimeArgs": ["-r", "ts-node/register"],
10      "env": {
11        "NODE_ENV": "development"
12      }
13    }
14  ]
15}