How do you use a <Toast> in blueprintjs?

Question

As someone who isn't using typescript, I'm having a really hard time figuring out how to use Toast. I can tell this component seems to look different than the others.

Here is the example code, what would be the ES6 equivalent?

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

Answer 1

TypeScript just adds type checks to the code. You can learn more about it from this question.

The change is pretty simple. You just need to remove type declarations.

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

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

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

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