betacode

Функции в TypeScript

  1. Что такое функция?
  2. Регулярная функция
  3. Closure (закрытая сумка)
  4. Опциональный параметр
  5. Параметры с типом данных объединения
  6. Function Overloading

1. Что такое функция?

В языке программирования TypeScript функция (function) представляет собой именованный блок кода (block of code). Он может принимать параметры и возвращать значение или ничего, и запускается только при вызове. Функции разделяют большую задачу на мелкие части и выполняют определенные операции этой программы. Этот процесс повышает возможность повторного использования кода и расширяет модульный подход программы.
Синтаксис для объявления обычной функции:
function function_name(arg1: type1, arg2: type2, argN: typeN) : return_type {
   // Statements
}
Примечание: Как и в JavaScript, TypeScript не допускает двух функций с одинаковым именем, даже если они имеют разные параметры.

2. Регулярная функция

Синтаксис для объявления обычной функции:
function function_name(arg1: type1, arg2: type2, argN: typeN) : return_type {
   // Statements
}
Используйте ключевое слово void (или пустой) в качестве типа возвращаемого значения, если функция ничего не возвращает.
function function_name(arg1: type1, arg2: type2, argN: typeN) : void {
   // Statements
}
// Same as:
function function_name(arg1: type1, arg2: type2, argN: typeN) {
   // Statements
}
Например: Функция minus с двумя параметрами типа number и возвращает значение типа числа number.
function_ex1.ts
function minus(a: number, b: number) : number {
    return a + b;
}  
var result = minus(10, 20); // -10
console.log(`result = ${result}`);
Output:
result = -10
Например: Функция greeting принимает параметр типа string и ничего не возвращает.
function_ex2.ts
function greeting(name: string) {
    var s = `Hello $name`;
    console.log(s);
}
// Call the function:
greeting('Tom'); // Hello Tom

3. Closure (закрытая сумка)

В языке программирования TypeScript,Closure (закрытая сумка) - это специальная функция.
  • Подобно функции, Closure представляет собой блок операторов с параметрами и может возвращать значение или ничего.
  • В отличие от функции, Closure не имеет имени. Однако вы можете идентифицировать его с помощью переменной.
Смотрите подробную статью о Closure:

4. Опциональный параметр

Как упоминалось выше, TypeScript не допускает функций с одинаковым именем, но функция может включать опциональные параметры, которые должны быть последними параметрами в списке параметров.
Синтаксис:
Syntax
function function_name(argM: typeM, argN: typeN, argP?:typeP, argQ?: typeQ): return_type {  
     // Statement(s)  
}
Или синтаксис - опциональные параметр со значением по умолчанию:
function function_name(argM: typeM, argN: typeN,
                  argP?:typeP = defaultValueP, argQ?: typeQ = defaultValueQ): return_type {  
     // Statement(s)  
}
Например:
function_optional_args_ex1.ts
function concat(s1: string, s2: string, s3?: string): string {
    if (s3) {
        return s1 + s2 + s3;
    }
    return s1 + s2;
}
function sum(v1: number, v2: number, v3?: number, v4?: number): number {
    return v1 + v2 + (v3 ?? 0) + (v4 ?? 0);
}
function function_optional_args_ex1_test() {
    var result1 = concat('One', 'Two');
    console.log(`result1: ${result1}`);
    var result2 = concat('One', 'Two', 'Three');
    console.log(`result2: ${result2}`);

    var value1 = sum(1, 2, 3, 4);
    console.log(`value1: ${value1}`);
    var value2 = sum(1, 2, 3);
    console.log(`value2: ${value2}`);
    var value3 = sum(1, 2);
    console.log(`value3: ${value3}`);
}
function_optional_args_ex1_test(); // Call the function.
Output:
result1: OneTwo
result2: OneTwoThree
value1: 10
value2: 6
value3: 3

5. Параметры с типом данных объединения

Параметры в функции также могут быть объявлены с типом данных объединения (union data type).
Синтаксис:
function function_name (
             arg1 : data_type1, arg2 : data_type2,
             arg3 : data_type31 | data_type32 | data_type3N, // Union Data Type
             arg4 : data_type4) : return_type {
    //  Statament(s)
}
Например:
function_union_type_args_ex1.ts
interface IStudent {
    studentId: number,
    studentName: string
}
interface IWorker {
    workerId: number,
    workerName: string
}
function getName(person: IStudent | IWorker): string { // Union Type Arg
    var p = person as IStudent;
    if (p.studentName) {
        return p.studentName;
    }
    return (person as IWorker).workerName;
}
function function_union_type_args_ex1_test() {
    var student = { studentId: 1, studentName: "Tom" };
    var worker = { workerId: 2, workerName: "Jerry" };

    var name1 = getName(student);
    var name2 = getName(worker);
    console.log(`name1: ${name1}`);
    console.log(`name2: ${name2}`);
}
function_union_type_args_ex1_test(); // Call the function.
Output:
name1: Tom
name2: Jerry

6. Function Overloading

Как упоминалось выше, TypeScript не допускает функций с одинаковым именем, даже если они имеют разные параметры. Function Overloading (Перегрузка функций) - это метод "обхода ограничений", который означает, что у вас все еще есть только одна функция с определенным именем, но вы можете использовать ее с разными параметрами.
Основная идея перегрузки функций (overload) заключается в создании универсальной функции, которая проверяет, какой тип параметра был передан при вызове функции, а затем выполняет некоторую логику для соответствующего случая. Полезно добавить определения для функции, чтобы помочь другим программистам узнать, как ее правильно использовать.
Синтаксис:
// Definition 1
function function_name(arg_11 : type_11, arg_1N : type_1N): return_type;
// Definition 2
function function_name(arg_21 : type_21, arg_22 : type_22, arg_2M : type_2M) : return_type;
function function_name(... args : any[]) : return_type {
   // Function body.
}
В принципе, существует множество способов определения перегруженной функции. Рекомендуется использовать приведенный выше синтаксис, который поможет вам избежать приведенной ниже ошибки компилятора:
This overload signature is not compatible with its implementation signature.
Синтаксис:
function_overload_ex1.ts
interface IDimension3D {
    width: number,
    height: number,
    depth: number
}
function getVolume(dimension: IDimension3D): number; // Definition 1
function getVolume(width: number): number; // Definition 2
function getVolume(width: number, height: number, depth: number): number; // Definition 3
function getVolume(...args: any[]): number {
    if (args.length == 1) {
        if (typeof args[0] == 'number') { // Use Definition 1
            return args[0] * args[0] * args[0];
        } else {  // Use Definition 2
            var dim = args[0] as IDimension3D;
            return dim.width * dim.height * dim.depth;
        }
    } else if (args.length == 3) { // Use definition 3
        return args[0] * args[1] * args[2];
    } else {
        throw Error('Argument invalid!');
    }
}
function function_overload_ex1_test() {
    var volume1 = getVolume(10); // 1000
    var volume2 = getVolume({ width: 10, height: 20, depth: 30 }); // 6000
    var volume3 = getVolume(5, 10, 15); // 750

    console.log(`volume1 = ${volume1}`);
    console.log(`volume2 = ${volume2}`);
    console.log(`volume3 = ${volume3}`);
}
function_overload_ex1_test(); // Call the function.
Output:
volume1 = 1000
volume2 = 6000
volume3 = 750

Новейшие статьи

Show More