ข้อผิดพลาด: ไม่สามารถเรียกใช้นิพจน์ที่ไม่มีลายเซ็นการโทร

ฉันใหม่เอี่ยมสำหรับ typescript และฉันมีสองคลาส ในคลาสผู้ปกครองฉันมี:

abstract class Component {
  public deps: any = {};
  public props: any = {};

  public setProp(prop: string): any {
    return <T>(val: T): T => {
      this.props[prop] = val;
      return val;
    };
  }
}

ในชั้นเด็กฉันมี:

class Post extends Component {
  public toggleBody: string;

  constructor() {
    this.toggleBody = this.setProp('showFullBody');
  }

  public showMore(): boolean {
    return this.toggleBody(true);
  }

  public showLess(): boolean {
    return this.toggleBody(false);
  }
}

ทั้ง showMore และ ShowLess ให้ข้อผิดพลาด "ไม่สามารถเรียกใช้นิพจน์ที่ไม่มีลายเซ็นการโทร"

แต่ฟังก์ชันที่ setProp ส่งกลับมีลายเซ็นการโทรหรือไม่? ฉันคิดว่าฉันเข้าใจผิดบางอย่างที่สำคัญเกี่ยวกับการพิมพ์ฟังก์ชัน แต่ฉันไม่รู้ว่ามันคืออะไร

ขอบคุณ!

ฟังก์ชันที่ส่งคืนมีลายเซ็นการโทร แต่คุณบอกว่า typescript ให้ละเว้นสิ่งนั้นโดยการเพิ่ม: anyลายเซ็น

อย่าทำอย่างนั้น

"ไม่สามารถเรียกใช้นิพจน์ที่ไม่มีลายเซ็นการโทร"

ในรหัสของคุณ:

class Post extends Component {
  public toggleBody: string;

  constructor() {
    this.toggleBody = this.setProp('showFullBody');
  }

  public showMore(): boolean {
    return this.toggleBody(true);
  }

  public showLess(): boolean {
    return this.toggleBody(false);
  }
}

public toggleBody: string;คุณมี คุณไม่สามารถเรียกใช้stringเป็นฟังก์ชันได้ ดังนั้นข้อผิดพลาดใน: this.toggleBody(true);และthis.toggleBody(false);

มาทำลายสิ่งนี้:

1. ข้อผิดพลาดแจ้งว่า

   ไม่สามารถเรียกใช้นิพจน์ที่ไม่มีลายเซ็นการโทร

2. รหัส:

ปัญหาอยู่ในบรรทัดนี้public toggleBody: string;&

มันสัมพันธ์กับบรรทัดเหล่านี้:

...
return this.toggleBody(true);
...
return this.toggleBody(false);

3. ผลลัพธ์:

คำพูดของคุณtoggleBodyเป็นstringแต่การปฏิบัติของคุณเหมือนบางสิ่งที่มีcall signature(เช่นโครงสร้างของสิ่งที่สามารถเรียกได้: lambdas, proc, ฟังก์ชั่น, วิธีการ ฯลฯ ใน JS just function tho) public toggleBody: (arg: boolean) => boolean;คุณจำเป็นต้องเปลี่ยนการประกาศให้เป็น

รายละเอียดเพิ่มเติม:

"เรียกใช้" หมายถึงการโทรของคุณหรือการใช้ฟังก์ชัน

"นิพจน์" ใน Javascript นั้นโดยพื้นฐานแล้วเป็นสิ่งที่สร้างค่าดังนั้นจึงthis.toggleBody()นับเป็นนิพจน์

"type" ถูกประกาศในบรรทัดนี้ public toggleBody: string

"ไม่มีลายเซ็นการโทร" เนื่องจากคุณพยายามเรียกสิ่งthis.toggleBody()ที่ไม่มีลายเซ็น (เช่นโครงสร้างของสิ่งที่สามารถเรียกได้: lambdas, proc, ฟังก์ชัน, วิธีการ ฯลฯ ) ที่สามารถเรียกได้ คุณบอกว่าthis.toggleBodyเป็นสิ่งที่ทำหน้าที่เหมือนสตริง

