Number type behavior in Typescript - Step-by-Step Execution

Concept Flow - Number type behavior

Declare number variable

↓

Assign numeric value

↓

Perform arithmetic or comparison

↓

Check for special values: NaN, Infinity

↓

Use value in expressions or output

This flow shows how a number variable is declared, assigned, used in calculations, checked for special cases, and then output or used further.

Execution Sample

Typescript

let a: number = 5;
let b: number = 0 / 0;
let c: number = 1 / 0;
console.log(a, b, c);

This code declares three numbers: a normal number, NaN from 0/0, and Infinity from 1/0, then prints them.

Execution Table

Step	Code Line	Variable	Value Assigned	Special Case	Output
1	let a: number = 5;	a	5	No
2	let b: number = 0 / 0;	b	NaN	Yes (Not a Number)
3	let c: number = 1 / 0;	c	Infinity	Yes (Infinity)
4	console.log(a, b, c);	-	-	-	5 NaN Infinity

💡 All variables assigned; console.log outputs the values including special number cases.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
a	undefined	5	5	5	5
b	undefined	undefined	NaN	NaN	NaN
c	undefined	undefined	undefined	Infinity	Infinity

Key Moments - 3 Insights

Why does dividing 0 by 0 result in NaN instead of a number?

Dividing 0 by 0 is undefined mathematically, so JavaScript/TypeScript assigns NaN (Not a Number) as shown in step 2 of the execution_table.

Why is 1 divided by 0 Infinity and not an error?

In JavaScript/TypeScript, dividing a positive number by zero results in Infinity, a special numeric value, as shown in step 3 of the execution_table.

Can NaN be compared like normal numbers?

No, NaN is unique: it is not equal to anything, even itself. This special behavior is important to remember when checking values.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what is the value of variable b?

A 0

B NaN

C Infinity

D undefined

💡 Hint

Check the 'Value Assigned' column for step 2 in the execution_table.

At which step does variable c get assigned Infinity?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Variable' and 'Value Assigned' columns in the execution_table.

If we changed 'let b = 0 / 0;' to 'let b = 1 / 0;', what would be the value of b after step 2?

A NaN

B 0

C Infinity

D undefined

💡 Hint

Refer to how variable c is assigned Infinity at step 3 in the execution_table.

Concept Snapshot

Number type in TypeScript holds numeric values including special ones.
Assign numbers directly or from expressions.
Special values: NaN (not a number), Infinity (division by zero).
NaN is unique: not equal to anything, even itself.
Use console.log to see number values including special cases.

Full Transcript

This example shows how TypeScript handles number variables. First, a normal number 5 is assigned to variable a. Then, dividing zero by zero results in NaN, assigned to b. Dividing one by zero results in Infinity, assigned to c. Finally, all three values are printed. NaN means 'not a number' and is a special value for undefined math results. Infinity represents a value larger than any number. These special values behave differently from normal numbers, for example, NaN is not equal to itself. Understanding these helps avoid bugs when working with numbers.

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