Typeof operator in type context in Typescript - Mini Project: Build & Apply

Using the Typeof Operator in Type Context

📖 Scenario: Imagine you are building a simple program to store information about a product. You want to make sure the types of your variables match exactly, so you use TypeScript's typeof operator in a type context to keep your code safe and clear.

🎯 Goal: You will create a variable with product details, then use the typeof operator to create a type based on that variable. Finally, you will declare another variable using that type and print its value.

📋 What You'll Learn

Create a variable called product with exact properties: name as a string and price as a number

Create a type called ProductType using typeof product

Create a variable called newProduct of type ProductType with exact values

Print the newProduct variable

💡 Why This Matters

🌍 Real World

Using <code>typeof</code> in type contexts helps keep your code consistent and safe by reusing types from existing variables. This is useful when working with complex data structures or APIs.

💼 Career

Many TypeScript jobs require understanding how to create and reuse types efficiently. Using <code>typeof</code> in type contexts is a common technique to reduce errors and improve code maintainability.

1

Create the product variable

Create a variable called product with the exact properties: name set to "Book" and price set to 15.

Typescript

# Your code here

Hint

Use const product = { name: "Book", price: 15 }; to create the variable.

2

Create the ProductType type using typeof

Create a type called ProductType using typeof product.

Typescript

const product = { name: "Book", price: 15 };

// Your code here

Hint

Use type ProductType = typeof product; to create the type.

3

Create a newProduct variable of type ProductType

Create a variable called newProduct of type ProductType with name set to "Pen" and price set to 5.

Typescript

const product = { name: "Book", price: 15 };
type ProductType = typeof product;

// Your code here

Hint

Use const newProduct: ProductType = { name: "Pen", price: 5 }; to create the variable.

4

Print the newProduct variable

Write a console.log statement to print the newProduct variable.

Typescript

const product = { name: "Book", price: 15 };
type ProductType = typeof product;
const newProduct: ProductType = { name: "Pen", price: 5 };

// Your code here

Hint

Use console.log(newProduct); to print the variable.

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