Typeof operator in type context in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable with the same type as another variable using typeof.

Typescript

let name = "Alice";
let userName: [1] = "Bob";

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

Atypeof name

Btypeof "name"

Ctype name

Dtype of name

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'type name' instead of 'typeof name'.

Putting quotes around the variable name inside typeof.

In TypeScript, typeof used in a type context extracts the type of a variable. So typeof name means the type of the variable name.

2fill in blank

medium

Complete the code to declare a function parameter type using typeof operator on a variable.

Typescript

const age = 30;
function printAge(value: [1]) {
  console.log(value);
}

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

Atypeof 30

BAgeType

Ctypeof age

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using the literal type 'number' instead of typeof operator.

Using typeof with a value like 30 instead of the variable.

Using typeof age in the parameter type means the parameter must be the same type as age, which is number.

3fill in blank

hard

Fix the error by completing the type alias using typeof operator on a variable.

Typescript

const isActive = true;
type ActiveStatus = [1];

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

Atypeof isActive

Bboolean

Ctypeof true

DBoolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using the literal type 'boolean' instead of typeof operator.

Using 'Boolean' which is the constructor, not the type.

The correct way to create a type alias from a variable's type is to use typeof isActive. This extracts the type boolean from the variable.

4fill in blank

hard

Fill both blanks to create a type alias for the type of a variable and use it in a function parameter.

Typescript

const score = 100;
type ScoreType = [1];
function printScore(value: [2]) {
  console.log(value);
}

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

Atypeof score

Bnumber

CScoreType

Dtypeof 100

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' directly instead of the type alias.

Using typeof 100 instead of typeof score.

First, ScoreType is defined as typeof score to get the type of score. Then the function parameter uses ScoreType as its type.

5fill in blank

hard

Fill all three blanks to declare a variable, create a type alias using typeof, and use it in a function parameter.

Typescript

const isEnabled = false;
type EnabledType = [1];
let flag: [2] = false;
function toggle(value: [3]) {
  console.log(value);
}

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

Atypeof isEnabled

BEnabledType

Cboolean

Dtypeof false

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'boolean' directly instead of the type alias.

Using typeof false instead of typeof isEnabled.

We first create a type alias EnabledType using typeof isEnabled. Then we declare flag with type EnabledType. Finally, the function parameter uses EnabledType as its type.

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