Typeof operator in type context in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of typeof in type context

What is the output of this TypeScript code when compiled and run in JavaScript?

Typescript

const num = 42;
type NumType = typeof num;
console.log(typeof num);

A "undefined"

B "NumType"

C "typeof num"

D "number"

💡 Hint

Remember that typeof in JavaScript returns a string describing the runtime type.

The typeof operator in JavaScript returns a string describing the type of the value at runtime. Here, num is a number, so typeof num returns "number".

In TypeScript, typeof used in a type context (like type NumType = typeof num;) extracts the type of the variable, but this does not affect the runtime output.

❓ Predict Output

intermediate

Type extraction with typeof operator

Given this TypeScript code, what is the type of variable user2?

Typescript

const user = { name: "Alice", age: 30 };
type UserType = typeof user;
const user2: UserType = { name: "Bob", age: 25 };

A A string

B An object with properties name (string) and age (number)

C A number

D An array of strings

💡 Hint

typeof in type context extracts the type shape of the variable.

The typeof operator in a type context extracts the type of the variable user, which is an object with name as string and age as number.

So UserType is the type describing that object shape, and user2 must match it.

🔧 Debug

advanced

Identify the error with typeof in type context

What error does this TypeScript code produce?

Typescript

const value = 10;
type ValueType = typeof value;
const newValue: ValueType = "10";

A No error, code runs fine.

B Type 'number' is not assignable to type 'string'.

C Type 'string' is not assignable to type 'number'.

D SyntaxError: Unexpected token 'typeof'.

💡 Hint

Check the type of value and what is assigned to newValue.

The type ValueType is number because value is a number.

Assigning a string "10" to newValue causes a type error: string is not assignable to number.

📝 Syntax

advanced

Correct use of typeof in type context

Which option correctly uses typeof in a type context to declare a variable with the same type as config?

Typescript

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

A

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

B

type ConfigType = typeof(config);
const newConfig: ConfigType = { url: "https://test.com", timeout: 3000 };

C

type ConfigType = typeof config();
const newConfig: ConfigType = { url: "https://test.com", timeout: 3000 };

D

type ConfigType = typeof config[];
const newConfig: ConfigType = { url: "https://test.com", timeout: 3000 };

💡 Hint

typeof in type context does not use parentheses or brackets.

Option A correctly uses typeof config without parentheses or brackets to get the type of config.

Options B, C, and D use invalid syntax: parentheses, function call, or array brackets are not valid here.

🚀 Application

expert

Using typeof for dynamic type safety

Consider this TypeScript code. What is the type of settingsCopy after the assignment?

Typescript

const settings = { darkMode: true, version: 1 };
type SettingsType = typeof settings;
function cloneSettings(s: SettingsType): SettingsType {
  return { ...s };
}
const settingsCopy = cloneSettings(settings);

A An object with properties darkMode (boolean) and version (number)

B An object with properties darkMode (string) and version (string)

C A boolean value

D A number value

💡 Hint

typeof extracts the type shape of the original object for use in the function.

The SettingsType is the type of settings, which is an object with darkMode as boolean and version as number.

The function cloneSettings returns a new object with the same type.

Therefore, settingsCopy has the same type as settings.