Programming Labs - TypeScript Fundamentals

Lab 1: Type Annotations & Basic Types

Beginner

Coding Challenge

Your Task: Create a TypeScript program that demonstrates proper type annotations for variables. TypeScript's main superpower is its type system - let's learn to use it!

Detailed Requirements:
1. String variable with type annotation: Declare a variable username with explicit type string. In TypeScript, you add a colon after the variable name followed by the type: let username: string = "value";

2. Number variable with type annotation: Declare a variable userAge with type number. Unlike JavaScript, TypeScript has a single number type for all numeric values (integers, floats, etc.).

3. Boolean variable with type annotation: Declare a variable isActive with type boolean. This can only hold true or false.

4. Array variable with type annotation: Declare an array hobbies that holds strings. There are two syntaxes: string[] or Array<string>. We recommend string[] for simplicity.

5. Tuple type: Declare a variable userInfo as a tuple containing exactly [string, number] - the user's name and age. Tuples are fixed-length arrays where each position has a specific type: let userInfo: [string, number] = ["Alice", 30];

Why Type Annotations Matter:
• Catch errors at compile time instead of runtime
• Better IDE autocomplete and IntelliSense
• Self-documenting code
• Easier refactoring

Expected Output:

Username: Alice (type: string)
Age: 28 (type: number)
Active: true (type: boolean)
Hobbies: coding,gaming,reading
User Info Tuple: Alice, 28

Requirements Checklist

Declare username with string type annotation

Declare userAge with number type annotation

Declare isActive with boolean type annotation

Declare hobbies as a string array with type annotation

Declare userInfo as a tuple [string, number]

Use console.log to output all variables

// TypeScript Lab 1: Type Annotations & Basic Types
// Your task: Add proper type annotations to each variable

// TODO 1: Declare a string variable 'username'
// Syntax: let variableName: type = value;


// TODO 2: Declare a number variable 'userAge'


// TODO 3: Declare a boolean variable 'isActive'


// TODO 4: Declare a string array 'hobbies'
// Hint: Use string[] for the type annotation


// TODO 5: Declare a tuple 'userInfo' containing [string, number]
// A tuple has a fixed number of elements with specific types


// TODO 6: Print all variables using console.log()
// Example: console.log("Username: " + username);

Output

// Click "Run Code" to compile and execute // TypeScript compiler output will appear here

Hints & Tips

• String type: let username: string = "Alice";

• Number type: let userAge: number = 28;

• Boolean type: let isActive: boolean = true;

• Array type: let hobbies: string[] = ["coding", "gaming"];

• Tuple type: let userInfo: [string, number] = ["Alice", 28];

• TypeScript uses console.log() just like JavaScript

Progress: 0/6

Score: 0/100

0%

Lab Results

Review feedback below

Lab 2: Interfaces & Object Types

Beginner

Coding Challenge

Your Task: Create TypeScript interfaces to define the shape of objects. Interfaces are one of TypeScript's most powerful features for describing object structures.

Detailed Requirements:
1. Create a User interface: Define an interface named User with these properties:
   • id: number - Unique identifier
   • name: string - User's full name
   • email: string - User's email address
   • isAdmin: boolean - Whether user has admin privileges

2. Create an optional property: Add an optional phone?: string property. The ? makes it optional - objects can omit this property without causing errors.

3. Create a readonly property: Add a readonly createdAt: string property. Readonly properties cannot be modified after the object is created.

4. Create a user object: Declare a variable user1 of type User and assign it an object with all required properties.

5. Create a second user without optional property: Declare user2 without the phone property to demonstrate optional properties work.

Interface Syntax:

interface InterfaceName {
    property1: type;
    property2: type;
    optionalProp?: type;
    readonly readonlyProp: type;
}

Why Interfaces?
• Define contracts for objects
• Enable autocomplete for object properties
• Catch missing or misspelled properties at compile time
• Can be extended and composed

Expected Output:

User 1: John Doe (john@example.com)
Admin: true, Phone: 555-1234
User 2: Jane Smith (jane@example.com)
Admin: false, Phone: Not provided

