Convert some non-connected components to Typescript

js/components/CharacterString.tsx

@@ -1,9 +1,12 @@
 import React from "react";
-import PropTypes from "prop-types";
 import Character from "./Character";
 
-class CharacterString extends React.Component {
-  shouldComponentUpdate(nextProps) {
+interface Props {
+  children: string;
+}
+
+class CharacterString extends React.Component<Props> {
+  shouldComponentUpdate(nextProps: Props) {
     return nextProps.children !== this.props.children;
   }
 
@@ -16,8 +19,4 @@ class CharacterString extends React.Component {
   }
 }
 
-CharacterString.propsTypes = {
-  children: PropTypes.string
-};
-
 export default CharacterString;

js/components/ClickedDiv.tsx

@@ -1,14 +1,23 @@
 import React from "react";
 import classnames from "classnames";
 
+interface Props {
+  className?: string;
+  onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+interface State {
+  clicked: boolean;
+}
+
 // Winamp has a strange behavior for the buttons at the top of the main window.
 // It shows through to the main background sprite until the first time that it's
 // clicked, and then it shows the dedicated undepressed sprite thereafter.
 // This component is an abstraction that tracks if a div has ever been clicked.
 // Look in `skinSelectors` for CSS selectors that look like `#some-id.clicked`
 // for examples of this functionality in use.
-export default class ClickedDiv extends React.Component {
-  constructor(props) {
+export default class ClickedDiv extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = { clicked: false };
   }

js/components/DropTarget.tsx

@@ -1,24 +1,32 @@
 import React from "react";
 
-export default class DropTarget extends React.Component {
-  supress(e) {
+interface Coord {
+  x: number;
+  y: number;
+}
+
+interface Props {
+  loadFilesFromReferences: () => void;
+  handleDrop(e: React.DragEvent<HTMLDivElement>, coord: Coord): void;
+}
+
+export default class DropTarget extends React.Component<Props> {
+  supress(e: React.DragEvent<HTMLDivElement>) {
     e.stopPropagation();
     e.preventDefault();
     e.dataTransfer.dropEffect = "link";
     e.dataTransfer.effectAllowed = "link";
   }
 
-  handleDrop = e => {
+  handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
     this.supress(e);
-    if (!this._node) {
+    const { target } = e;
+    if (!(target instanceof Element)) {
       return;
     }
-    const { x, y } = this._node.getBoundingClientRect();
-    this.props.handleDrop(e, { x, y });
-  };
 
-  _ref = node => {
-    this._node = node;
+    const { left: x, top: y } = target.getBoundingClientRect();
+    this.props.handleDrop(e, { x, y });
   };
 
   render() {
@@ -36,7 +44,6 @@ export default class DropTarget extends React.Component {
         onDragEnter={this.supress}
         onDragOver={this.supress}
         onDrop={this.handleDrop}
-        ref={this._ref}
       />
     );
   }