Учебники

TypeScript — Функции

Июль 29, 2018

Функции являются строительными блоками читаемого, обслуживаемого и многократно используемого кода. Функция — это набор операторов для выполнения конкретной задачи. Функции организуют программу в логические блоки кода. После определения функции могут вызываться для доступа к коду. Это делает код многоразовым. Кроме того, функции позволяют легко читать и поддерживать код программы.

Объявление функции сообщает компилятору об имени функции, типе возврата и параметрах. Определение функции обеспечивает фактическое тело функции.

Sr.No Функции и описание
1. Определение функции

Определение функции определяет, что и как будет выполнена конкретная задача.

2. Вызов функции

Функция должна быть вызвана для ее выполнения.

3. Возврат Функции

Функции могут также возвращать значение вместе с контролем обратно к вызывающей стороне.

4. Параметризованная функция

Параметры — это механизм для передачи значений в функции.

Определение функции определяет, что и как будет выполнена конкретная задача.

Функция должна быть вызвана для ее выполнения.

Функции могут также возвращать значение вместе с контролем обратно к вызывающей стороне.

Параметры — это механизм для передачи значений в функции.

Необязательные параметры

Необязательные параметры могут использоваться, когда аргументы не нужно принудительно передавать для выполнения функции. Параметр можно пометить как необязательный, добавив к его имени вопросительный знак. Необязательный параметр должен быть установлен как последний аргумент в функции. Синтаксис объявления функции с необязательным параметром приведен ниже: 

function function_name (param1[:type], param2[:type], param3[:type])

Пример: необязательные параметры 

function disp_details(id:number,name:string,mail_id?:string) { 
   console.log("ID:", id); 
   console.log("Name",name); 
   
   if(mail_id!=undefined)  
   console.log("Email Id",mail_id); 
}
disp_details(123,"John");
disp_details(111,"mary","[email protected]");

  • В приведенном выше примере объявляется параметризованная функция. Здесь третий параметр, т.е. mail_id, является необязательным параметром.

  • Если во время вызова функции необязательному параметру не было передано значение, значение параметра устанавливается в значение undefined.

  • Функция печатает значение mail_id, только если аргументу передано значение.

В приведенном выше примере объявляется параметризованная функция. Здесь третий параметр, т.е. mail_id, является необязательным параметром.

Если во время вызова функции необязательному параметру не было передано значение, значение параметра устанавливается в значение undefined.

Функция печатает значение mail_id, только если аргументу передано значение.

При компиляции он сгенерирует следующий код JavaScript — 

//Generated by typescript 1.8.10
function disp_details(id, name, mail_id) {
   console.log("ID:", id);
   console.log("Name", name);
	
   if (mail_id != undefined)
      console.log("Email Id", mail_id);
}
disp_details(123, "John");
disp_details(111, "mary", "[email protected]");

Приведенный выше код выдаст следующий вывод: 

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id [email protected]

Остальные параметры

Остальные параметры аналогичны переменным аргументам в Java. Параметры rest не ограничивают количество значений, которые вы можете передать функции. Однако переданные значения должны быть одного типа. Другими словами, параметры rest действуют как заполнители для нескольких аргументов одного типа.

Чтобы объявить параметр отдыха, к имени параметра добавляется три периода. Любой нерестный параметр должен стоять перед остальным параметром.

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

function addNumbers(...nums:number[]) {  
   var i;   
   var sum:number = 0; 
   
   for(i = 0;i<nums.length;i++) { 
      sum = sum + nums[i]; 
   } 
   console.log("sum of the numbers",sum) 
} 
addNumbers(1,2,3) 
addNumbers(10,10,10,10,10)

  • Объявление функции addNumbers (), принимает остальные параметры nums . Тип данных остальных параметров должен быть установлен в массив. Кроме того, функция может иметь не более одного параметра покоя.

  • Функция вызывается дважды, передавая три и шесть значений соответственно.

  • Цикл for перебирает список аргументов, передается функции и вычисляет их сумму.

Объявление функции addNumbers (), принимает остальные параметры nums . Тип данных остальных параметров должен быть установлен в массив. Кроме того, функция может иметь не более одного параметра покоя.

Функция вызывается дважды, передавая три и шесть значений соответственно.

Цикл for перебирает список аргументов, передается функции и вычисляет их сумму.

При компиляции он сгенерирует следующий код JavaScript — 

