Template Literals & Inference — Series 3

Preview — 3 of 10 questions

How many members does ClassName have, and what are they?

javascript

type Size = "sm" | "lg";
type Color = "red" | "blue";

type ClassName = `${Size}-${Color}`;

A2 — the unions are zipped pairwise: "sm-red" | "lg-blue"

B1 — ${string}-${string} , since the unions widen

C4 — "sm-red" | "sm-blue" | "lg-red" | "lg-blue"

DCompile-time error — a template literal type may interpolate at most one union

javascript

type Ev = "click" | "focus";

type A = Uppercase<Ev>;
type B = Capitalize<`x${string}`>;
type C = Uppercase<string>;

AA is "CLICK" | "FOCUS"; B is X${string} ; C stays as the deferred Uppercase<string>, which is assignable to string

BA is string; B is string; C is string — the intrinsics only work on a single literal

CA is "CLICK" | "FOCUS"; B is a compile-time error — an intrinsic cannot take a template literal type

DAll three are compile-time errors — the intrinsics require an explicit type argument list

javascript

type Shape =
  | { kind: "circle"; r: number }
  | { kind: "square"; w: number };

type OnlyCircle<T> = T extends { kind: "circle" } ? T : never;

type R = OnlyCircle<Shape>;

AShape — both members have a kind, so both match

B{ kind: "circle" } — the result is the pattern, not the matching member

Cnever — an object type never extends another object type

D{ kind: "circle"; r: number } — the conditional distributes and the true branch returns the whole matching member

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