Чи можливі сильно набрані функції як параметри в TypeScript?


558

У TypeScript я можу оголосити параметр функції як функцію типу. Чи є такий "безпечний для типу" спосіб цього зробити, який я пропускаю? Наприклад, врахуйте це:

class Foo {
    save(callback: Function) : void {
        //Do the save
        var result : number = 42; //We get a number from the save operation
        //Can I at compile-time ensure the callback accepts a single parameter of type number somehow?
        callback(result);
    }
}

var foo = new Foo();
var callback = (result: string) : void => {
    alert(result);
}
foo.save(callback);

Зворотний зв'язок збереження не є безпечним, я надаю йому функцію зворотного виклику, де параметром функції є рядок, але я передаю їй номер і компілюється без помилок. Чи можу я зробити параметр результату для збереження безпечної для типу функції?

Версія TL; DR: чи є еквівалент делегата .NET у TypeScript?

Відповіді:


804

Звичайно. Тип функції складається з типів її аргументу та типу повернення. Тут ми вказуємо, що callbackтип параметра повинен бути "функцією, яка приймає число і повертає тип any":

class Foo {
    save(callback: (n: number) => any) : void {
        callback(42);
    }
}
var foo = new Foo();

var strCallback = (result: string) : void => {
    alert(result);
}
var numCallback = (result: number) : void => {
    alert(result.toString());
}

foo.save(strCallback); // not OK
foo.save(numCallback); // OK

Якщо ви хочете, ви можете визначити псевдонім типу, щоб інкапсулювати це:

type NumberCallback = (n: number) => any;

class Foo {
    // Equivalent
    save(callback: NumberCallback) : void {
        callback(42);
    }
}

6
(n: number) => anyозначає будь-яку функцію підпису?
nikk wong

16
@nikkwong це означає, що функція приймає один параметр (а number), але тип повернення зовсім не обмежений (може бути будь-яке значення чи навіть void)
Daniel Earwicker

16
Який сенс nу цьому синтаксисі? Чи не були б лише типи введення та виведення достатніми?
Юхуань Цзян

4
Одним з побічних ефектів між використанням вбудованих функцій проти названих функцій (відповідь нижче проти цієї відповіді) є зміна "цей" не визначена з названою функцією, тоді як вона визначена в межах вбудованої функції. Не є сюрпризом для кодерів JavaScript, але, безумовно, не очевидно для інших фонів кодування.
Стевко

3
@YuhuanJiang Це повідомлення може представляти інтерес для Вас
Ophidian

93

Ось еквіваленти TypeScript деяких поширених .NET-делегатів:

interface Action<T>
{
    (item: T): void;
}

interface Func<T,TResult>
{
    (item: T): TResult;
}

2
Можливо, це було б корисно поглянути, але фактично використовувати такі типи було б анти-зразком. У будь-якому випадку вони більше нагадують типи Java SAM, ніж делегати C #. Звичайно, це не так, і вони еквівалентні формі псевдоніма типу, яка є просто більш елегантною для функцій
Aluan Haddad

5
@AluanHaddad Ви могли б детальніше пояснити, чому ви вважаєте це антидіаграмою?
Макс Р Маккарті

8
Причина полягає в тому, що TypeScript має стислий синтаксис типу буквального типу функції, що унеможливлює потребу в таких інтерфейсах. У C # делегати є номінальними, але Actionі Funcделегати обидва позбавляють більшості потреб у конкретних типах делегатів і, що цікаво, надають C # схожість структурного набору тексту. Мінусом цих делегатів є те, що їхні імена не мають жодного значення, але інші переваги, як правило, переважують це. У TypeScript нам просто не потрібні ці типи. Отже, анти-візерунок був би function map<T, U>(xs: T[], f: Func<T, U>). Віддаю перевагуfunction map<T, U>(xs: T[], f: (x: T) => U)
Алуан Хаддад

6
Це питання смаку, оскільки це еквівалентні форми на мові, яка не має типів часу виконання. Сьогодні ви можете також використовувати псевдоніми типу замість інтерфейсів.
Дрю Ноакс

18

Я усвідомлюю, що ця публікація стара, але є більш компактний підхід, який дещо відрізняється від того, що просили, але може бути дуже корисною альтернативою. Ви можете істотно оголосити функцію в лінії при виклику методу ( Foo«и save()в даному випадку). Це виглядатиме приблизно так:

class Foo {
    save(callback: (n: number) => any) : void {
        callback(42)
    }

    multipleCallbacks(firstCallback: (s: string) => void, secondCallback: (b: boolean) => boolean): void {
        firstCallback("hello world")

        let result: boolean = secondCallback(true)
        console.log("Resulting boolean: " + result)
    }
}

var foo = new Foo()

