Lỗi: Không thể gọi biểu thức có loại thiếu chữ ký cuộc gọi

Question

Tôi là người mới sử dụng bản đánh chữ và tôi có hai lớp. Trong lớp cha mẹ tôi có:

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; 
    }; 
    } 
} 

trong lớp con tôi có: "Không thể gọi một biểu thức có loại thiếu một chữ ký cuộc gọi"

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); 
    } 
} 

Cả showMore và ShowLess cung cấp cho tôi những lỗi,

Nhưng hàm setProp trả về CÓ chữ ký cuộc gọi, tôi nghĩ vậy? Tôi nghĩ rằng tôi hiểu lầm một cái gì đó quan trọng về cách gõ các chức năng, nhưng tôi không biết nó là gì.

Cảm ơn!

Answer 1

Hàm trả về có chữ ký cuộc gọi, nhưng bạn đã yêu cầu Typecript hoàn toàn bỏ qua điều đó bằng cách thêm : any vào chữ ký của nó.

Đừng làm điều đó.

Answer 2

"Cannot invoke an expression whose type lacks a call signature."

Trong mã của bạn:

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); 
    } 
} 

Bạn có public toggleBody: string;. Bạn không thể gọi số string làm chức năng. Do đó lỗi trên: this.toggleBody(true); và this.toggleBody(false);

Answer 3

Tôi nghĩ rằng những gì bạn muốn là:

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) 
    } 
} 

Sự thay đổi quan trọng là trong setProp (ví dụ: makePropSetter trong mã mới). Những gì bạn đang thực sự làm ở đó là để nói: đây là một hàm, được cung cấp với một tên thuộc tính, sẽ trả về một hàm cho phép bạn thay đổi thuộc tính đó.

<T> trên makePropSetter cho phép bạn khóa chức năng đó thành một loại cụ thể. <boolean> trong hàm tạo của lớp con thực sự là tùy chọn. Vì bạn đang gán cho toggleBody và đã có loại được chỉ định đầy đủ, trình biên dịch TS sẽ có thể tự làm việc đó.

Sau đó, trong lớp con của bạn, bạn gọi hàm đó và kiểu trả về giờ đây được hiểu đúng là một hàm có chữ ký cụ thể. Đương nhiên, bạn sẽ cần phải có toggleBody tôn trọng cùng một chữ ký đó.