TypeScript Strict Mode and Why It Matters - Mini Project: Build & Apply

TypeScript Strict Mode and Why It Matters

📖 Scenario: You are building a small TypeScript program to manage a list of users and their ages. You want to make sure your code is safe and free from common mistakes by using TypeScript's strict mode.

🎯 Goal: Create a TypeScript program that defines a list of users with their names and ages, uses strict typing to avoid errors, and prints the users who are adults (age 18 or older).

📋 What You'll Learn

Create an array of user objects with exact properties: name (string) and age (number)

Create a constant adultAge set to 18

Use a for loop with variables user to filter users who are adults

Print the names of users who are adults using console.log

💡 Why This Matters

🌍 Real World

Strict mode helps catch mistakes early in programs that manage user data, making apps safer and more reliable.

💼 Career

Many companies require strict TypeScript settings to ensure code quality and reduce bugs in production.

1

Create the users array with strict types

Create a constant array called users with these exact objects: { name: 'Alice', age: 17 }, { name: 'Bob', age: 22 }, and { name: 'Charlie', age: 15 }. Use explicit type annotation for the array as an array of objects with name as string and age as number.

Typescript

// Your code here

Hint

Use const users: { name: string; age: number }[] = [...] to define the array with strict types.

2

Define the adult age threshold

Create a constant called adultAge and set it to the number 18.

Typescript

const users: { name: string; age: number }[] = [
  { name: 'Alice', age: 17 },
  { name: 'Bob', age: 22 },
  { name: 'Charlie', age: 15 }
];
// Your code here

Hint

Just create const adultAge = 18; below the users array.

3

Filter adult users using a for loop

Create an empty array called adults with the same type as users. Use a for loop with variable user to go through users. Inside the loop, if user.age is greater than or equal to adultAge, add user to the adults array using push.

Typescript

const users: { name: string; age: number }[] = [
  { name: 'Alice', age: 17 },
  { name: 'Bob', age: 22 },
  { name: 'Charlie', age: 15 }
];
const adultAge = 18;
// Your code here

Hint

Remember to declare adults as an empty array with the same type as users. Use for (const user of users) to loop.

4

Print the names of adult users

Use a for loop with variable adult to go through the adults array. Inside the loop, print the adult.name using console.log.

Typescript

const users: { name: string; age: number }[] = [
  { name: 'Alice', age: 17 },
  { name: 'Bob', age: 22 },
  { name: 'Charlie', age: 15 }
];
const adultAge = 18;
const adults: { name: string; age: number }[] = [];
for (const user of users) {
  if (user.age >= adultAge) {
    adults.push(user);
  }
}
// Your code here

Hint

Use for (const adult of adults) and inside the loop console.log(adult.name).

Practice

1. What is the main purpose of enabling strict mode in TypeScript?

easy

A. To allow JavaScript code to run without any type checking

B. To make TypeScript run faster by skipping type checks

C. To make TypeScript check your code more carefully and catch errors early

D. To disable all compiler warnings and errors

Solution

1. Step 1: Understand what strict mode does

   Strict mode in TypeScript enables more thorough type checking to find mistakes early.

2. Step 2: Compare options with strict mode purpose

   Only To make TypeScript check your code more carefully and catch errors early correctly describes strict mode as making TypeScript check code carefully and catch errors early.

3. Final Answer:

   To make TypeScript check your code more carefully and catch errors early -> Option C

4. Quick Check:

   Strict mode = careful checks [OK]

Hint: Strict mode means more checks, fewer bugs [OK]

Common Mistakes:

• Thinking strict mode disables checks
• Confusing strict mode with performance settings
• Believing strict mode allows ignoring types

2. Which setting in tsconfig.json enables strict mode in TypeScript?

easy

A. "strictCheck": true

B. "strict": true

C. "enableStrict": true

D. "typeCheck": true

Solution

1. Step 1: Identify the correct tsconfig.json key for strict mode

   The official key to enable strict mode is "strict" set to true.

2. Step 2: Eliminate incorrect options

   Options A, B, and C are not valid TypeScript compiler options for strict mode.

3. Final Answer:

   "strict": true -> Option B

4. Quick Check:

   Strict mode key = "strict" [OK]

Hint: Look for "strict": true in tsconfig.json [OK]

Common Mistakes:

• Using incorrect keys like "strictCheck"
• Confusing strict mode with other compiler options
• Forgetting to put the key inside tsconfig.json

3. What will happen if you run this TypeScript code with strict mode enabled?

let name: string;
console.log(name.length);

medium

A. It will cause a compile-time error because 'name' is used before being assigned

B. It will print the length of the string

C. It will print 'undefined'

D. It will run without errors and print 0

Solution

1. Step 1: Understand variable initialization in strict mode

   With strict mode, TypeScript requires variables to be initialized before use.

2. Step 2: Analyze the code behavior

   The variable 'name' is declared but not assigned a value before accessing 'name.length', causing a compile-time error.

3. Final Answer:

   It will cause a compile-time error because 'name' is used before being assigned -> Option A

4. Quick Check:

   Uninitialized variable use = error [OK]

Hint: Uninitialized variables cause errors in strict mode [OK]

Common Mistakes:

• Assuming variables default to empty string
• Thinking code runs without errors
• Confusing runtime errors with compile-time errors

4. Identify the error in this TypeScript code when strict mode is enabled and fix it:

function greet(name: string | undefined) {
  console.log(name.toUpperCase());
}

medium

A. Error: 'name' might be undefined; fix by checking if 'name' exists before calling toUpperCase()

B. Error: 'toUpperCase' is not a function; fix by casting 'name' to string

C. No error, code is correct

D. Error: Missing return type; fix by adding ': void' to function

Solution

1. Step 1: Understand strict null checks

   With strict mode, TypeScript requires checking if a variable that can be undefined is actually defined before using it.

2. Step 2: Identify the error and fix

   Calling 'toUpperCase()' on 'name' without checking if it's undefined causes an error. Fix by adding a check like 'if (name)'.

3. Final Answer:

   Error: 'name' might be undefined; fix by checking if 'name' exists before calling toUpperCase() -> Option A

4. Quick Check:

   Check undefined before method call [OK]

Hint: Check for undefined before using variable methods [OK]

Common Mistakes:

• Ignoring possible undefined values
• Trying to cast without checks
• Assuming no error without strict mode

5. You have this TypeScript code with strict mode enabled:

interface User {
  id: number;
  name?: string;
}

function printUserName(user: User) {
  console.log(user.name.toUpperCase());
}

How can you fix the code to avoid errors and safely print the user's name in uppercase if it exists?

hard

A. Assign a default value: console.log((user.name || '').toUpperCase());

B. Remove the question mark from 'name' in interface to make it required

C. Use a non-null assertion: console.log(user.name!.toUpperCase());

D. Add a check: if (user.name) console.log(user.name.toUpperCase());

Solution

1. Step 1: Understand optional properties and strict mode

   The 'name' property is optional, so it can be undefined. Strict mode requires checking before use.

2. Step 2: Evaluate options to safely access 'name'

   Add a check: if (user.name) console.log(user.name.toUpperCase()); safely checks if 'name' exists before calling 'toUpperCase()', avoiding errors. Options B, C, and D have drawbacks or risks.

3. Final Answer:

   Add a check: if (user.name) console.log(user.name.toUpperCase()); -> Option D

4. Quick Check:

   Check optional before use = safe code [OK]

Hint: Check optional properties before use in strict mode [OK]

Common Mistakes:

• Using non-null assertion without guarantee
• Assuming optional properties are always defined
• Removing optional marker without reason