저는 타이프 스크립트를 처음 접했고 두 개의 클래스가 있습니다. 부모 클래스에는 다음이 있습니다.
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);
답변
이것을 분해 해보자 :
-
오류는 말한다
형식에 호출 서명이없는 식을 호출 할 수 없습니다.
-
코드:
문제는이 줄에 있습니다 public toggleBody: string;
.
다음 라인과 관련이 있습니다.
...
return this.toggleBody(true);
...
return this.toggleBody(false);
- 결과:
당신의 말 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;
대신 사용 하면 문제가 해결되었습니다.