กล่าวอีกนัยหนึ่งคือข้อผิดพลาดกำลังพูด

ไม่สามารถเรียกนิพจน์ (this.toggleBody) ได้เนื่องจากประเภท (: string) ไม่มีลายเซ็นการโทร (bc มีลายเซ็นสตริง)

ฉันคิดว่าสิ่งที่คุณต้องการคือ:

abstract class Component {
  public deps: any = {};
  public props: any = {};

  public makePropSetter<T>(prop: string): (val: T) => T {
    return function(val) {
      this.props[prop] = val
      return val
    }
  }
}

class Post extends Component {
  public toggleBody: (val: boolean) => boolean;

  constructor () {
    super()
    this.toggleBody = this.makePropSetter<boolean>('showFullBody')
  }

  showMore (): boolean {
    return this.toggleBody(true)
  }

  showLess (): boolean {
    return this.toggleBody(false)
  }
}

การเปลี่ยนแปลงที่สำคัญอยู่ในsetProp(กล่าวคือmakePropSetterในรหัสใหม่) สิ่งที่คุณกำลังทำจริงๆคือการพูด: นี่คือฟังก์ชันที่มาพร้อมกับชื่อคุณสมบัติจะส่งคืนฟังก์ชันที่อนุญาตให้คุณเปลี่ยนคุณสมบัตินั้น

<T>บนmakePropSetterช่วยให้คุณสามารถล็อคฟังก์ชั่นที่อยู่ในประเภทที่เฉพาะเจาะจง ตัวสร้าง<boolean>ในคลาสย่อยเป็นทางเลือกที่แท้จริง เนื่องจากคุณกำลังกำหนดให้toggleBodyและมีประเภทที่ระบุไว้ครบถ้วนแล้วคอมไพเลอร์ TS จะสามารถทำงานได้ด้วยตัวเอง

จากนั้นในคลาสย่อยของคุณคุณเรียกใช้ฟังก์ชันนั้นและตอนนี้ประเภทการส่งคืนได้รับการเข้าใจอย่างถูกต้องว่าเป็นฟังก์ชันที่มีลายเซ็นเฉพาะ โดยปกติคุณจะต้องtoggleBodyเคารพลายเซ็นเดียวกันนั้น

หมายความว่าคุณกำลังพยายามเรียกสิ่งที่ไม่ใช่ฟังก์ชัน

const foo = 'string'
foo() // error

เพิ่มประเภทให้กับตัวแปรของคุณแล้วส่งคืน

เช่น:

const myVariable : string [] = ['hello', 'there'];

const result = myVaraible.map(x=> {
  return
  {
    x.id
  }
});

=> ส่วนที่สำคัญคือการเพิ่มสตริง [] ชนิด ฯลฯ :

ฉันมีข้อความแสดงข้อผิดพลาดเดียวกัน ในกรณีของฉันฉันผสมexport default function myFuncไวยากรณ์ES6 โดยไม่ได้ตั้งใจกับconst myFunc = require('./myFunc');.

การใช้module.exports = myFunc;แทนช่วยแก้ปัญหาได้

ข้อผิดพลาดนี้อาจเกิดขึ้นได้เมื่อคุณร้องขอค่าจากบางสิ่งบางอย่างและคุณใส่วงเล็บต่อท้ายราวกับว่าเป็นการเรียกฟังก์ชัน แต่ค่าจะถูกดึงออกมาอย่างถูกต้องโดยไม่ต้องใส่วงเล็บ ตัวอย่างเช่นหากสิ่งที่คุณกำลังเข้าถึงคือ Property 'get' ใน typescript

private IMadeAMistakeHere(): void {
    let mynumber = this.SuperCoolNumber();
}

private IDidItCorrectly(): void {
    let mynumber = this.SuperCoolNumber;
}

private get SuperCoolNumber(): number {
    let response = 42;
    return response;
};