Typeof operator in type context in Typescript - Step-by-Step Execution

Concept Flow - Typeof operator in type context

Declare variable with value

↓

Use typeof in type context

↓

Type is set to the variable's type

↓

Use new type for other variables

↓

Type checking at compile time

The typeof operator in type context extracts the type of a variable or expression, allowing reuse of that type elsewhere in the code.

Execution Sample

Typescript

const name = "Alice";
type NameType = typeof name;
const anotherName: NameType = "Bob";

This code sets a variable 'name', then creates a type 'NameType' based on 'name's type, and uses it to type another variable.

Execution Table

Step	Action	Evaluation	Result
1	Declare const name = "Alice"	name is string	name = "Alice" (string)
2	Create type NameType = typeof name	typeof name is string	NameType = string
3	Declare const anotherName: NameType = "Bob"	anotherName must be string	anotherName = "Bob" (string)
4	Try assigning anotherName = 123 (number)	Type error	Error: Type 'number' is not assignable to type 'string'

💡 Type checking stops compilation if types mismatch, ensuring type safety.

Variable Tracker

Variable/Type	Start	After Step 1	After Step 2	After Step 3	After Step 4
name	undefined	"Alice"	"Alice"	"Alice"	"Alice"
NameType	undefined	undefined	string	string	string
anotherName	undefined	undefined	undefined	"Bob"	Error

Key Moments - 2 Insights

Why does 'typeof' in type context not return a string value but a type?

In step 2 of the execution_table, 'typeof name' is used as a type operator, not a runtime operator, so it extracts the type 'string' instead of the value.

What happens if you assign a number to 'anotherName' typed as 'NameType'?

As shown in step 4, the compiler throws a type error because 'anotherName' expects a string type, enforcing type safety.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what type does 'NameType' represent?

A typeof name (value)

B number

C string

D any

💡 Hint

Check the 'Result' column at step 2 in the execution_table.

At which step does the compiler detect a type error?

A Step 1

B Step 4

C Step 3

D Step 2

💡 Hint

Look for the 'Type error' in the 'Evaluation' column in the execution_table.

If 'name' was declared as a number instead of a string, what would 'NameType' be?

A number

B string

C boolean

D any

💡 Hint

Refer to the variable_tracker and how 'NameType' depends on 'name's type.

Concept Snapshot

Typeof operator in type context:
- Syntax: type NewType = typeof existingVariable;
- Extracts the type of a variable or expression
- Used for type reuse and safety
- Does NOT get the runtime value
- Helps avoid repeating type declarations

Full Transcript

This visual trace shows how the 'typeof' operator in TypeScript's type context works. First, a variable 'name' is declared with a string value. Then, 'typeof name' is used to create a new type alias 'NameType' which represents the type of 'name', which is string. Next, another variable 'anotherName' is declared with type 'NameType' and assigned a string value. If we try to assign a number to 'anotherName', the compiler throws a type error, demonstrating type safety. The variable tracker shows how values and types evolve step-by-step. Key moments clarify that 'typeof' in type context extracts types, not values, and that type errors prevent invalid assignments. The quiz tests understanding of these steps and type relationships.

Practice

1. What does the typeof operator do when used in a type context in TypeScript?

easy

A. It returns the runtime value of a variable.

B. It gets the type of a variable or value.

C. It converts a type to a string.

D. It creates a new variable.

Solution

1. Step 1: Understand typeof in type context

   In TypeScript, typeof used in a type context extracts the type of a variable or value, not its runtime value.

2. Step 2: Differentiate from runtime typeof

   Unlike JavaScript's runtime typeof that returns a string, TypeScript's typeof in type context returns the type itself.

3. Final Answer:

   It gets the type of a variable or value. -> Option B

4. Quick Check:

   typeof in type context = type extraction [OK]

Hint: Remember: typeof in types gets the variable's type [OK]

Common Mistakes:

• Confusing runtime typeof with type context typeof
• Thinking it returns a string type
• Assuming it creates new variables

2. Which of the following is the correct syntax to create a new type based on the type of variable user using typeof in TypeScript?

easy

A. type UserType = typeof(user);

B. type UserType = type of user;

C. type UserType = typeof user;

D. type UserType = type(user);

Solution

1. Step 1: Recall correct typeof syntax in type context

   The correct syntax is type NewType = typeof variableName; without parentheses.

2. Step 2: Check each option

   type UserType = typeof user; uses correct syntax. type UserType = type of user; has spaces and is invalid. type UserType = typeof(user); uses parentheses which is invalid in type context. type UserType = type(user); uses incorrect keyword.

3. Final Answer:

   type UserType = typeof user; -> Option C

4. Quick Check:

   Correct syntax = typeof variable without parentheses [OK]

Hint: Use typeof variable without parentheses for types [OK]

Common Mistakes:

• Adding parentheses after typeof
• Writing type of instead of typeof
• Using runtime syntax in type context

3. Consider the following TypeScript code:

const age = 30;
type AgeType = typeof age;

const myAge: AgeType = 25;

What is the type of myAge?

medium

A. number

B. string

C. boolean

D. any

Solution

1. Step 1: Identify the type of age

   The variable age is assigned the number 30, so its type is number.

2. Step 2: Understand AgeType = typeof age

   This means AgeType is the type of age, which is number. So myAge must be a number.

3. Final Answer:

   number -> Option A

4. Quick Check:

   typeof age = number [OK]

Hint: Check the original variable's type to know the new type [OK]

Common Mistakes:

• Confusing value with type
• Assuming typeof returns string
• Using wrong type for myAge

4. Identify the error in this TypeScript code using typeof in type context:

const name = "Alice";
type NameType = typeof(name);
const userName: NameType = "Bob";

medium

A. Parentheses are not allowed after typeof in type context.

B. Variable name is not declared.

C. Type alias cannot be assigned a string.

D. Missing semicolon after const declaration.

Solution

1. Step 1: Check typeof usage in type context

   In type context, typeof must be used without parentheses. Using parentheses causes a syntax error.

2. Step 2: Verify other parts

   Variable name is declared, assigning string is valid, and semicolons are optional in TypeScript.

3. Final Answer:

   Parentheses are not allowed after typeof in type context. -> Option A

4. Quick Check:

   No parentheses after typeof in types [OK]

Hint: Avoid parentheses after typeof in type declarations [OK]

Common Mistakes:

• Adding parentheses after typeof
• Thinking semicolons are mandatory
• Confusing runtime and type syntax

5. Given the code below, what is the type of configCopy?

const config = {
  url: "https://example.com",
  timeout: 5000,
  debug: true
};

type ConfigType = typeof config;
const configCopy: ConfigType = {
  url: "https://test.com",
  timeout: 3000,
  debug: false
};

Choose the best description of configCopy's type.

hard

A. An array of strings.

B. An object with only string properties.

C. A function returning an object.

D. An object with properties url (string), timeout (number), and debug (boolean).

Solution

1. Step 1: Analyze the original config object

   The config object has three properties: url (string), timeout (number), and debug (boolean).

2. Step 2: Understand ConfigType = typeof config

   This creates a type matching the shape and types of config.

3. Step 3: Check configCopy assignment

   configCopy must match the same property types as config, which it does.

4. Final Answer:

   An object with properties url (string), timeout (number), and debug (boolean). -> Option D

5. Quick Check:

   typeof config = object with matching properties [OK]

Hint: Use typeof to copy object shape and types exactly [OK]

Common Mistakes:

• Assuming typeof returns array or function
• Ignoring property types in object
• Confusing object with array