이벤트, 타이프

Question

는 내 기능 컴포넌트 중 하나에 onClick 이벤트가 :이 <BreadCrumbs> 구성 요소로 인해 작동하지 않습니다

<BreadCrumbs level={this.state.levels} changeLevel={this.changeLevel}/> 

, 타이프 스크립트 컴파일러 (return <span> 줄에) 오류와 함께 실패합니다

[ts] 
Type '{ key: number; onClick: Function; children: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'. 
    Type '{ key: number; onClick: Function; children: string; }' is not assignable to type 'HTMLAttributes<HTMLSpanElement>'. 
    Types of property 'onClick' are incompatible. 
     Type 'Function' is not assignable to type '((event: MouseEvent<HTMLSpanElement>) => void) | undefined'. 
     Type 'Function' is not assignable to type '(event: MouseEvent<HTMLSpanElement>) => void'. 
      Type 'Function' provides no match for the signature '(event: MouseEvent<HTMLSpanElement>): void'. 
(JSX attribute) onClick: Function 

그러나, 나는이 내 코드를 수정하는 경우 :

const BreadCrumbs: React.SFC<{level: Array<string>, changeLevel: Function}> = ({level, changeLevel}) => { 
    function something(i: number) { 
     changeLevel(i); 
    } 
    return (
     <div> 
     { 
      level.map(function(elem, i) { 
      return <span key={i} onClick={something.bind(this, i)}>{elem}</span> 
      }) 
     } 
     </div> 
    ) 
} 

export default BreadCrumbs; 

모든 것이 잘 작동합니다. 첫 번째 버전이 작동하지 않는 이유는 무엇입니까?

Answer 1

TypeScript에서는 강력한 형식 지정 방식을 사용하여 함수의 매개 변수와 반환 값을 고려하여 형식 검사를 수행합니다. 따라서 매개 변수 (React component prop) changeLevel의 경우 유형을 (event: React.MouseEvent<HTMLSpanElement>) => void 또는 호환 가능한 유형 (예 : (e: React.MouseEvent<Element>) => void, () => void 또는 () => any)으로 선언해야합니다. Function 형식은 함수 형식 선언에 사용되는 것이 아니라 함수 개체에 대한 정보가 부족하고 함수를 입력 할 때 피해야하는 함수 개체의 전역 생성자를 입력하는 데 사용됩니다.

코드를 다음 버전으로 변경하여 TypeScript의 확인을 통과 할 수 있습니다.

const BreadCrumbs: React.SFC<{level: Array<string>, changeLevel:() => void}> = ({level, changeLevel}) => { 
    return (
     <div> 
     { 
      level.map(function(elem, i) { 
      return <span key={i} onClick={changeLevel}>{elem}</span> 
      }) 
     } 
     </div> 
    ) 
} 

실은 제 버전, bind 함수의 리턴 타입 타이프 어떤 유형의 변수에 할당 될 수 any이다. TypeScript는 해당 버전에서 형식 검사를 수행하지 않습니다.