TypeScript - Optional Parameters: A Beginner's Guide

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

TypeScript - Optional Parameters

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

Прежде чем мы углубимся, представьте, что вы готовите вечеринку. Вы знаете, что вам понадобятся тарелки и杯子, но не уверены, нужны ли вам салфетки. Это как-то похоже на опциональные параметры в TypeScript - это " может быть" элементы в вашем списке покупок для функции!

В TypeScript опциональные параметры позволяют нам создавать функции, где некоторые аргументы не обязательны. Это придает нашим функциям больше гибкости, как и наличие опциональных салфеток на вашей вечеринке, дает вам больше вариантов.

Синтаксис

Теперь давайте посмотрим, как мы пишем опциональные параметры в TypeScript. Это так же просто, как добавить вопросительный знак (?) после имени параметра. Вот базовый синтаксис:

function functionName(requiredParam: type, optionalParam?: type) {
// Тело функции
}

Смотрите на这个小 ? после optionalParam? Это наш魔术ический жезл, которыйturns обычный параметр в опциональный!

Примеры

Давайте погрузимся в несколько примеров, чтобы увидеть опциональные параметры в действии. Мы начнем с простого и постепенно увеличим сложность.

Пример 1: Простое приветствие

function greet(name: string, greeting?: string) {
if (greeting) {
return `${greeting}, ${name}!`;
} else {
return `Hello, ${name}!`;
}
}

console.log(greet("Alice"));           // Вывод: Hello, Alice!
console.log(greet("Bob", "Good day")); // Вывод: Good day, Bob!

В этом примере name является обязательным параметром, а greeting - опциональным. Если мы не предоставляем приветствие, функция использует "Hello" по умолчанию. Это как если бы у вас был стандартный欢迎ный щит на вашей вечеринке, но вы позволяли гостям принести свои собственные custom щиты, если они хотят!

Пример 2: Калькулятор с опциональной операцией

Давайте создадим простую функцию калькулятора:

function calculate(a: number, b: number, operation?: string): number {
if (operation === "add") {
return a + b;
} else if (operation === "subtract") {
return a - b;
} else {
return a * b; // Умножение по умолчанию
}
}

console.log(calculate(5, 3));          // Вывод: 15 (5 * 3)
console.log(calculate(10, 5, "add"));  // Вывод: 15 (10 + 5)
console.log(calculate(10, 4, "subtract")); // Вывод: 6 (10 - 4)

Здесь operation является нашим опциональным параметром. Если он не предоставлен, функция использует умножение по умолчанию. Это как если бы у вас был швейцарский армейский нож - вы можете использовать разные инструменты в зависимости от того, что вам нужно!

Пример 3: Профиль пользователя с опциональными полями

Давайте создадим более сложный пример, связанный с профилем пользователя:

interface UserProfile {
name: string;
age: number;
email?: string;
phoneNumber?: string;
}

function createUserProfile(name: string, age: number, email?: string, phoneNumber?: string): UserProfile {
const profile: UserProfile = {
name: name,
age: age
};

if (email) {
profile.email = email;
}

if (phoneNumber) {
profile.phoneNumber = phoneNumber;
}

return profile;
}

const user1 = createUserProfile("Alice", 30);
console.log(user1);
// Вывод: { name: "Alice", age: 30 }

const user2 = createUserProfile("Bob", 25, "[email protected]");
console.log(user2);
// Вывод: { name: "Bob", age: 25, email: "[email protected]" }

const user3 = createUserProfile("Charlie", 35, "[email protected]", "123-456-7890");
console.log(user3);
// Вывод: { name: "Charlie", age: 35, email: "[email protected]", phoneNumber: "123-456-7890" }

В этом примере мы создаем профили пользователей. name и age являются обязательными, а email и phoneNumber - опциональными. Это как если бы вы заполняли форму, где некоторые поля помечены звездочкой (обязательные) и другие нет!

Лучшие практики и советы

Порядок имеет значение: Всегда ставьте опциональные параметры после обязательных. Это как если бы вы ставили "может быть" элементы в конце вашего списка покупок.
Значения по умолчанию: Вы можете combine опциональные параметры со значениями по умолчанию:

function greet(name: string, greeting: string = "Hello") {
return `${greeting}, ${name}!`;
}

Не перегружайте: Хотя опциональные параметры полезны, слишком много из них могут сделать вашу функцию запутанной. Используйте их с умом!
Документация: Всегда документируйте, что happens когда опциональные параметры опущены. Это как оставлять ясные инструкции для ваших вечериночных гостей.

Заключение

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

Пока вы продолжаете свое coding путешествие, вы найдете множество ситуаций, где опциональные параметры могут быть полезны. Они - мощный инструмент в вашем наборе TypeScript, позволяющий вам писать более гибкий и повторно используемый код.

Продолжайте практиковаться, оставайтесь любопытными и счастливого кодирования! ??

Метод	Описание
`greet(name: string, greeting?: string)`	Функция, которая приветствует человека, с опциональным пользовательским приветствием.
`calculate(a: number, b: number, operation?: string)`	Функция калькулятора с опциональным параметром операции.
`createUserProfile(name: string, age: number, email?: string, phoneNumber?: string)`	Функция для создания профиля пользователя с опциональной электронной почтой и номером телефона.

Credits: Image by storyset

Предыдущий учебник:

TypeScript - Типы функций

Следующий учебник:

TypeScript -.dfault Parameters