TypeScript - Literal Types: A Beginner's Guide

Привет, будущая звезда программирования! Сегодня мы окунемся в захватывающий мир литеральных типов TypeScript. Не волнуйтесь, если вы новички в программировании - я буду вашим дружелюбным проводником в этом приключении. К концу этого учебника вы будете использовать литеральные типы, как профи!

Что такое литеральные типы?

Прежде чем мы углубимся, представьте, что вы заказываете пиццу. Вы не можете просто сказать: "Я хочу пиццу." Вам нужно specify размер: малый, средний или большой. В TypeScript литеральные типы такие же, как и эти конкретные размеры пиццы - это точные значения, которые может принимать переменная.

Синтаксис

Синтаксис для литеральных типов прост. Вы просто используете exact значение, которое хотите разрешить. Давайте посмотрим на базовый пример:

let pizzaSize: "small" | "medium" | "large";

В этом случае pizzaSize может быть только "small", "medium" или "large". Ничего другого не разрешено - даже "extra large" или "маленькая"!

Литеральные типы строк

Литеральные типы строк являются наиболее распространенными и最容易 понять. Они именно такие, как они звучат - конкретные строки, которые может быть переменная.

Пример 1: Дни недели

type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

let today: DayOfWeek = "Monday";
today = "Friday"; // Этоfine
today = "Someday"; // Ошибка! Тип '"Someday"' не может быть присвоен типу 'DayOfWeek'.

В этом примере DayOfWeek - это тип, который может быть только одним из семи дней недели. Попробуйте присвоить любую другую строку, и TypeScript покажет вам finger!

Пример 2: Цвета светофора

type TrafficLightColor = "Red" | "Yellow" | "Green";

function changeLight(color: TrafficLightColor) {
console.log(`The light has changed to ${color}`);
}

changeLight("Green"); // Работает fine
changeLight("Purple"); // Ошибка! Аргумент типа '"Purple"' не может быть присвоен параметру типа 'TrafficLightColor'.

Здесь мы ensured, что наш светофор может изменяться только на valid цвета. Никаких диско-огней на этой улице!

Литеральные типы чисел

Как и со строками, мы можем создавать литеральные типы с числами. Это замечательно, когда вы хотите restrict значение до конкретных чисел.

Пример 3: Броски костей

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function rollDice(): DiceRoll {
return Math.floor(Math.random() * 6) + 1 as DiceRoll;
}

let myRoll = rollDice();
console.log(`You rolled a ${myRoll}`);

В этом примере мы ensured, что наша кость может бросать только числа от 1 до 6. Никаких загруженных костей в нашей игре!

Пример 4: Размеры рубашек

type ShirtSize = 36 | 38 | 40 | 42 | 44;

let myShirtSize: ShirtSize = 40;
myShirtSize = 41; // Ошибка! Тип '41' не может быть присвоен типу 'ShirtSize'.

Здесь мы restrict размер рубашек до конкретных чисел. Никаких промежуточных размеров в этом магазине!

Комбинированные литеральные типы

Настоящая сила литеральных типов проявляется, когда мы combine разные типы литералов.

Пример 5: Состояние игрового персонажа

type CharacterStatus = "Alive" | "Dead" | 1 | 0;

let hero: CharacterStatus = "Alive";
hero = 1; // Это также valid
hero = "Wounded"; // Ошибка! Тип '"Wounded"' не может быть присвоен типу 'CharacterStatus'.

В этой игре персонаж может быть "Alive", "Dead", 1 (представляющий alive) или 0 (представляющий dead). Это как иметь и текстовое, и кодовое представление!

Сценарии использования литеральных типов

Литеральные типы极为有用 в многих сценариях. Давайте рассмотрим несколько:

1. Параметры функции

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function sendRequest(url: string, method: HttpMethod) {
// Отправка запроса
console.log(`Sending ${method} request to ${url}`);
}

sendRequest("https://api.example.com", "GET"); // Работает fine
sendRequest("https://api.example.com", "FETCH"); // Ошибка! Аргумент типа '"FETCH"' не может быть присвоен параметру типа 'HttpMethod'.

Используя литеральный тип для метода HTTP, мы ensured, что могут быть использованы только valid методы.

2. Конфигурационные объекты

type Theme = "light" | "dark" | "system";
type Language = "en" | "es" | "fr" | "de";

interface AppConfig {
theme: Theme;
language: Language;
notifications: boolean;
}

const myConfig: AppConfig = {
theme: "dark",
language: "en",
notifications: true
};

Литеральные типы помогают нам создавать strict конфигурационные объекты, предотвращая опечатки и invalid настройки.

3. Состояния автоматов

type LoginState = "loggedOut" | "loggingIn" | "loggedIn" | "error";

class LoginManager {
private state: LoginState = "loggedOut";

login() {
this.state = "loggingIn";
// Выполнение логики входа
this.state = Math.random() > 0.5 ? "loggedIn" : "error";
}

logout() {
this.state = "loggedOut";
}

getState(): LoginState {
return this.state;
}
}

Здесь мы используем литеральные типы для represenenting различных состояний в процессе входа в систему, ensuring, что состояние может быть только одним из предопределенных значений.

Методы таблицы

Вот таблица, резюмирующая ключевые методы и концепции, которые мы рассмотрели:

Метод/Концепция	Описание	Пример
Заявление типа	Определение нового типа с использованием литеральных значений	type DayOfWeek = "Monday" \| "Tuesday" \| ...
Присвоение переменной	Присвоение литерального типа переменной	let today: DayOfWeek = "Monday";
Параметры функции	Использование литеральных типов в параметрах функции	function sendRequest(method: HttpMethod) {...}
Комбинированные литералы	Смешение разных типов литералов	type Status = "Active" \| "Inactive" \| 0 \| 1;
Свойства интерфейса	Использование литеральных типов в свойствах интерфейса	interface Config { theme: "light" \| "dark" }

И вот и все, мой ученик программирования! Вы только что повысили уровень в своем пути к TypeScript, mastered литеральные типы. Помните, как выбирать идеальную начинку для пиццы, литеральные типы помогают вам быть конкретными и избегать ошибок. Продолжайте практиковаться, и скоро вы будете создавать безопасный код, как идеально приготовленная пицца! ??

Credits: Image by storyset