@khanacademy/perseus 4.0.0 → 4.0.2

package/src/widgets/interactive-graph.tsx

@@ -417,7 +417,6 @@ class InteractiveGraph extends React.Component<Props, State> {
             [-10, 10],
         ],
         step: [1, 1],
-        // $FlowFixMe[prop-missing]
         // @ts-expect-error [FEI-5003] - TS2739 - Type '{ readonly url: null; }' is missing the following properties from type 'PerseusImageBackground': width, height
         backgroundImage: defaultBackgroundImage,
         markings: "graph",
@@ -727,10 +726,8 @@ class InteractiveGraph extends React.Component<Props, State> {
             return Interactive2.addMaybeMobileMovablePoint(this, {
                 coord: coord,
                 constraints: [
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                     Interactive2.MovablePoint.constraints.bound(),
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                     Interactive2.MovablePoint.constraints.snap(),
                 ],
@@ -798,7 +795,6 @@ class InteractiveGraph extends React.Component<Props, State> {
 
         const onMoveHandler = () => {
             const graph = _.extend({}, this.props.graph, {
-                // $FlowFixMe[incompatible-use]
                 // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2531 - Object is possibly 'null'. | TS2531 - Object is possibly 'null'.
                 coords: [pointA.coord(), pointB.coord(), pointC.coord()],
             });
@@ -813,19 +809,15 @@ class InteractiveGraph extends React.Component<Props, State> {
         pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
             coord: coords[0],
             constraints: [
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 Interactive2.MovablePoint.constraints.bound(),
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 Interactive2.MovablePoint.constraints.snap(),
                 (coord) => {
                     return (
                         !pointA ||
-                        // $FlowFixMe[incompatible-use]
                         // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
                         (coord[0] !== pointB.coord()[0] &&
-                            // $FlowFixMe[incompatible-use]
                             // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
                             coord[0] !== pointC.coord()[0])
                     );
@@ -841,19 +833,15 @@ class InteractiveGraph extends React.Component<Props, State> {
         pointB = this.pointB = Interactive2.addMaybeMobileMovablePoint(this, {
             coord: coords[1],
             constraints: [
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 Interactive2.MovablePoint.constraints.bound(),
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 Interactive2.MovablePoint.constraints.snap(),
                 (coord: any) => {
                     return (
                         !pointB ||
-                        // $FlowFixMe[incompatible-use]
                         // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
                         (coord[0] !== pointA.coord()[0] &&
-                            // $FlowFixMe[incompatible-use]
                             // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
                             coord[0] !== pointC.coord()[0])
                     );
@@ -869,19 +857,15 @@ class InteractiveGraph extends React.Component<Props, State> {
         pointC = this.pointC = Interactive2.addMaybeMobileMovablePoint(this, {
             coord: coords[2],
             constraints: [
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 Interactive2.MovablePoint.constraints.bound(),
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 Interactive2.MovablePoint.constraints.snap(),
                 (coord: any) => {
                     return (
                         !pointC ||
-                        // $FlowFixMe[incompatible-use]
                         // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
                         (coord[0] !== pointA.coord()[0] &&
-                            // $FlowFixMe[incompatible-use]
                             // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
                             coord[0] !== pointB.coord()[0])
                     );
@@ -943,7 +927,6 @@ class InteractiveGraph extends React.Component<Props, State> {
 
         const onMoveHandler = () => {
             const graph = _.extend({}, this.props.graph, {
-                // $FlowFixMe[incompatible-use]
                 // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
                 coords: [pointA.coord(), pointB.coord()],
             });
@@ -958,10 +941,8 @@ class InteractiveGraph extends React.Component<Props, State> {
         pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
             coord: coords[0],
             constraints: [
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 Interactive2.MovablePoint.constraints.bound(),
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 Interactive2.MovablePoint.constraints.snap(),
                 (coord: any) => {
@@ -976,10 +957,8 @@ class InteractiveGraph extends React.Component<Props, State> {
             {
                 coord: coords[1],
                 constraints: [
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                     Interactive2.MovablePoint.constraints.bound(),
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                     Interactive2.MovablePoint.constraints.snap(),
                     (coord: any) => {
@@ -1049,9 +1028,7 @@ class InteractiveGraph extends React.Component<Props, State> {
 
         $(circle).on("move", () => {
             const graph = _.extend({}, this.props.graph, {
-                // $FlowFixMe[incompatible-use]
                 center: circle.center,
-                // $FlowFixMe[incompatible-use]
                 radius: circle.radius,
             });
             this.onChange({graph: graph});
@@ -1085,10 +1062,8 @@ class InteractiveGraph extends React.Component<Props, State> {
                         Interactive2.addMaybeMobileMovablePoint(this, {
                             coord: coord,
                             constraints: [
-                                // $FlowFixMe[prop-missing]
                                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                                 Interactive2.MovablePoint.constraints.bound(),
-                                // $FlowFixMe[prop-missing]
                                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                                 Interactive2.MovablePoint.constraints.snap(),
                                 (coord) => {
@@ -1152,9 +1127,7 @@ class InteractiveGraph extends React.Component<Props, State> {
         const graphie = this.graphie;
         const screenPoint = graphie?.scalePoint(coord);
         return (
-            // $FlowFixMe[incompatible-use]
             screenPoint[0] >= graphie.xpixels - 40 &&
-            // $FlowFixMe[incompatible-use]
             screenPoint[1] >= graphie.ypixels - 40
         );
     };
@@ -1188,10 +1161,8 @@ class InteractiveGraph extends React.Component<Props, State> {
         point = Interactive2.addMaybeMobileMovablePoint(this, {
             coord: coord,
             constraints: [
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 Interactive2.MovablePoint.constraints.bound(),
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 Interactive2.MovablePoint.constraints.snap(),
                 function (coord) {
@@ -1563,12 +1534,10 @@ class InteractiveGraph extends React.Component<Props, State> {
         const point = Interactive2.addMaybeMobileMovablePoint(this, {
             coord: coord,
             constraints: [
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 Interactive2.MovablePoint.constraints.bound(),
                 snapToGrid
-                    ? // $FlowFixMe[prop-missing]
-                      // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
+                    ? // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                       Interactive2.MovablePoint.constraints.snap()
                     : null,
                 graphConstraint,
@@ -1686,10 +1655,8 @@ class InteractiveGraph extends React.Component<Props, State> {
                         createPoint({
                             coord: coord,
                             constraints: [
-                                // $FlowFixMe[prop-missing]
                                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                                 Interactive2.MovablePoint.constraints.bound(),
-                                // $FlowFixMe[prop-missing]
                                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                                 Interactive2.MovablePoint.constraints.snap(),
                                 (coord: any) => {
@@ -1718,15 +1685,12 @@ class InteractiveGraph extends React.Component<Props, State> {
                     points: points,
                     static: false,
                     constraints: [
-                        // $FlowFixMe[prop-missing]
                         // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                         Interactive2.MovableLine.constraints.bound(),
-                        // $FlowFixMe[prop-missing]
                         // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                         Interactive2.MovableLine.constraints.snap(),
                     ],
                     onMove: [
-                        // $FlowFixMe[prop-missing]
                         // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMove' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                         Interactive2.MovableLine.onMove.updatePoints,
                         updateCoordProps,
@@ -1870,12 +1834,10 @@ class InteractiveGraph extends React.Component<Props, State> {
             const self = this;
             self.polygon = Interactive2.addMovablePolygon(graphie, {
                 constraints: [
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
                     Interactive2.MovablePolygon.constraints.bound(),
                     snapToGrid
-                        ? // $FlowFixMe[prop-missing]
-                          // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
+                        ? // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
                           Interactive2.MovablePolygon.constraints.snap()
                         : null,
                 ],
@@ -1886,7 +1848,6 @@ class InteractiveGraph extends React.Component<Props, State> {
                 numArcs: numArcs,
                 sideLabels: sideLabels,
                 onMove: [
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMove' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
                     Interactive2.MovablePolygon.onMove.updatePoints,
                     function () {
@@ -2135,7 +2096,6 @@ class InteractiveGraph extends React.Component<Props, State> {
         props: Props,
     ): ReadonlyArray<Coord> {
         return (
-            // $FlowFixMe[incompatible-return]
             // @ts-expect-error [FEI-5003] - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
             graph.coords ||
             InteractiveGraph.pointsFromNormalized(props, [
@@ -2230,7 +2190,6 @@ class InteractiveGraph extends React.Component<Props, State> {
     ): ReadonlyArray<ReadonlyArray<Coord>> {
         return (
             // The callers assume that we're return an array of points
-            // $FlowFixMe[incompatible-return]
             // @ts-expect-error [FEI-5003] - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
             graph.coords ||
             _.map(
@@ -2323,17 +2282,11 @@ class InteractiveGraph extends React.Component<Props, State> {
         const n = graph.numSegments || 1;
         // @ts-expect-error [FEI-5003] - TS2322 - Type 'number[] | undefined' is not assignable to type 'readonly number[]'.
         const ys: ReadonlyArray<number> = {
-            // $FlowFixMe[unsupported-syntax]
             1: [5],
-            // $FlowFixMe[unsupported-syntax]
             2: [5, -5],
-            // $FlowFixMe[unsupported-syntax]
             3: [5, 0, -5],
-            // $FlowFixMe[unsupported-syntax]
             4: [6, 2, -2, -6],
-            // $FlowFixMe[unsupported-syntax]
             5: [6, 3, 0, -3, -6],
-            // $FlowFixMe[unsupported-syntax]
             6: [5, 3, 1, -1, -3, -5],
         }[n];
         const range = [
@@ -2645,7 +2598,6 @@ class InteractiveGraph extends React.Component<Props, State> {
                 // If both of the guess points are on the correct line, it's
                 // correct.
                 if (
-                    // $FlowFixMe[incompatible-use] - Fix type so coords can't be omitted
                     // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
                     collinear(correct[0], correct[1], guess[0]) &&
                     // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
@@ -2693,8 +2645,6 @@ class InteractiveGraph extends React.Component<Props, State> {
                 // If the parabola coefficients match, it's correct.
                 const guessCoeffs = this.getQuadraticCoefficients(state.coords);
                 const correctCoeffs = this.getQuadraticCoefficients(
-                    // $FlowFixMe[incompatible-call]
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
                     rubric.correct.coords,
                 );
@@ -2713,8 +2663,6 @@ class InteractiveGraph extends React.Component<Props, State> {
             ) {
                 const guessCoeffs = this.getSinusoidCoefficients(state.coords);
                 const correctCoeffs = this.getSinusoidCoefficients(
-                    // $FlowFixMe[incompatible-call]
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
                     rubric.correct.coords,
                 );
@@ -2738,7 +2686,6 @@ class InteractiveGraph extends React.Component<Props, State> {
             ) {
                 if (
                     deepEq(state.center, rubric.correct.center) &&
-                    // $FlowFixMe[prop-missing]
                     eq(state.radius, rubric.correct.radius)
                 ) {
                     return {
@@ -2831,10 +2778,8 @@ class InteractiveGraph extends React.Component<Props, State> {
                 const guess = state.coords;
                 const correct = rubric.correct.coords;
                 if (
-                    // $FlowFixMe[incompatible-use]
                     // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
                     deepEq(guess[0], correct[0]) &&
-                    // $FlowFixMe[incompatible-use]
                     // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
                     collinear(correct[0], correct[1], guess[1])
                 ) {
@@ -2869,14 +2814,10 @@ class InteractiveGraph extends React.Component<Props, State> {
                     match = eq(...angles);
                 } else {
                     /* exact */
-                    match =
-                        // $FlowFixMe[incompatible-use]
-                        // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
+                    match = // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
                         deepEq(guess[1], correct[1]) &&
-                        // $FlowFixMe[incompatible-use]
                         // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
                         collinear(correct[1], correct[0], guess[0]) &&
-                        // $FlowFixMe[incompatible-use]
                         // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
                         collinear(correct[1], correct[2], guess[2]);
                 }

package/src/widgets/label-image.tsx

@@ -11,7 +11,7 @@ import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";
 import * as React from "react";
-import ReactDOM from "react-dom";
+import * as ReactDOM from "react-dom";
 
 import AssetContext from "../asset-context";
 import SvgImage from "../components/svg-image";

package/src/widgets/measurer.tsx

@@ -79,7 +79,6 @@ const Measurer: any = createReactClass({
                             left: image.left,
                         }}
                     >
-                        {/* $FlowFixMe[prop-missing]: alt prop is missing */}
                         {/* @ts-expect-error [FEI-5003] - TS2741 - Property 'alt' is missing in type '{ src: any; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'. */}
                         <SvgImage src={image.url} />
                     </div>

package/src/widgets/number-line.tsx

@@ -160,7 +160,6 @@ const TickMarks: any = Graphie.createSimpleClass((graphie, props) => {
                       color: KhanColors.BLUE_D,
                   }
                 : {},
-            // $FlowFixMe[incompatible-call]
             () => _label(graphie, props.labelStyle, leftLabel, leftLabel, base),
         ),
     );
@@ -173,7 +172,6 @@ const TickMarks: any = Graphie.createSimpleClass((graphie, props) => {
                   }
                 : {},
             () =>
-                // $FlowFixMe[incompatible-call]
                 _label(graphie, props.labelStyle, rightLabel, rightLabel, base),
         ),
     );

package/src/widgets/orderer.tsx

@@ -502,10 +502,7 @@ class Orderer extends React.Component<OrdererProps, OrdererState> {
             current: list,
             dragging: true,
             placeholderIndex: placeholderIndex,
-            // $FlowFixMe[prop-missing]
-            // $FlowFixMe[incompatible-use]
             dragKey: opt.key,
-            // $FlowFixMe[incompatible-use]
             dragContent: opt.content,
             // @ts-expect-error [FEI-5003] - TS2339 - Property 'width' does not exist on type 'JQueryStatic'.
             dragWidth: $draggable.width(),

package/src/widgets/passage/passage-markdown.tsx

@@ -150,7 +150,7 @@ const rules = {
 
                 // A "magic" capture that matches the opening {{
                 // but captures the full ref text internally :D
-                // unfortunately the "magic" makes Flow upset,
+                // unfortunately the "magic" makes TypeScript upset,
                 // so there's this questionable workaround
                 capture[1] = source.slice(2, closeIndex);
                 return capture;

package/src/widgets/passage-ref-target.tsx

@@ -47,7 +47,6 @@ class PassageRefTarget extends React.Component<any> {
 
     render(): React.ReactNode {
         return (
-            // $FlowFixMe[prop-missing]: inline doesn't exist in Renderer's declared props
             <Renderer
                 content={this.props.content}
                 // @ts-expect-error [FEI-5003] - TS2322 - Type '{ content: any; inline: boolean; apiOptions: any; linterContext: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Renderer> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | ... 3 more ... | "legacyPerseusLint"> & InexactPartial<...> & InexactPartial<...>'.

package/src/widgets/passage.tsx

@@ -3,7 +3,7 @@ import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import $ from "jquery";
 import * as React from "react";
-import ReactDOM from "react-dom";
+import * as ReactDOM from "react-dom";
 import _ from "underscore";
 
 import HighlightableContent from "../components/highlighting/highlightable-content";

package/src/widgets/plotter.tsx

@@ -927,7 +927,6 @@ class Plotter extends React.Component<any, any> {
             if (i > 0) {
                 c.graph.lines[i] = Interactive2.addMovableLine(graphie, {
                     points: [c.graph.points[i - 1], c.graph.points[i]],
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                     constraints: Interactive2.MovablePoint.constraints.fixed(),
                     normalStyle: {

package/src/widgets/radio/__stories__/base-radio.stories.tsx

@@ -146,7 +146,7 @@ export const SingleKitchenSink: React.FC<StoryArgs> = (
 
     const rubricChoices = choices.map(({correct}) => ({
         // note(matthew): reviewModeRubric.choices requires content,
-        // but I don't see how it's getting used and Flow gets mad
+        // but I don't see how it's getting used and TypeScript gets mad
         // when I use choice.content because it's not a string.
         // reviewModeRubric could probably use a look over.
         content: "",
@@ -186,7 +186,7 @@ export const MultipleKitchenSink: React.FC<StoryArgs> = (
 
     const rubricChoices = choices.map((c) => ({
         // note(matthew): reviewModeRubric.choices requires content,
-        // but I don't see how it's getting used and Flow gets mad
+        // but I don't see how it's getting used and TypeScript gets mad
         // when I use choice.content because it's not a string.
         // reviewModeRubric could probably use a look over.
         content: "",

package/src/widgets/radio/base-radio.tsx

@@ -325,7 +325,7 @@ const BaseRadio: React.FC<Props> = function (props): React.ReactElement {
 
                     let correctnessClass;
                     // reviewMode is only true if there's a rubric
-                    // but Flow doesn't understand that
+                    // but TypeScript doesn't understand that
                     if (reviewMode && reviewModeRubric) {
                         correctnessClass = reviewModeRubric.choices[i].correct
                             ? ApiClassNames.CORRECT

package/src/widgets/transformer.tsx

@@ -1281,9 +1281,7 @@ const ShapeTypes = {
                     fixed: !options.translatable && !options.editable,
                 },
                 visible: options.showPoints,
-                // $FlowFixMe[prop-missing]
                 snapX: (options.snap && options.snap[0]) || 0,
-                // $FlowFixMe[prop-missing]
                 snapY: (options.snap && options.snap[1]) || 0,
                 bounded: false, // Don't bound it when placing it on the graph
                 onMove: onMove,
@@ -2111,7 +2109,6 @@ class Transformer extends React.Component<Props> {
                 transform = {
                     type: "translation",
                     // NOTE(kevib): these should be numbers
-                    // $FlowFixMe[incompatible-type]
                     // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type 'number'. | TS2322 - Type 'null' is not assignable to type 'number'.
                     vector: [null, null],
                 };
@@ -2120,11 +2117,9 @@ class Transformer extends React.Component<Props> {
                 transform = {
                     type: "rotation",
                     // NOTE(kevib): these should be numbers
-                    // $FlowFixMe[incompatible-type]
                     // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type 'number'. | TS2322 - Type 'null' is not assignable to type 'number'.
                     center: [null, null],
                     // NOTE(kevib): this should be a number
-                    // $FlowFixMe[incompatible-type]
                     // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type 'number'.
                     angleDeg: null,
                 };
@@ -2135,11 +2130,9 @@ class Transformer extends React.Component<Props> {
                     type: "reflection",
                     line: [
                         // NOTE(kevib): these should be numbers
-                        // $FlowFixMe[incompatible-type]
                         // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type 'number'. | TS2322 - Type 'null' is not assignable to type 'number'.
                         [null, null],
                         // NOTE(kevib): these should be numbers
-                        // $FlowFixMe[incompatible-type]
                         // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type 'number'. | TS2322 - Type 'null' is not assignable to type 'number'.
                         [null, null],
                     ],
@@ -2149,11 +2142,9 @@ class Transformer extends React.Component<Props> {
                 transform = {
                     type: "dilation",
                     // NOTE(kevib): these should be numbers
-                    // $FlowFixMe[incompatible-type]
                     // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type 'number'. | TS2322 - Type 'null' is not assignable to type 'number'.
                     center: [null, null],
                     // NOTE(kevib): this should be a number
-                    // $FlowFixMe[incompatible-type]
                     // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type 'number'.
                     scale: null,
                 };
@@ -2381,7 +2372,6 @@ class Transformer extends React.Component<Props> {
         if (reflectRotateHandle) {
             $(reflectRotateHandle).on("move", function () {
                 const rotateHandleApprox = self.snapCoord(
-                    // $FlowFixMe[incompatible-use]
                     // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
                     reflectRotateHandle.coord,
                 );
@@ -2476,7 +2466,6 @@ class Transformer extends React.Component<Props> {
             hoverWidth: this.scaleToCurrentRange(0.4),
             onMove: function (newAngle, oldAngle) {
                 const transform = self.getRotationTransformFromAngle(
-                    // $FlowFixMe[incompatible-use]
                     self.rotatePoint.coord,
                     newAngle - oldAngle,
                 );
@@ -2530,9 +2519,7 @@ class Transformer extends React.Component<Props> {
                 self.doTransform({
                     type: "dilation",
                     // NOTE(kevinb): It's hard to convince that this.dilationCircle
-                    // will still be defined here.
-                    // $FlowFixMe[incompatible-use]
-                    center: self.dilationCircle.centerPoint.coord,
+                    // will still be defined here.                    center: self.dilationCircle.centerPoint.coord,
                     scale: newRadius / oldRadius,
                 });
             },
@@ -2569,7 +2556,6 @@ class Transformer extends React.Component<Props> {
                 origOnMoveEnd(args);
             }
             self.changeTool("dilation", {
-                // $FlowFixMe[incompatible-use]
                 coord: self.dilationCircle.centerPoint.coord,
             });
         };
@@ -2750,7 +2736,6 @@ class Transformer extends React.Component<Props> {
             // handle coordinates in formal mode without movement, since
             // the movablepoints never move
             shape: {
-                // $FlowFixMe[incompatible-use]
                 type: this.shape.type,
                 coords: this.getCoords(),
                 options: this.shape?.getOptions(),

package/src/widgets.ts

@@ -363,7 +363,7 @@ const validAlignments: ReadonlyArray<Alignment> = [
  * invalid.
  */
 // TODO(alex): Change this to run as a testcase (vs. being run at runtime)
-// TODO(LP-10707): I think this can be completely removed because our Flow types
+// TODO(LP-10707): I think this can be completely removed because our TypeScript types
 // enforce this!
 export const validateAlignments = () => {
     _.each(widgets, function (widgetInfo) {

package/src/zoom.ts

@@ -399,15 +399,12 @@ Zoom.prototype._calculateZoom = function () {
     const viewportAspectRatio = viewportWidth / viewportHeight;
 
     if (
-        // $FlowFixMe[invalid-compare]
         originalFullImageWidth < viewportWidth &&
-        // $FlowFixMe[invalid-compare]
         originalFullImageHeight < viewportHeight
     ) {
         this._imgScaleFactor = maxScaleFactor;
     } else if (imageAspectRatio < viewportAspectRatio) {
         this._imgScaleFactor =
-            // $FlowFixMe[unsafe-addition]
             (viewportHeight / originalFullImageHeight) * maxScaleFactor;
     } else {
         this._imgScaleFactor =