Number type behavior in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a number variable with value 10.

Typescript

let num: number = [1];

Drag options to blanks, or click blank then click option'

A10

Btrue

C'10'

D"10"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the number, which makes it a string.

Assigning a boolean value instead of a number.

The number type variable should be assigned a numeric value without quotes.

2fill in blank

medium

Complete the code to check if a number variable is NaN (Not a Number).

Typescript

if (isNaN([1])) {
  console.log("Not a number");
}

Drag options to blanks, or click blank then click option'

A"num"

BNaN

Cnum

DNumber

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the variable name as a string.

Passing the NaN constant instead of the variable.

The isNaN function checks if the value passed is NaN. You should pass the variable name without quotes.

3fill in blank

hard

Fix the error in the code to correctly convert a string to a number.

Typescript

let value: number = Number([1]);

Drag options to blanks, or click blank then click option'

Aundefined

B"123"

Ctrue

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Passing boolean or null values which convert to 0 or NaN.

Passing undefined which results in NaN.

The Number function converts a string containing digits to a number. The string must be in quotes.

4fill in blank

hard

Fill both blanks to create a number array and get its length.

Typescript

let numbers: number[] = [[1]];
let length: number = numbers[2];

Drag options to blanks, or click blank then click option'

A1, 2, 3

Blength

C.length

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'length' without the dot.

Using 'size' which is not a property of arrays.

The array is created with numbers separated by commas. To get the length, use the .length property.

5fill in blank

hard

Fill all three blanks to create a map of numbers and filter keys with values greater than 10.

Typescript

const data: Record<string, number> = {a: 5, b: 15, c: 20};
const filtered = Object.fromEntries(
  Object.entries(data).filter(([[1], [2]]) => [3] > 10)
);

Drag options to blanks, or click blank then click option'

Akey

Bvalue

Cval

Dk

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent variable names in destructuring.

Comparing the key instead of the value.

In the filter, the destructured array elements are the key and value. The value is compared to 10.

Practice

1.

In TypeScript, which of the following is true about the number type?

easy

A. It represents both whole numbers and decimals using the same type.

B. It only represents whole numbers (integers).

C. It only represents decimal numbers (floats).

D. You must declare separate types for integers and decimals.

Solution

1. Step 1: Understand TypeScript number type

   TypeScript uses a single number type for all numeric values, whether whole or decimal.

2. Step 2: Compare options with this fact

   Only "It represents both whole numbers and decimals using the same type." correctly states that both whole and decimal numbers share the same number type.

3. Final Answer:

   It represents both whole numbers and decimals using the same type. -> Option A

4. Quick Check:

   TypeScript number = whole + decimal [OK]

Hint: Remember: one number type covers all numeric values [OK]

Common Mistakes:

• Thinking integers and decimals have separate types
• Assuming number type is only for floats
• Believing you must declare int or float explicitly

2.

Which of the following is the correct way to declare a variable x as a number with value 42 in TypeScript?

?

easy

A. let x: number = "42";

B. let x = "42";

C. let x: number = 42;

D. let x: string = 42;

Solution

1. Step 1: Check variable declaration syntax

   In TypeScript, to declare a number variable, use let x: number = value;.

2. Step 2: Validate each option

   let x: number = 42; correctly declares x as a number with value 42. Other options use wrong types or values, such as assigning a string to a number type, which is invalid.

3. Final Answer:

   let x: number = 42; -> Option C

4. Quick Check:

   Correct number declaration = let x: number = 42; [OK]

Hint: Use let x: number = value; for numbers [OK]

Common Mistakes:

• Assigning string values to number variables
• Missing the type annotation when needed
• Using quotes around numeric values

3.

What is the output of the following TypeScript code?

const a: number = 5;
const b: number = 2.5;
const c = a + b;
console.log(c);

medium

A. 7

B. Error

C. 52.5

D. 7.5

Solution

1. Step 1: Add the two numbers

   Variable a is 5 (integer), b is 2.5 (decimal). Adding gives 5 + 2.5 = 7.5.

2. Step 2: Check console output

   The console.log(c) prints the sum, which is 7.5.

3. Final Answer:

   7.5 -> Option D

4. Quick Check:

   5 + 2.5 = 7.5 [OK]

Hint: Add numbers normally; decimals stay decimals [OK]

Common Mistakes:

• Treating numbers as strings and concatenating
• Rounding automatically to integers
• Expecting a syntax or runtime error

4.

Identify the error in this TypeScript code snippet:

let num: number = 10;
num = "20";
console.log(num);

medium

A. Assigning a string to a variable declared as number causes a type error.

B. The variable num should be declared with const instead of let.

C. The console.log statement is missing parentheses.

D. There is no error; the code runs fine.

Solution

1. Step 1: Check variable type and assignment

   num is declared as number, but assigned a string "20" later, which is invalid in TypeScript.

2. Step 2: Identify the error type

   This causes a type error because TypeScript enforces type safety.

3. Final Answer:

   Assigning a string to a variable declared as number causes a type error. -> Option A

4. Quick Check:

   Type mismatch error = assigning string to number [OK]

Hint: Match variable type and assigned value exactly [OK]

Common Mistakes:

• Ignoring type mismatch errors
• Thinking TypeScript allows implicit type changes
• Confusing let and const as error causes

5.

Consider the following TypeScript code:

const values = [1, 2.5, 3, 4.75];
const integersOnly = values.filter(v => Number.isInteger(v));
console.log(integersOnly);

What will be the output?

hard

A. [1, 2.5, 3, 4.75]

B. [1, 3]

C. [2.5, 4.75]

D. []

Solution

1. Step 1: Understand Number.isInteger usage

   The filter keeps only values where Number.isInteger(v) returns true, i.e., whole numbers.

2. Step 2: Apply filter to array

   From [1, 2.5, 3, 4.75], only 1 and 3 are integers, so the filtered array is [1, 3].

3. Final Answer:

   [1, 3] -> Option B

4. Quick Check:

   Filter integers only = [1, 3] [OK]

Hint: Use Number.isInteger to filter whole numbers [OK]

Common Mistakes:

• Expecting decimals to pass Number.isInteger
• Confusing filter output with original array
• Using isInteger incorrectly as a method on numbers