Template Literals & Inference

Preview — 3 of 10 questions

What type does TypeScript infer for EventName?

javascript
type Color  = 'red' | 'green' | 'blue';
type Action = 'changed' | 'reset' | 'hovered';

type ColorEvent = `${Color}:${Action}`;
Astring
B'red' | 'green' | 'blue'
C${Color}:${Action}
D'red:changed' | 'red:reset' | 'red:hovered' | 'green:changed' | 'green:reset' | 'green:hovered' | 'blue:changed' | 'blue:reset' | 'blue:hovered'

What are the results?

javascript
type A = Uppercase<'hello'>;
type B = Lowercase<'WORLD'>;
type C = Capitalize<'camelCase'>;
type D = Uncapitalize<'PascalCase'>;
ACompile error — string manipulation is not supported in TypeScript
BA = string, B = string, C = string, D = string
CA = 'HELLO', B = 'WORLD', C = 'camelCase', D = 'PascalCase'
DA = 'HELLO', B = 'world', C = 'CamelCase', D = 'pascalCase'

What does this mapped type with filtering produce?

javascript
type OnlyStrings<T> = {
  [K in keyof T as T[K] extends string ? K : never]: T[K];
};

interface Mixed {
  name: string;
  age: number;
  email: string;
  active: boolean;
  role: string;
}

type StringProps = OnlyStrings<Mixed>;
A{ age: number; active: boolean }
B{ name: string; email: string; role: string }
CMixed unchanged
D{ name?: string; email?: string; role?: string }

Sign up free to play

Answer all 10 questions (7 more), see explanations for every answer, and track your score.