Template Literal Types

Unit String Values

Template literal types can model values that combine a number and a unit suffix.

unit string A type such as `` `${number}px` `` accepts many numeric strings while still requiring a unit.

Unit String Values

unit
units.ts
Replay: real traced execution (multi-file project)
type CssUnit = "px" | "rem";
type CssSize = `${number}${CssUnit}`;

function styleLine(size: CssSize): string {
    return `font-size=${size}`;
}

const unit: CssUnit = "px";
const amount: number = 14;
const size: CssSize = `${amount}${unit}`;

console.log(styleLine(size));

type CssUnit = "px" | "rem";
type CssSize = `${number}${CssUnit}`;

function styleLine(size: CssSize): string {
    return `font-size=${size}`;
}

const unit: CssUnit = "rem";
const amount: number = 14;
const size: CssSize = `${amount}${unit}`;

console.log(styleLine(size));

  1. unit ← px, amount ← 14, size ← 14px

    5    return `font-size=${size}`;6}78const unit→ px: CssUnit = "px";  //@unit="rem"9const amount→ 14: number = 14;10const size→ 14px: CssSize = `${amount14}${unitpx}`;1112console.log(styleLine(size14px));

  2. function styleLine(size: CssSize): string

    1type CssUnit = "px" | "rem";2type CssSize = `${number}${CssUnit}`;34function styleLine(size14px: CssSize): string {5    return `font-size=${size14px}`;6}

  3. console.log(styleLine(size));

    9const amount: number = 14;10const size: CssSize = `${amount}${unit}`;1112console.log(styleLine(size14px));
    outputfont-size=14px

  1. unit ← rem, amount ← 14, size ← 14rem

    5    return `font-size=${size}`;6}78const unit→ rem: CssUnit = "rem";9const amount→ 14: number = 14;10const size→ 14rem: CssSize = `${amount14}${unitrem}`;1112console.log(styleLine(size14rem));

  2. function styleLine(size: CssSize): string

    1type CssUnit = "px" | "rem";2type CssSize = `${number}${CssUnit}`;34function styleLine(size14rem: CssSize): string {5    return `font-size=${size14rem}`;6}

  3. console.log(styleLine(size));

    9const amount: number = 14;10const size: CssSize = `${amount}${unit}`;1112console.log(styleLine(size14rem));
    outputfont-size=14rem