자바 스크립트 개인 속성 구문이 인식되지 않음

Question

질문 설명 :

특히 아래의 예는 타이프 스크립트없이 어떻게 작성 될 수 있는지 알고 싶습니다. 클래스 등에서 속성을 선언하는 방법을 이해하면 나에게 유용 할 것입니다. 구현시 typescript를 사용하지 않고도 blueprintjs (타이프 스크립트로 작성)를 사용할 수 있어야한다고 생각합니다.

---

난에서 문서를 다음 해요 :

import { Button, Position, Toaster } from "@blueprintjs/core"; 


class MyComponent extends React.Component { 
    private toaster: Toaster; 
    private refHandlers = { 
     toaster: (ref: Toaster) => this.toaster = ref, 
    }; 

    public render() { 
     return (
      <div> 
       <Button onClick={this.addToast} text="Procure toast" /> 
       <Toaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster} /> 
      </div> 
     ) 
    } 

    private addToast =() => { 
     this.toaster.show({ message: "Toasted!" }); 
    } 
} 

을하지만 '개인'후 '토스터'는 Syntax Error: Unexpected token, expected ((5:16)를 얻을 : http://blueprintjs.com/docs/#components.toaster.js.react

이 샘플 코드를 다음과 같이한다. 나는 타이프 스크립트를 미리 컴파일하지 않는다. webpack과 함께 es6을 사용하고 있습니다. 내 환경에서 작동하도록이 샘플 코드를 어떻게 다시 작성합니까?

감사합니다.

Answer 1

여기 어떻게 내가 해냈어. 이 튜토리얼을 기반으로하는 webpack의 도움이 조금 있습니다. https://www.typescriptlang.org/docs/handbook/react-&-webpack.html. tsconfig.json 구성 파일의 대상을 es6으로 설정하고 webpack을 컴파일합니다 (어느 정도).

이 솔루션의 모든 개선 된 기능을 환영합니다.

import {Button, Position, Toaster} from "@blueprintjs/core"; 

class ToastLauncher extends React.Component { 

    constructor(props) { 
     super(props); 

     this.refHandlers = { 
      toaster: (ref) => this.toaster = ref, 
     }; 

     this.addToast =() => { 
      this.toaster.show({ message: "Toasted!" }); 
     }; 

    } 

    render() { 
     return (
      <div> 
       <Button onClick={this.addToast} text="Procure toast" /> 
       <Toaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster} /> 
      </div> 
     ) 
    } 
} 

export default ToastLauncher 

Answer 2

blueprintjs는 typescript를 사용하여 구현되며 해당 예제는 타이프 스크립트 구문을 사용합니다.

은 참조 : http://blueprintjs.com/docs/#TypeScript