Distributive conditional types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a conditional type that returns 'string' if T is 'string', otherwise 'number'.

Typescript

type CheckType<T> = T extends [1] ? 'string' : 'number';

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' instead of 'string' in the extends clause.

Confusing the order of true and false branches.

The conditional type checks if T extends string. If yes, it returns 'string', otherwise 'number'.

2fill in blank

medium

Complete the code to create a distributive conditional type that extracts the element type from an array type.

Typescript

type ElementType<T> = T extends [1] ? T[number] : T;

Drag options to blanks, or click blank then click option'

Aany[]

Bobject

Creadonly any[]

DArray<any>

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Array' instead of 'any[]' which may cause distributive behavior issues.

Not using T[number] to extract element type.

The conditional type checks if T extends an array type any[]. If yes, it returns the element type T[number], otherwise returns T itself.

3fill in blank

hard

Fix the error in the conditional type that should distribute over union types to return 'true' if T is 'string' or 'number', otherwise 'false'.

Typescript

type IsStringOrNumber<T> = T extends [1] ? true : false;

Drag options to blanks, or click blank then click option'

Astring | boolean

Bstring | number

Cnumber | boolean

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string | boolean' which excludes 'number'.

Using only 'string' or 'number' alone, missing the union.

The conditional type distributes over union types. To check if T is string or number, use string | number in the extends clause.

4fill in blank

hard

Fill both blanks to create a conditional type that returns the keys of T whose values extend string.

Typescript

type StringKeys<T> = { [K in keyof T]: T[K] [1] string ? K : never }[[2]];

Drag options to blanks, or click blank then click option'

Aextends

Bkeyof T

CT

Din

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'in' instead of 'extends' in the conditional check.

Using 'T' instead of 'keyof T' in the final index.

This mapped type iterates over keys K of T. For each key, it checks if the value type T[K] extends string. If yes, it keeps the key K, otherwise never. Finally, it indexes with keyof T to get a union of keys with string values.

5fill in blank

hard

Fill all three blanks to create a distributive conditional type that converts union members to their array types, otherwise returns never.

Typescript

type ToArray<T> = T extends [1] ? [2][] : [3];

Drag options to blanks, or click blank then click option'

Aany

BT

Cnever

Dunknown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'any' instead of 'unknown' which may affect distributive behavior.

Returning 'T' instead of 'T[]' for the true branch.

This conditional type checks if T extends unknown (which is always true, triggering distributive behavior). It then converts each member of the union T to an array type T[]. Otherwise, it returns never.