Typeof operator in type context in Typescript

Introduction

The typeof operator in type context helps you get the type of a variable or value. It makes your code safer by reusing existing types without repeating them.

When you want to create a new variable with the same type as an existing one.

When you want to avoid writing the type manually and keep types consistent.

When you want to use the type of a constant or object property in another place.

When you want to make your code easier to update by linking types automatically.

Syntax

Typescript

type NewType = typeof existingVariable;

The typeof here is different from the JavaScript typeof operator that returns a string.

This typeof is used only in TypeScript's type annotations.

Examples

This creates a type AgeType that is the same as the type of age, which is number.

Typescript

const age = 30;
type AgeType = typeof age;

This creates a type UserType matching the shape of the user object.

Typescript

const user = { name: 'Anna', active: true };
type UserType = typeof user;

This creates a type GreetType that is the type of the greet function.

Typescript

function greet() {
  return 'hello';
}
type GreetType = typeof greet;

Sample Program

This program uses typeof in type context to create ScoreType as the type of score. Then it uses this type for the function parameter to ensure only numbers like score are accepted.

Typescript

const score = 85;
type ScoreType = typeof score;

function printScore(s: ScoreType) {
  console.log(`Score is: ${s}`);
}

printScore(90);

Important Notes

Remember, typeof in type context works only in TypeScript, not in plain JavaScript.

Use typeof in type context with variables, constants, or functions.

Summary

typeof in type context gets the type of a variable or value.

It helps keep types consistent and avoid repetition.

Use it to create new types based on existing variables or functions.

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