Requirements Checklist

Define User interface with id, name, email, isAdmin

Add optional phone property (phone?: string)

Add readonly createdAt property

Create user1 object with all properties including phone

Create user2 object without phone property

Print both users' information

// TypeScript Lab 2: Interfaces & Object Types
// Your task: Create interfaces to define object structures

// TODO 1: Define the User interface
// Include: id (number), name (string), email (string), isAdmin (boolean)
// Add optional: phone?: string
// Add readonly: readonly createdAt: string


// TODO 2: Create user1 with all properties (including phone)
// let user1: User = { ... };


// TODO 3: Create user2 without the optional phone property
// let user2: User = { ... };


// TODO 4: Print user information using console.log()
// Display: name, email, admin status, and phone (or "Not provided")

Output

// Click "Run Code" to compile and execute

Hints & Tips

• Interface syntax: interface User { id: number; name: string; }

• Optional property: phone?: string; (note the ?)

• Readonly property: readonly createdAt: string;

• Create object: let user1: User = { id: 1, name: "John", ... };

• Check optional: user1.phone || "Not provided"

Progress: 0/6

Score: 0/100

0%

Lab Results

Review feedback below

Lab 3: Functions with Type Annotations

Intermediate

Coding Challenge

Your Task: Create typed functions in TypeScript. Functions are the building blocks of any application, and TypeScript allows us to specify parameter types and return types.

Detailed Requirements:
1. Create a greet function: Takes a name: string parameter and returns a string. The return type goes after the parameter list:

function greet(name: string): string {
    return "Hello, " + name + "!";
}

2. Create an add function: Takes two parameters a: number and b: number, returns a number. This demonstrates multiple typed parameters.

3. Create a function with optional parameter: Create createUser that takes name: string and optional age?: number. Return a formatted string with the user info.

4. Create a function with default parameter: Create multiply that takes a: number and b: number = 2 (default value). If b is not provided, it defaults to 2.

5. Create an arrow function with types: Create a typed arrow function isEven that takes a number and returns a boolean:
const isEven = (num: number): boolean => num % 2 === 0;

Function Type Syntax:
• Regular: function name(param: type): returnType { }
• Arrow: const name = (param: type): returnType => expression;
• void return: Use void when function doesn't return anything

Expected Output:

Greeting: Hello, TypeScript!
Sum: 15
User: Alice, Age: 25
User: Bob, Age: not specified
Multiply 5 * 2: 10
Multiply 5 * 3: 15
Is 4 even? true
Is 7 even? false

Requirements Checklist

Create greet function with string param and string return

Create add function with two number params and number return

Create createUser with optional age parameter

Create multiply with default parameter value

Create isEven arrow function returning boolean

Test all functions with console.log outputs

// TypeScript Lab 3: Functions with Type Annotations
// Your task: Create properly typed functions

// TODO 1: Create greet function
// Takes name (string), returns string
// function greet(name: string): string { ... }


// TODO 2: Create add function
// Takes a (number) and b (number), returns number


// TODO 3: Create createUser function with optional parameter
// Takes name (string) and age? (optional number)
// Return a string like "Name: Alice, Age: 25" or "Name: Bob, Age: not specified"


// TODO 4: Create multiply function with default parameter
// Takes a (number) and b (number = 2)
// If b is not provided, use default value 2


// TODO 5: Create isEven arrow function
// const isEven = (num: number): boolean => ...


// TODO 6: Test all functions with console.log()
// Call each function and print the results

Output

// Click "Run Code" to compile and execute

Hints & Tips

• Function syntax: function name(param: type): returnType { return value; }

• Optional param: function fn(name: string, age?: number): string

• Default param: function multiply(a: number, b: number = 2): number

• Arrow function: const isEven = (n: number): boolean => n % 2 === 0;

• Check undefined: age !== undefined ? age : "not specified"

Progress: 0/6

Score: 0/100

0%

Lab Results

Review feedback below

TypeScript Programming Labs

Beginner Level - Module 1

Requirements Checklist

Lab Results

Requirements Checklist

Lab Results

Requirements Checklist

Lab Results