Typeof operator in type context in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the typeof operator do in a type context in TypeScript?

In a type context, typeof gets the type of a variable or expression, allowing you to use that type elsewhere in your code.

beginner

How is typeof in a type context different from typeof in JavaScript runtime?

typeof in TypeScript type context extracts the type of a variable, while in JavaScript runtime it returns a string describing the type (like 'string' or 'number').

beginner

Given <code>const user = { name: 'Alice', age: 30 };</code>, what does <code>type User = typeof user;</code> do?

It creates a new type User that matches the shape of the user object, with properties name as string and age as number.

intermediate

Can typeof be used to get the type of a function in TypeScript?

Yes, typeof can get the type of a function variable, including its parameter types and return type.

beginner

Why is using typeof in type context helpful in TypeScript?

It helps keep types consistent and reduces duplication by reusing the type of existing variables or objects automatically.

What does typeof return in a TypeScript type context?

A The value of the variable

B A string describing the type

C The type of a variable or expression

D An error

typeof in type context extracts the type, not a string or value.

Given const x = 42;, what is the type of typeof x in TypeScript?

A typeof x

B number

C string

D any

typeof x is the type number because x is a number.

Which of these is a valid use of typeof in a type context?

A type T = typeof someVariable;

B let x = typeof someVariable;

C console.log(typeof someVariable);

D typeof someVariable = string;

You can assign a type alias using typeof in a type context like type T = typeof someVariable;.

Can typeof be used to get the type of a class instance in TypeScript?

A Yes, it gets the instance type

B No, it only works with primitives

C Only with functions

D Only with interfaces

typeof can get the type of any variable, including class instances.

What is the main benefit of using typeof in type context?

A Runs faster code

B Creates new variables

C Changes variable values

D Avoids repeating type definitions

Using typeof helps avoid repeating type definitions by reusing existing types.

Explain how the typeof operator works in a TypeScript type context and give an example.

Think about how you can reuse a variable's type without rewriting it.

Describe the difference between typeof in JavaScript runtime and in TypeScript type context.

One is about values during running, the other about types during coding.

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