Key remapping with as clause in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of key remapping with as clause in mapped types

What is the type of Result after applying the key remapping with as clause in this code?

Typescript

type Original = { a: number; b: string; c: boolean };
type Result = {
  [K in keyof Original as `new_${string & K}`]: Original[K]
};

A { new_a: number; new_b: string; new_c: boolean }

B { a: number; b: string; c: boolean }

C { new_a: string; new_b: string; new_c: string }

D { new_a: number; b: string; c: boolean }

💡 Hint

The as clause renames keys by prefixing them with 'new_'.

The mapped type remaps each key K to a new key `new_${K}` while keeping the original value types.

❓ Predict Output

intermediate

Resulting keys after conditional key remapping

Given this mapped type with conditional key remapping, what keys does Filtered have?

Typescript

type Data = { id: number; name: string; active: boolean };
type Filtered = {
  [K in keyof Data as K extends 'id' | 'active' ? K : never]: Data[K]
};

A {}

B { name: string }

C { id: number; name: string; active: boolean }

D { id: number; active: boolean }

💡 Hint

Keys not matching the condition become never and are removed.

Keys id and active remain, name is removed by remapping to never.

🔧 Debug

advanced

Identify the error in key remapping with invalid key type

What error does this TypeScript code produce?

Typescript

type T = { a: number };
type R = { [K in keyof T as number]: T[K] };

A Type 'number' cannot be used as a key type in mapped types

B No error, type R is { number: number }

C SyntaxError: Unexpected token 'as'

D Type 'string' is expected but 'number' found

💡 Hint

Mapped type keys must be string, number, or symbol literals or unions.

Using a plain 'number' type as a key remapping is invalid because keys must be literal types or unions of literals.

📝 Syntax

advanced

Correct syntax for key remapping with as clause

Which option shows the correct syntax for remapping keys in a mapped type using the as clause?

Typescript

type Original = { x: number; y: string };
type Mapped = { /* fill here */ };

A [K as `new_${K}` in keyof Original]: Original[K]

B [K in keyof Original as `new_${K}`]: Original[K]

C [K in keyof Original] as `new_${K}`: Original[K]

D [K in keyof Original]: Original[K] as `new_${K}`

💡 Hint

The as clause goes immediately after the key variable in the brackets.

The correct syntax is [K in keyof T as NewKey]: Value where as remaps the key.

🚀 Application

expert

Create a mapped type that renames keys to uppercase

Which option correctly defines a mapped type UppercaseKeys that takes an object type T and produces a new type with all keys converted to uppercase strings?

Typescript

type UppercaseKeys<T> = { /* fill here */ };

A { [K in keyof T as K.toUpperCase()]: T[K] }

B { [K in keyof T as string.toUpperCase(K)]: T[K] }

C { [K in keyof T as Uppercase<string & K>]: T[K] }

D { [K in keyof T as Uppercase<K>]: T[K] }

💡 Hint

Use the built-in Uppercase utility type with a string intersection.

Keys must be cast to string & K before applying Uppercase to ensure correct type inference.

Practice

1.

What does the as clause do in a TypeScript mapped type?

easy

A. It adds new keys without changing existing ones.

B. It changes the values of the original type.

C. It removes keys from the original type.

D. It renames the keys of the original type to new keys.

Solution

1. Step 1: Understand mapped types

   Mapped types create new types by transforming keys or values of an existing type.

2. Step 2: Role of as clause

   The as clause specifically allows renaming keys during this transformation.

3. Final Answer:

   It renames the keys of the original type to new keys. -> Option D

4. Quick Check:

   as clause = rename keys [OK]

Hint: Remember: as changes keys, not values [OK]

Common Mistakes:

• Thinking as changes values instead of keys
• Confusing as with adding new keys
• Assuming as removes keys

2.

Which of the following is the correct syntax to rename keys in a mapped type using as?

type Original = { a: number; b: string };
type Renamed = { [K in keyof Original as ???]: Original[K] };

easy

A. as K

B. `new_${K}`

C. K as string

D. K + 'Key'

Solution

1. Step 1: Understand template literal types in key remapping

   To rename keys dynamically, template literals like `new_${K}` are used inside the as clause.

2. Step 2: Check syntax correctness

   Only `new_${K}` is valid syntax for renaming keys using template literals in TypeScript.

3. Final Answer:

   `new_${K}` -> Option B

4. Quick Check:

   Use template literals inside as for renaming [OK]

Hint: Use backticks and ${} for key renaming [OK]

Common Mistakes:

• Using plus (+) operator instead of template literals
• Writing as K inside brackets incorrectly
• Trying to cast keys with as string

3.

What is the resulting type of this code?

type User = { id: number; name: string };
type PrefixedUser = { [K in keyof User as `user_${K}`]: User[K] };

medium

A. { userId: number; userName: string }

B. { id: number; name: string }

C. { user_id: number; user_name: string }

D. Error: Invalid key remapping

Solution

1. Step 1: Analyze key remapping with template literals

   The keys id and name are renamed to userId and userName respectively using `user_${K}`.

2. Step 2: Confirm values remain unchanged

   The values for each key remain the same as in User.

3. Final Answer:

   { userId: number; userName: string } -> Option A

4. Quick Check:

   Keys renamed with prefix 'user_' [OK]

Hint: Template literals rename keys, values stay same [OK]

Common Mistakes:

• Assuming keys stay the same
• Confusing camelCase with snake_case
• Expecting a syntax error

4.

Identify the error in this mapped type:

type Data = { x: number; y: string };
type NewData = { [K in keyof Data as K.toUpperCase()]: Data[K] };

medium

A. Cannot use toUpperCase() on type keys directly.

B. Missing return type for mapped type.

C. Keys must be numbers, not strings.

D. Values cannot be accessed with Data[K].

Solution

1. Step 1: Check key remapping expression

   The expression K.toUpperCase() is a runtime string method and cannot be used in type-level key remapping.

2. Step 2: Understand type-level string manipulation

   TypeScript requires template literal types or conditional types for key transformations, not runtime methods.

3. Final Answer:

   Cannot use toUpperCase() on type keys directly. -> Option A

4. Quick Check:

   Runtime methods disallowed in type keys [OK]

Hint: Use template literals, not runtime string methods [OK]

Common Mistakes:

• Trying to call string methods on keys in types
• Confusing runtime and compile-time code
• Ignoring TypeScript's type system limits

5.

Given this type, how would you create a new type that renames only keys starting with is by prefixing them with flag_, keeping others unchanged?

type Flags = { isActive: boolean; isAdmin: boolean; count: number };

hard

A. type NewFlags = { [K in keyof Flags]: Flags[K] };

B. type NewFlags = { [K in keyof Flags as `flag_${K}`]: Flags[K] };

C. type NewFlags = { [K in keyof Flags as K extends `is${string}` ? `flag_${K}` : K]: Flags[K] };

D. type NewFlags = { [K in keyof Flags as K.toLowerCase()]: Flags[K] };

Solution

1. Step 1: Use conditional type in as clause

   The condition K extends `is${string}` checks if the key starts with 'is'.

2. Step 2: Rename keys conditionally

   If true, rename key to `flag_${K}`, else keep original key K.

3. Step 3: Keep values unchanged

   Values remain the same as in Flags.

4. Final Answer:

   type NewFlags = { [K in keyof Flags as K extends `is${string}` ? `flag_${K}` : K]: Flags[K] }; -> Option C

5. Quick Check:

   Conditional key renaming with template literals [OK]

Hint: Use conditional as with template literals [OK]

Common Mistakes:

• Renaming all keys without condition
• Using runtime string methods in types
• Not preserving keys that don't match condition