文字类型和断言

TypeScript provides advanced tools to narrow down the possible values of variables and to force the compiler to recognize more specific types when necessary.

Literal Types

A literal type represents an exact, single value (for example, a specific string or number). They are usually combined with union types:

type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;

light = 'red'; // OK
light = 'blue'; // Error: "blue" is not assignable to TrafficLight

Type Assertions (as)

Sometimes you have information about a type that TypeScript cannot know at compile time. In these cases, you can use a type assertion using the as keyword:

const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;

The assertion tells the compiler: "Trust me, I know this element is an HTMLCanvasElement". It does not perform any checks or casts at runtime; it only helps the type checker.

Const Assertions (as const)

When we declare an object or an array with const, TypeScript still allows modifying its internal properties. By adding as const at the end, the entire structure is frozen and made read-only, converting all properties into their exact literal types:

const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Error: array is read-only

Template Literal Types

Template literal types are built on top of JavaScript template strings, but are used in type positions. They allow combining multiple literal types into one:

type Size = 'small' | 'large';
type Color = 'red' | 'blue';

// Creates the union: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;

String Utilities in Template Literal Types

TypeScript provides special utility types to manipulate characters within Template Literal Types:

• Capitalize<StringType>: Capitalizes the first letter of the string.
• Uncapitalize<StringType>: Uncapitalizes the first letter of the string.
• Uppercase<StringType>: Converts the entire string to uppercase.
• Lowercase<StringType>: Converts the entire string to lowercase.

type ActionType = 'click' | 'hover';

// Generates: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;

Try it yourself

Exercise 1: Direction Literal Union

Exercise 2: Assertion on JSON.parse

Exercise 3: Template Literal for Events

Exercise 4: Template Literal Type with Capitalize