오류 : 유형에 호출 서명이없는 식을 호출 할 수 없습니다.

저는 타이프 스크립트를 처음 접했고 두 개의 클래스가 있습니다. 부모 클래스에는 다음이 있습니다.

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. 선언을 다음과 같이 변경해야합니다.public toggleBody: (arg: boolean) => boolean; .

추가 세부 사항 :

"호출"은 함수를 호출하거나 적용하는 것을 의미합니다.

자바 스크립트의 "표현식"은 기본적으로 값을 생성하는 것이므로 this.toggleBody() 표현식으로 간주됩니다.

"type"은이 줄에 선언됩니다. public toggleBody: string

"호출 서명이 없습니다"이것은 호출 할 this.toggleBody()수있는 서명 (즉, 호출 할 수있는 것의 구조 : 람다, 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
  }
});

=> 중요한 부분은 string [] 유형 등을 추가하는 것입니다.

동일한 오류 메시지가 표시되었습니다. 제 경우에는 실수로 ES6 export default function myFunc구문을 const myFunc = require('./myFunc');.

module.exports = myFunc;대신 사용 하면 문제가 해결되었습니다.

이 오류는 무언가에서 값을 요청하고 마치 함수 호출 인 것처럼 끝에 괄호를 넣었지만 괄호를 끝내지 않고 값을 올바르게 검색 할 때 발생할 수 있습니다. 예를 들어, 액세스하는 것이 Typescript의 속성 'get'인 경우.

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

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

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