function addNumbers() {
   var nums = [];
   for (var _i = 0; _i < arguments.length; _i++) {
      nums[_i - 0] = arguments[_i];
   }
	var i;
   var sum = 0;
	
   for (i = 0; i < nums.length; i++) {
      sum = sum + nums[i];
   }
   console.log("sum of the numbers", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

Вывод вышеуказанного кода выглядит следующим образом: 

sum of numbers 6 
sum of numbers 50

Параметры по умолчанию

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

Синтаксис 

function function_name(param1[:type],param2[:type] = default_value) { 
}

Примечание . Параметр не может быть объявлен необязательным и заданным по умолчанию одновременно.

Пример: параметры по умолчанию 

function calculate_discount(price:number,rate:number = 0.50) { 
   var discount = price * rate; 
   console.log("Discount Amount: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

При компиляции он сгенерирует следующий код JavaScript — 

//Generated by typescript 1.8.10
function calculate_discount(price, rate) {
   if (rate === void 0) { rate = 0.50; }
   var discount = price * rate;
   console.log("Discount Amount: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

Его вывод выглядит следующим образом — 

Discount amount : 500 
Discount amount : 300

  • В этом примере объявляется функция calc_discount . Функция имеет два параметра — цена и курс.

  • Значение параметра rate по умолчанию установлено на 0.50 .

  • Программа вызывает функцию, передавая ей только значение параметра price. Здесь значение ставки составляет 0,50 (по умолчанию)

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

В этом примере объявляется функция calc_discount . Функция имеет два параметра — цена и курс.

Значение параметра rate по умолчанию установлено на 0.50 .

Программа вызывает функцию, передавая ей только значение параметра price. Здесь значение ставки составляет 0,50 (по умолчанию)

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

Анонимная функция

Функции, которые не связаны с идентификатором (именем функции), называются анонимными функциями . Эти функции динамически объявляются во время выполнения. Анонимные функции могут принимать входные и выходные данные, как это делают стандартные функции. Анонимная функция обычно недоступна после первоначального создания.

Переменным может быть назначена анонимная функция. Такое выражение называется функциональным выражением.

Синтаксис 

var res = function( [arguments] ) { ... }

Пример ─ Простая анонимная функция 

var msg = function() { 
   return "hello world";  
} 
console.log(msg())

При компиляции он сгенерирует тот же код в JavaScript.

Это даст следующий результат — 

hello world

Пример ─ Анонимная функция с параметрами 

var res = function(a:number,b:number) { 
   return a*b;  
}; 
console.log(res(12,2))

Анонимная функция возвращает произведение значений, переданных ей.

При компиляции он сгенерирует следующий код JavaScript — 

//Generated by typescript 1.8.10
var res = function (a, b) {
   return a * b;
};
console.log(res(12, 2));

Вывод вышеуказанного кода выглядит следующим образом: 

24

Выражение функции и объявление функции ─ Являются ли они синонимами?

Выражение функции и объявление функции не являются синонимами. В отличие от выражения функции, объявление функции связано с именем функции.

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

Когда синтаксический анализатор JavaScript видит функцию в основном потоке кода, он принимает объявление функции. Когда функция входит в состав оператора, это выражение функции.

Конструктор функций

TypeScript также поддерживает определение функции с помощью встроенного конструктора JavaScript под названием Function ().

Синтаксис 

var res = new Function( [arguments] ) { ... }.

пример 

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

Новая функция () — это вызов конструктора, который, в свою очередь, создает и возвращает ссылку на функцию.

При компиляции он сгенерирует тот же код в JavaScript.

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

12

Функции рекурсии и TypeScript

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

Пример — рекурсия 

function factorial(number) {
   if (number <= 0) {         // termination case
      return 1; 
   } else {     
      return (number * factorial(number - 1));     // function invokes itself
   } 
}; 
console.log(factorial(6));      // outputs 720

При компиляции он сгенерирует тот же код в JavaScript.

Вот его вывод — 

720

Пример: анонимная рекурсивная функция 

(function () { 
   var x = "Hello!!";   
   console.log(x)     
})()      // the function invokes itself using a pair of parentheses ()

При компиляции он сгенерирует тот же код в JavaScript.

Его вывод выглядит следующим образом — 

Hello!!

Лямбда-функции

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

Лямбда-функция — анатомия

Есть 3 части лямбда-функции —

  • Параметры — функция может иметь параметры

  • Обозначение жирной стрелки / лямбда-нотация (=>) — также называется оператором перехода

  • Заявления — представляют набор инструкций функции

Параметры — функция может иметь параметры

Обозначение жирной стрелки / лямбда-нотация (=>) — также называется оператором перехода

Заявления — представляют набор инструкций функции

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

Лямбда-выражение

Это выражение анонимной функции, которое указывает на одну строку кода. Его синтаксис выглядит следующим образом — 

( [param1, parma2,…param n] )=>statement;

Пример: лямбда-выражение 

var foo = (x:number)=>10 + x 
console.log(foo(100))      //outputs 110

Программа объявляет функцию лямбда-выражения. Функция возвращает сумму 10 и переданный аргумент.

При компиляции он сгенерирует следующий код JavaScript. 

//Generated by typescript 1.8.10
var foo = function (x) { return 10 + x; };
console.log(foo(100));      //outputs 110

Вот вывод приведенного выше кода — 

110

Лямбда-оператор

Лямбда-оператор — это объявление анонимной функции, которое указывает на блок кода. Этот синтаксис используется, когда тело функции занимает несколько строк. Его синтаксис выглядит следующим образом — 

( [param1, parma2,…param n] )=> {
 
   //code block
}

Пример: лямбда-оператор 

var foo = (x:number)=> {    
   x = 10 + x 
   console.log(x)  
} 
foo(100)

Ссылка на функцию возвращается и сохраняется в переменной foo .

При компиляции он сгенерирует следующий код JavaScript — 

//Generated by typescript 1.8.10
var foo = function (x) {
   x = 10 + x;
   console.log(x);
};
foo(100);

Вывод вышеуказанной программы следующий: 

110

Синтаксические вариации

Тип параметра Вывод

Не обязательно указывать тип данных параметра. В таком случае тип данных параметра любой. Давайте посмотрим на следующий фрагмент кода — 

var func = (x)=> { 
   if(typeof x=="number") { 
      console.log(x+" is numeric") 
   } else if(typeof x=="string") { 
      console.log(x+" is a string") 
   }  
} 
func(12) 
func("Tom")

При компиляции он сгенерирует следующий код JavaScript — 

//Generated by typescript 1.8.10
var func = function (x) {
   if (typeof x == "number") {
      console.log(x + " is numeric");
   } else if (typeof x == "string") {
      console.log(x + " is a string");
   }
};
func(12);
func("Tom");

Его вывод выглядит следующим образом — 

12 is numeric 
Tom is a string

Необязательные скобки для одного параметра 

var display = x=> { 
   console.log("The function got "+x) 
} 
display(12)

При компиляции он сгенерирует следующий код JavaScript — 

//Generated by typescript 1.8.10
var display = function (x) {
   console.log("The function got " + x);
};
display(12);

Его вывод выглядит следующим образом — 

The function got 12

Необязательные скобки для одного оператора, пустые скобки для параметра

В следующем примере показаны эти два синтаксических варианта. 

var disp =()=> { 
   console.log("Function invoked"); 
} 
disp();

При компиляции он сгенерирует следующий код JavaScript — 

//Generated by typescript 1.8.10
var disp = function () {
   console.log("Function invoked");
};
disp();

Его вывод выглядит следующим образом — 

Function invoked

Перегрузки функций

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

Чтобы перегрузить функцию в TypeScript, вам нужно выполнить следующие шаги:

Шаг 1 — Объявите несколько функций с одинаковыми именами, но разными сигнатурами функций. Функция подписи включает в себя следующее.

  • Тип данных параметра

Тип данных параметра 

function disp(string):void; 
function disp(number):void;

  • Количество параметров

Количество параметров 

function disp(n1:number):void; 
function disp(x:number,y:number):void;

  • Последовательность параметров

Последовательность параметров 

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

Примечание . Сигнатура функции не включает тип возвращаемого значения функции.

Шаг 2 — После объявления должно следовать определение функции. Типы параметров должны быть установлены на любые, если типы параметров отличаются во время перегрузки. Кроме того, для случая b, описанного выше, вы можете рассмотреть возможность пометить один или несколько параметров как необязательные при определении функции.

Шаг 3 — Наконец, вы должны вызвать функцию, чтобы сделать ее функциональной.

пример

Давайте теперь посмотрим на следующий пример кода — 

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 

function disp(x:any,y?:any):void { 
   console.log(x); 
   console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

  • Первые две строки изображают объявление перегрузки функции. Функция имеет две перегрузки —

    • Функция, которая принимает один строковый параметр.

    • Функция, которая принимает два значения типа number и string соответственно.

  • Третья строка определяет функцию. Тип данных параметров установлен на любой . Более того, второй параметр здесь необязательный.

  • Перегруженная функция вызывается двумя последними операторами.

Первые две строки изображают объявление перегрузки функции. Функция имеет две перегрузки —

Функция, которая принимает один строковый параметр.

Функция, которая принимает два значения типа number и string соответственно.

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

Перегруженная функция вызывается двумя последними операторами.

При компиляции он сгенерирует следующий код JavaScript — 

//Generated by typescript 1.8.10
function disp(x, y) {
   console.log(x);
   console.log(y);
}
disp("abc");
disp(1, "xyz");

Приведенный выше код выдаст следующий вывод:

65
Share: