Boolean type behavior in Typescript - Mini Project: Build & Apply

Boolean type behavior

📖 Scenario: Imagine you are creating a simple system to check if a user is allowed to access a website feature based on their subscription status.

🎯 Goal: You will create a boolean variable to represent the subscription status, then use it to decide if the user can access the feature.

📋 What You'll Learn

Create a boolean variable named isSubscribed with the value true.

Create a boolean variable named hasTrial with the value false.

Create a boolean variable named canAccessFeature that is true if isSubscribed or hasTrial is true.

Print the value of canAccessFeature.

💡 Why This Matters

🌍 Real World

Boolean variables are used everywhere to represent yes/no, true/false, or on/off states in programs.

💼 Career

Understanding boolean logic is essential for controlling program flow and making decisions in software development.

1

Create subscription status variables

Create a boolean variable called isSubscribed and set it to true. Also create a boolean variable called hasTrial and set it to false.

Typescript

// Your code here
// Create boolean variables isSubscribed and hasTrial

Hint

Use let to declare variables and assign true or false directly.

2

Create access control variable

Create a boolean variable called canAccessFeature that is true if either isSubscribed or hasTrial is true. Use the logical OR operator ||.

Typescript

let isSubscribed: boolean = true;
let hasTrial: boolean = false;

// Create canAccessFeature using isSubscribed or hasTrial
// Your code here

Hint

Use || to combine two boolean variables.

3

Check access with if statement

Write an if statement that checks if canAccessFeature is true. Inside the if, create a variable message with the value 'Access granted'. Otherwise, set message to 'Access denied'.

Typescript

let isSubscribed: boolean = true;
let hasTrial: boolean = false;
let canAccessFeature: boolean = isSubscribed || hasTrial;

// Use if statement to set message based on canAccessFeature
// Your code here

Hint

Use if (canAccessFeature) to check the boolean and assign message accordingly.

4

Print the access message

Write a console.log statement to print the value of the variable message.

Typescript

let isSubscribed: boolean = true;
let hasTrial: boolean = false;
let canAccessFeature: boolean = isSubscribed || hasTrial;

let message: string;
if (canAccessFeature) {
    message = 'Access granted';
} else {
    message = 'Access denied';
}

// Print the message
// Your code here

Hint

Use console.log(message); to show the message in the console.

Practice

1. Which of the following is the correct way to declare a boolean variable in TypeScript?

easy

A. let isDone: Boolean = 'true';

B. let isDone: bool = true;

C. let isDone = Boolean;

D. let isDone: boolean = true;

Solution

1. Step 1: Understand TypeScript boolean type

   TypeScript uses the lowercase boolean type to declare true/false values.

2. Step 2: Check each option's syntax

   let isDone: boolean = true; uses boolean with a true value correctly. let isDone: bool = true; uses bool which is invalid. let isDone = Boolean; assigns the Boolean constructor, not a value. let isDone: Boolean = 'true'; uses uppercase Boolean and a string, which is incorrect.

3. Final Answer:

   let isDone: boolean = true; -> Option D

4. Quick Check:

   TypeScript boolean type = let var: boolean = true [OK]

Hint: Use lowercase 'boolean' type for true/false in TypeScript [OK]

Common Mistakes:

• Using 'bool' instead of 'boolean'
• Assigning string 'true' instead of boolean true
• Using uppercase 'Boolean' type incorrectly

2. Which of the following is the correct syntax to assign a boolean value in TypeScript?

easy

A. let flag: boolean = false;

B. let flag: boolean = 'false';

C. let flag: boolean = 0;

D. let flag: boolean = True;

Solution

1. Step 1: Identify valid boolean values

   Boolean values in TypeScript are only true or false without quotes and lowercase.

2. Step 2: Evaluate each option

   let flag: boolean = false; correctly assigns false. let flag: boolean = 'false'; uses a string 'false' which is invalid. let flag: boolean = 0; uses number 0 which is not boolean. let flag: boolean = True; uses capitalized True which is invalid in TypeScript.

3. Final Answer:

   let flag: boolean = false; -> Option A

4. Quick Check:

   Boolean values are true or false without quotes [OK]

Hint: Assign boolean values as true or false without quotes [OK]

Common Mistakes:

• Using strings 'true' or 'false' instead of boolean literals
• Using numbers like 0 or 1 as booleans
• Capitalizing true or false

3. What will be the output of the following TypeScript code?

let a: boolean = true;
let b: boolean = false;
console.log(a && b);

medium

A. true

B. false

C. undefined

D. TypeError

Solution

1. Step 1: Understand boolean AND operation

   The && operator returns true only if both operands are true.

2. Step 2: Evaluate the operands

   Variable a is true, b is false, so true && false is false.

3. Final Answer:

   false -> Option B

4. Quick Check:

   true AND false = false [OK]

Hint: AND returns true only if both are true [OK]

Common Mistakes:

• Assuming true && false is true
• Confusing && with || operator
• Expecting runtime error for boolean operations

4. Identify the error in the following TypeScript code:

let isActive: boolean = True;
console.log(isActive);

medium

A. No error, prints true

B. TypeError: Cannot assign True to boolean

C. SyntaxError: True is not defined

D. Runtime error: invalid boolean

Solution

1. Step 1: Check boolean literal case sensitivity

   In TypeScript, boolean literals are lowercase true and false. True with uppercase T is undefined.

2. Step 2: Understand error type

   Using True causes a ReferenceError because it is not declared or recognized as a boolean.

3. Final Answer:

   SyntaxError: True is not defined -> Option C

4. Quick Check:

   Boolean literals must be lowercase true or false [OK]

Hint: Boolean literals are lowercase true/false only [OK]

Common Mistakes:

• Using uppercase True or False
• Expecting TypeScript to auto-correct case
• Confusing boolean literals with strings

5. Consider the following TypeScript code snippet:

function checkValue(val: any): boolean {
  return !!val;
}
console.log(checkValue(0));
console.log(checkValue('hello'));
console.log(checkValue(null));

What will be the output of this code?

hard

A. false true false

B. true true false

C. false false true

D. true false true

Solution

1. Step 1: Understand double negation (!!) in TypeScript

   The !! converts any value to its boolean equivalent: falsy values become false, truthy become true.

2. Step 2: Evaluate each input

   0 is falsy, so !!0 is false. 'hello' is a non-empty string (truthy), so !!'hello' is true. null is falsy, so !!null is false.

3. Final Answer:

   false true false -> Option A

4. Quick Check:

   !!value converts to boolean true/false correctly [OK]

Hint: Double negation (!!) converts any value to boolean [OK]

Common Mistakes:

• Assuming 0 is true
• Confusing !! with single !
• Expecting null to be true