JavaRush /Курсы /Модуль 2: Fullstack /Опциональные и обязательные параметры

Опциональные и обязательные параметры

Модуль 2: Fullstack
4 уровень , 4 лекция
Открыта

5.1 Обязательные параметры

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

Синтаксис

Обязательные параметры указываются в списке параметров функции без дополнительных символов.

    
      function name(param: type)
    
  

Пример:

JavaScript
    
      "use strict";
      function add(a, b) {
        return a + b;
      }
      console.log(add(5, 3)); // Вывод: 8
      console.log(add(5)); // Ошибка компиляции: Expected 2 arguments, but got 1.
    
  
TypeScript
    
      function add(a: number, b: number): number {
        return a + b;
      }

      console.log(add(5, 3)); // Вывод: 8
      console.log(add(5)); // Ошибка компиляции: Expected 2 arguments, but got 1.
    
  

В этом примере функция add принимает два обязательных параметра a и b типа number. Попытка вызвать функцию с одним параметром приводит к ошибке компиляции.

Почему крайний console.log() в результатах вывел NaN? В JavaScript (а результаты работы примеров транслируются из JS) не происходит ошибки компиляции из-за отсутствия аргументов при вызове функции. Если в функцию передать меньше аргументов, чем ожидается, отсутствующие аргументы получают значение undefined. В нашем примере, при вызове add(5) значение b будет undefined. Когда мы попытаемся сложить число с undefined, получим NaN, так как 5 + undefined не является валидной математической операцией.

5.2 Опциональные параметры

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

Синтаксис

    
      function name(param?: type)
    
  

Пример:

JavaScript
    
      "use strict";
      function greet(name, greeting) {
          if (greeting) {
              console.log(`${greeting}, ${name}!`);
          }
          else {
              console.log(`Hello, ${name}!`);
          }
      }
      greet('Alice'); // Вывод: Hello, Alice!
      greet('Bob', 'Hi'); // Вывод: Hi, Bob!
    
  
TypeScript
    
      function greet(name: string, greeting?: string): void {
        if (greeting) {
          console.log(`${greeting}, ${name}!`);
        } else {
          console.log(`Hello, ${name}!`);
        }
      }

      greet('Alice'); // Вывод: Hello, Alice!
      greet('Bob', 'Hi'); // Вывод: Hi, Bob!
    
  

В этом примере параметр greeting опциональный. Если значение для этого параметра не указано при вызове функции, используется значение по умолчанию (Hello).

Порядок опциональных параметров

Опциональные параметры всегда должны следовать за обязательными параметрами. Это необходимо для правильной интерпретации аргументов при вызове функции.

Пример с некорректным порядком параметров:

JavaScript
    
      "use strict";
      function greet(greeting, name) {
        // Ошибка компиляции: A required parameter cannot follow an optional parameter.
      }
    
  
TypeScript
    
      function greet(greeting?: string, name: string): void {
        // Ошибка компиляции: A required parameter cannot follow an optional parameter.
      }
    
  

5.3 Параметры со значениями по умолчанию

TypeScript также поддерживает параметры со значениями по умолчанию. Значение по умолчанию задается через знак "=" и используется, если аргумент не передался при вызове функции.

Синтаксис

Для указания значения по умолчанию добавьте знак "=" и значение после имени параметра:

    
      function name(param: type = value)
    
  

Пример:

JavaScript
    
      "use strict";
      function greet(name, greeting = 'Hello') {
        console.log(`${greeting}, ${name}!`);
      }
      greet('Alice'); // Вывод: Hello, Alice!
      greet('Bob', 'Hi'); // Вывод: Hi, Bob!
    
  
TypeScript
    
      function greet(name: string, greeting: string = 'Hello'): void {
        console.log(`${greeting}, ${name}!`);
      }

      greet('Alice'); // Вывод: Hello, Alice!
      greet('Bob', 'Hi'); // Вывод: Hi, Bob!
    
  

В этом примере параметр greeting имеет значение по умолчанию Hello. Если значение для этого параметра не указано при вызове функции, используется значение по умолчанию.

5.4 Совмещение разных параметров

Вы можете совмещать опциональные параметры и параметры со значениями по умолчанию в одной функции.

Пример:

JavaScript
    
      "use strict";
      function greet(name, greeting, punctuation = '!') {
          if (greeting) {
              console.log(`${greeting}, ${name}${punctuation}`);
          }
          else {
              console.log(`Hello, ${name}${punctuation}`);
          }
      }
      greet('Alice'); // Вывод: Hello, Alice!
      greet('Bob', 'Hi'); // Вывод: Hi, Bob!
      greet('Charlie', 'Good morning', '.'); // Вывод: Good morning, Charlie.
    
  