// Single callback example.
// Just like with @RyanCavanaugh's approach, ensure the parameter(s) and return
// types match the declared types above in the `save()` method definition.
foo.save((newNumber: number) => {
    console.log("Some number: " + newNumber)

    // This is optional, since "any" is the declared return type.
    return newNumber
})

// Multiple callbacks example.
// Each call is on a separate line for clarity.
// Note that `firstCallback()` has a void return type, while the second is boolean.
foo.multipleCallbacks(
    (s: string) => {
         console.log("Some string: " + s)
    },
    (b: boolean) => {
        console.log("Some boolean: " + b)
        let result = b && false

        return result
    }
)

Цей multipleCallback()підхід є дуже корисним для таких речей, як мережеві дзвінки, які можуть бути успішними або невдалими. Знову припустивши приклад мережевого дзвінка, коли multipleCallbacks()його викликають, поведінку як успіху, так і невдачі можна визначити в одному місці, що надає більшої чіткості для майбутніх читачів коду.

Взагалі, на мій досвід, такий підхід може бути більш стислим, менш безладним і більшою чіткістю.

Успіхів усім!


16
type FunctionName = (n: inputType) => any;

class ClassName {
    save(callback: FunctionName) : void {
        callback(data);
    }
}

Це, безумовно, відповідає парадигмі функціонального програмування.


6
Ви повинні називати це, inputTypeа не returnType, чи не так? Де inputTypeтип, dataякий ви передаєте параметр callbackфункції.
ChrisW

Так @ChrisW ви праві, inputType має більше сенсу. Дякую!
Крішна Ганерівал

2

У TS ми можемо вводити функції за такими способами:

Типи функцій / підписи

Він використовується для реальної реалізації функцій / методів, він має такий синтаксис:

(arg1: Arg1type, arg2: Arg2type) : ReturnType

Приклад:

function add(x: number, y: number): number {
    return x + y;
}

class Date {
  setTime(time: number): number {
   // ...
  }

}

Функціональний тип Літерали

Літерали типу функцій - це ще один спосіб оголошення типу функції. Зазвичай вони застосовуються у підписі функції функції вищого порядку. Функція вищого порядку - це функція, яка приймає функції як параметри або повертає функцію. Він має такий синтаксис:

(arg1: Arg1type, arg2: Arg2type) => ReturnType

Приклад:

type FunctionType1 = (x: string, y: number) => number;

class Foo {
    save(callback: (str: string) => void) {
       // ...
    }

    doStuff(callback: FunctionType1) {
       // ...
    }

}

1

Якщо спочатку визначити тип функції, то це виглядатиме так

type Callback = (n: number) => void;

class Foo {
    save(callback: Callback) : void {        
        callback(42);
    }
}

var foo = new Foo();
var stringCallback = (result: string) : void => {
    console.log(result);
}

var numberCallback = (result: number) : void => {
    console.log(result);
}

foo.save(stringCallback); //--will be showing error
foo.save(numberCallback);

Без типу функції, використовуючи простий синтаксис властивості, було б:

class Foo {
    save(callback: (n: number) => void) : void {        
        callback(42);
    }
}

var foo = new Foo();
var stringCallback = (result: string) : void => {
    console.log(result);
}

var numberCallback = (result: number) : void => {
    console.log(result);
}

foo.save(stringCallback); //--will be showing error
foo.save(numberCallback);

Якщо ви хочете, використовуючи функцію інтерфейсу на зразок делегатів c # generic, це:

interface CallBackFunc<T, U>
{
    (input:T): U;
};

class Foo {
    save(callback: CallBackFunc<number,void>) : void {        
        callback(42);
    }
}

var foo = new Foo();
var stringCallback = (result: string) : void => {
    console.log(result);
}

var numberCallback = (result: number) : void => {
    console.log(result);
}

let strCBObj:CallBackFunc<string,void> = stringCallback;
let numberCBObj:CallBackFunc<number,void> = numberCallback;

foo.save(strCBObj); //--will be showing error
foo.save(numberCBObj);

0

Крім того, що було сказано, загальною проблемою є оголошення типів тієї самої функції, яка перевантажена. Типовий випадок - метод EventEmitter on (), який прийме численних слухачів. Подібне може статися під час роботи з наддувними діями - і там ви використовуєте тип дії як буквальний, щоб позначити перевантаження. У разі EventEmitters ви використовуєте тип події, що використовується в прямому значенні:

interface MyEmitter extends EventEmitter {
  on(name:'click', l: ClickListener):void
  on(name:'move', l: MoveListener):void
  on(name:'die', l: DieListener):void
  //and a generic one
  on(name:string, l:(...a:any[])=>any):void
}

type ClickListener = (e:ClickEvent)=>void
type MoveListener = (e:MoveEvent)=>void
... etc

// will type check the correct listener when writing something like:
myEmitter.on('click', e=>...<--- autocompletion
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.