ฟังก์ชั่นที่พิมพ์อย่างรุนแรงเป็นพารามิเตอร์ที่เป็นไปได้ใน TypeScript?


559

ใน 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 version: มีผู้แทน. NET ที่เทียบเท่าใน TypeScript หรือไม่

คำตอบ:


805

แน่ใจ ประเภทของฟังก์ชั่นประกอบด้วยประเภทของการโต้แย้งและประเภทผลตอบแทน ที่นี่เราระบุว่า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 หมายถึงฟังก์ชั่นรับพารามิเตอร์หนึ่งตัว (a number) แต่ประเภทการส่งคืนไม่ได้ถูก จำกัด เลย (อาจเป็นค่าใด ๆ หรือแม้กระทั่งvoid)
Daniel Earwicker

16
อะไรคือจุดประสงค์ของnไวยากรณ์นี้? ประเภทอินพุตและเอาต์พุตจะไม่เพียงพอหรือไม่
Yuhuan Jiang

4
ผลข้างเคียงหนึ่งระหว่างการใช้ฟังก์ชั่นอินไลน์กับฟังก์ชั่นที่มีชื่อ (คำตอบด้านล่างเทียบกับคำตอบนี้) คือตัวแปร "นี้" จะไม่ได้กำหนดไว้กับฟังก์ชั่นที่มีชื่อในขณะที่มันถูกกำหนดไว้ภายในฟังก์ชั่นอินไลน์ ไม่แปลกใจสำหรับ JavaScript coders แต่ไม่ชัดเจนกับภูมิหลังการเข้ารหัสอื่น ๆ
Stevko

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 คุณช่วยอธิบายได้ไหมว่าทำไมคุณถึงคิดว่านี่เป็นรูปแบบการต่อต้าน?
Max R McCarty

8
เหตุผลก็คือ TypeScript มีฟังก์ชั่นที่แท้จริงของประเภทไวยากรณ์ตัวอักษรที่ obviates จำเป็นสำหรับการเชื่อมต่อดังกล่าว ใน C # ผู้ได้รับมอบหมายมีเพียงเล็กน้อย แต่ActionและFuncผู้ได้รับมอบหมายทั้งคู่ไม่ต้องการประเภทตัวแทนที่เฉพาะเจาะจงและน่าสนใจให้ C # a มีรูปร่างหน้าตาของการพิมพ์เชิงโครงสร้าง ข้อเสียของผู้ได้รับมอบหมายเหล่านี้คือชื่อของพวกเขาไม่ได้สื่อความหมายใด ๆ ใน TypeScript เราไม่ต้องการประเภทเหล่านี้ function map<T, U>(xs: T[], f: Func<T, U>)ดังนั้นการต่อต้านรูปแบบจะเป็น ชอบfunction map<T, U>(xs: T[], f: (x: T) => U)
Aluan Haddad

6
มันเป็นเรื่องของรสนิยมเนื่องจากรูปแบบเหล่านี้เทียบเท่าในภาษาที่ไม่มีประเภทเวลาทำงาน ทุกวันนี้คุณยังสามารถใช้นามแฝงประเภทแทนการเชื่อมต่อ
Drew Noakes

18

ฉันรู้ว่าโพสต์นี้เก่า แต่มีวิธีการกระชับมากกว่าที่ถามเล็กน้อย แต่อาจเป็นทางเลือกที่มีประโยชน์มาก คุณเป็นหลักสามารถประกาศฟังก์ชั่นในบรรทัดเมื่อโทรวิธีการ ( Foo's 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 เหมาะสมกว่า ขอบคุณ!
กฤษณะ Ganeriwal

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 # ทั่วไปมันจะเป็น:

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 () ซึ่งจะรับฟังได้หลายประเภท ที่คล้ายกันอาจเกิดขึ้นเมื่อทำงานกับการดำเนินการ redux - และที่นั่นคุณใช้ประเภทการกระทำเป็นตัวอักษรเพื่อทำเครื่องหมายการบรรทุกเกินพิกัดในกรณีของ 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
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.