TypeScript
    
      function greet(name: string, greeting?: string, punctuation: string = '!'): void {
        if (greeting) {
          console.log(`${greeting}, ${name}${punctuation}`);
        } else {
          console.log(`Hello, ${name}${punctuation}`);
        }
      }

      greet('Alice'); // Вывод: Hello, Alice!
      greet('Bob', 'Hi'); // Вывод: Hi, Bob!
      greet('Charlie', 'Good morning', '.'); // Вывод: Good morning, Charlie.
    
  

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

5.5 Примеры

Рассмотрим примеры использования опциональных и обязательных параметров.

Пример 1: Функция для вычисления суммы чисел

Создадим функцию для вычисления суммы чисел, которая может принимать любое количество аргументов:

JavaScript
    
      "use strict";
      function sum(a, b, ...rest) {
        let total = a + b;
        for (let num of rest) {
          total += num;
        }
        return total;
      }
      console.log(sum(1, 2)); // Вывод: 3
      console.log(sum(1, 2, 3, 4)); // Вывод: 10
    
  
TypeScript
    
      function sum(a: number, b: number, ...rest: number[]): number {
        let total = a + b;
        for (let num of rest) {
          total += num;
        }
        return total;
      }

      console.log(sum(1, 2)); // Вывод: 3
      console.log(sum(1, 2, 3, 4)); // Вывод: 10
    
  

В этом примере a и b являются обязательными параметрами, а rest — остаточным параметром, который может включать любое количество чисел.

Пример 2: Функция для форматирования строки

Создадим функцию для форматирования строки, которая принимает обязательный шаблон строки и опциональные значения для замены:

JavaScript
    
      "use strict";
      function format(template, ...values) {
        return template.replace(/{(\d+)}/g, (match, index) => {
          return typeof values[index] !== 'undefined' ? values[index].toString() : match;
        });
      }
      console.log(format('Hello, {0}!', 'Alice')); // Вывод: Hello, Alice!
      console.log(format('The number is {0}.', 42)); // Вывод: The number is 42.
      console.log(format('Hello, {0}! Today is {1}.', 'Bob', 'Monday')); // Вывод: Hello, Bob! Today is Monday.
    
  
TypeScript
    
      function format(template: string, ...values: (string | number)[]): string {
        return template.replace(/{(\d+)}/g, (match, index) => {
          return typeof values[index] !== 'undefined' ? values[index].toString() : match;
        });
      }

      console.log(format('Hello, {0}!', 'Alice')); // Вывод: Hello, Alice!
      console.log(format('The number is {0}.', 42)); // Вывод: The number is 42.
      console.log(format('Hello, {0}! Today is {1}.', 'Bob', 'Monday')); // Вывод: Hello, Bob! Today is Monday.
    
  

В этом примере template является обязательным параметром, а values — остаточным параметром, который может включать строки или числа для замены в шаблоне.

Пример с интерфейсом и опциональными параметрами:

JavaScript
    
      "use strict";
      function printUser(user) {
        if (user.age) {
          console.log(`Name: ${user.name}, Age: ${user.age}`);
        }
        else {
          console.log(`Name: ${user.name}`);
        }
      }
      let user1 = { name: 'Alice' };
      let user2 = { name: 'Bob', age: 30 };
      printUser(user1); // Вывод: Name: Alice
      printUser(user2); // Вывод: Name: Bob, Age: 30
    
  
TypeScript
    
      interface User {
        name: string;
        age?: number; // Опциональное свойство
      }

      function printUser(user: User): void {
        if (user.age) {
          console.log(`Name: ${user.name}, Age: ${user.age}`);
        } else {
          console.log(`Name: ${user.name}`);
        }
      }

      let user1: User = { name: 'Alice' };
      let user2: User = { name: 'Bob', age: 30 };

      printUser(user1); // Вывод: Name: Alice
      printUser(user2); // Вывод: Name: Bob, Age: 30
    
  

В этом примере интерфейс User имеет опциональное свойство age. Функция printUser принимает объект User и выводит информацию о пользователе, включая возраст, если он указан.

3
Задача
Модуль 2: Fullstack, 4 уровень, 4 лекция
Недоступна
Опциональные параметры
Опциональные параметры
3
Задача
Модуль 2: Fullstack, 4 уровень, 4 лекция
Недоступна
Параметры по умолчанию
Параметры по умолчанию
3
Задача
Модуль 2: Fullstack, 4 уровень, 4 лекция
Недоступна
Опциональные параметры и значения по умолчанию
Опциональные параметры и значения по умолчанию
3
Опрос
Типизация в TypeScript, 4 уровень, 4 лекция
Недоступен
Типизация в TypeScript
Типизация в TypeScript
Комментарии (2)
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
Евгений Уровень 90
25 марта 2025
Как так то, думал может я чет не так понял, прошел по остальным вариантам ответа и всё мимо🤪
Сергей Уровень 29
30 марта 2025
Правильный ответ – "пропустить". :)