Turn on strictFunctionTypes in tsconfig and suppress errors (#1889)

I noticed that I wasn't getting type errors when I thought I should, and it turned out to be because of this setting. Issue: none ## Test plan: `yarn tsc` Author: benchristel Reviewers: jeremywiebe, handeyeco, benchristel, Myranae, nishasy, SonicScrewdriver Required Reviewers: Approved By: jeremywiebe Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x) Pull Request URL: #1889
Khan · Nov 20, 2024 · 55a5321 · 55a5321
1 parent f5ef6dd
commit 55a5321
Show file tree

Hide file tree

Showing 66 changed files with 283 additions and 104 deletions.
diff --git a/.changeset/modern-pens-complain.md b/.changeset/modern-pens-complain.md
@@ -0,0 +1,9 @@
+---
+"@khanacademy/kas": patch
+"@khanacademy/math-input": patch
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+"@khanacademy/simple-markdown": patch
+---
+
+Internal: enable strict typechecking of function parameters
diff --git a/packages/kas/src/__tests__/units.test.ts b/packages/kas/src/__tests__/units.test.ts
@@ -77,6 +77,7 @@ expect.extend({
             return {pass: false, message: () => `could not parse ${x}`};
         }
 
+        // @ts-expect-error: Type 'Expression' is not assignable to type 'Expr'.
         const equal = KAS.compare(parsedX.unit, parsedY.unit).equal;
 
         return equal
@@ -167,6 +168,7 @@ describe("units", () => {
 
         expect(
             KAS.compare(
+                // @ts-expect-error: Type 'Expression' is not assignable to type 'Expr'.
                 new KAS.Mul(new KAS.Int(50), new KAS.Unit("m")),
                 new KAS.Int(50),
             ).equal,

diff --git a/packages/kas/src/nodes.ts b/packages/kas/src/nodes.ts
@@ -313,6 +313,7 @@ abstract class Expr {
 
     // return the child nodes of this node
     exprArgs(): Expr[] {
+        // @ts-expect-error: Type 'string | number | Expr | undefined' is not assignable to type 'string | Expr'.
         return this.args().filter(isExpr);
     }
 
@@ -817,6 +818,7 @@ export class Add extends Seq {
     reduce(options?: Options): Expr {
         return _.reduce(
             this.terms,
+            // @ts-expect-error: Type 'Expr' is not assignable to type 'Num'.
             (memo, term) => {
                 return memo.add(term, options);
             },
@@ -1300,6 +1302,7 @@ export class Mul extends Seq {
     reduce(options?: {preciseFloats: boolean}) {
         return _.reduce(
             this.terms,
+            // @ts-expect-error: Type 'Expr' is not assignable to type 'Num'.
             (memo, term) => {
                 return memo.mul(term, options);
             },
@@ -1557,12 +1560,15 @@ export class Mul extends Seq {
                 return pos(num) || neg(num);
             };
 
+            // @ts-expect-error: Type 'Expr' is not assignable to type 'Num'.
             const posNum = numbers.find(pos);
+            // @ts-expect-error: Type 'Expr' is not assignable to type 'Num'.
             const negNum = numbers.find(neg);
             if (
                 numbers.length > 1 &&
                 negNum &&
                 posNum &&
+                // @ts-expect-error: Type 'Expr' is not assignable to type 'Num'.
                 _.every(numbers, posOrNeg)
             ) {
                 var firstNeg = _.indexOf(expr.terms, negNum);

diff --git a/packages/math-input/src/components/input/math-input.tsx b/packages/math-input/src/components/input/math-input.tsx
@@ -984,6 +984,8 @@ class MathInput extends React.Component<Props, State> {
                         }}
                         onTouchMove={this.handleTouchMove}
                         onTouchEnd={this.handleTouchEnd}
+                        // TODO(LEMS-2656): remove TS suppression
+                        // @ts-expect-error: Type '(e: React.MouseEvent<HTMLDivElement>) => void' is not assignable to type '(arg1: SyntheticEvent<HTMLDivElement, Event>) => void'.
                         onClick={(e: React.MouseEvent<HTMLDivElement>) => {
                             this.handleClick(e, keypadActive, setKeypadActive);
                         }}

diff --git a/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx b/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx
@@ -31,6 +31,8 @@ export function V2KeypadWithMathquill() {
                 mathFieldWrapperRef.current,
                 "en",
                 mockStrings,
+                // TODO(LEMS-2656): remove TS suppression
+                // @ts-expect-error: Type 'EditableMathQuill' is not assignable to type 'MathFieldInterface'.
                 (baseConfig) => ({
                     ...baseConfig,
                     handlers: {

diff --git a/packages/perseus-editor/src/__stories__/editor.stories.tsx b/packages/perseus-editor/src/__stories__/editor.stories.tsx
@@ -102,25 +102,29 @@ export const DemoInteractiveGraph = (): React.ReactElement => {
                             showWordCount={true}
                             warnNoPrompt={false}
                             warnNoWidgets={true}
-                            onChange={(props: Partial<PerseusRenderer>) => {
-                                action("onChange")(props);
-                                if (props.content) {
-                                    setContent(props.content);
-                                } else if (props.widgets) {
-                                    setWidgets(props.widgets);
-                                } else if (props.images) {
-                                    setImages(props.images);
-                                }
-                                // We need to wait for one tick so that the editor
-                                // has been re-rendered with the changed props. If
-                                // we don't wait, we get the values from the n-1
-                                // render and miss the latest change.
-                                setTimeout(() => {
-                                    setOptions(
-                                        editorRef.current?.serialize() || {},
-                                    );
-                                }, 0);
-                            }}
+                            // TODO(LEMS-2656): remove TS suppression
+                            onChange={
+                                ((props: Partial<PerseusRenderer>) => {
+                                    action("onChange")(props);
+                                    if (props.content) {
+                                        setContent(props.content);
+                                    } else if (props.widgets) {
+                                        setWidgets(props.widgets);
+                                    } else if (props.images) {
+                                        setImages(props.images);
+                                    }
+                                    // We need to wait for one tick so that the editor
+                                    // has been re-rendered with the changed props. If
+                                    // we don't wait, we get the values from the n-1
+                                    // render and miss the latest change.
+                                    setTimeout(() => {
+                                        setOptions(
+                                            editorRef.current?.serialize() ||
+                                                {},
+                                        );
+                                    }, 0);
+                                }) as any
+                            }
                         />
                     </View>
                 }

diff --git a/packages/perseus-editor/src/article-editor.tsx b/packages/perseus-editor/src/article-editor.tsx
@@ -242,10 +242,13 @@ export default class ArticleEditor extends React.Component<Props, State> {
                                     {...section}
                                     apiOptions={apiOptions}
                                     imageUploader={imageUploader}
-                                    onChange={_.partial(
-                                        this._handleEditorChange,
-                                        i,
-                                    )}
+                                    // TODO(LEMS-2656): remove TS suppression
+                                    onChange={
+                                        _.partial(
+                                            this._handleEditorChange,
+                                            i,
+                                        ) as any
+                                    }
                                     placeholder="Type your section text here..."
                                     ref={"editor" + i}
                                 />

diff --git a/packages/perseus-editor/src/components/__stories__/color-select.stories.tsx b/packages/perseus-editor/src/components/__stories__/color-select.stories.tsx
@@ -36,7 +36,8 @@ export const Controlled = {
         return (
             <ColorSelect
                 selectedValue={selectedValue}
-                onChange={handleColorChange}
+                // TODO(LEMS-2656): remove TS suppression
+                onChange={handleColorChange as any}
             />
         );
     },

diff --git a/packages/perseus-editor/src/components/graph-settings.tsx b/packages/perseus-editor/src/components/graph-settings.tsx
@@ -121,7 +121,11 @@ const GraphSettings = createReactClass({
         };
     },
 
+    // TODO(benchristel): Refactor this component to be an ES6 class, so we can
+    // type change as ChangeFn.
     change(...args) {
+        // TODO(LEMS-2656): remove TS suppression
+        // @ts-expect-error: Argument of type 'any[]' is not assignable to parameter of type '[newPropsOrSinglePropName: string | { [key: string]: any; }, propValue?: any, callback?: (() => unknown) | undefined]'. Target requires 1 element(s) but source may have fewer.
         return Changeable.change.apply(this, args);
     },
 

diff --git a/packages/perseus-editor/src/editor.tsx b/packages/perseus-editor/src/editor.tsx
@@ -634,6 +634,7 @@ class Editor extends React.Component<Props, State> {
         return safeWidgetMapping;
     };
 
+    // @ts-expect-error: Types of parameter 'widgetType' and 'widgetType' are incompatible. Type 'string' is not assignable to type '"cs-program" | "iframe" | "table" | "video" | "image" | "deprecated-standin" | "categorizer" | "definition" | "dropdown" | "explanation" | "expression" | "graded-group" | "graded-group-set" | ... 20 more ... | "radio"'.
     _addWidgetToContent: (
         oldContent: string,
         cursorRange: ReadonlyArray<number>,

diff --git a/packages/perseus-editor/src/widgets/__stories__/expression-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/expression-editor.stories.tsx
@@ -59,11 +59,14 @@ class WithDebug extends React.Component<Empty, State> {
                 <div className={css(styles.editorWrapper)}>
                     <ExpressionEditor
                         {...this.state}
-                        onChange={(props: PerseusExpressionWidgetOptions) => {
-                            this.setState({
-                                ...props,
-                            });
-                        }}
+                        // TODO(LEMS-2656): remove TS suppression
+                        onChange={
+                            ((props: PerseusExpressionWidgetOptions) => {
+                                this.setState({
+                                    ...props,
+                                });
+                            }) as any
+                        }
                     />
                 </div>
                 <RendererWithDebugUI

diff --git a/packages/perseus-editor/src/widgets/cs-program-editor.tsx b/packages/perseus-editor/src/widgets/cs-program-editor.tsx
@@ -19,6 +19,8 @@ import _ from "underscore";
 
 import BlurInput from "../components/blur-input";
 
+type ChangeFn = typeof Changeable.change;
+
 const {InfoTip} = components;
 
 const DEFAULT_WIDTH = 400;
@@ -39,7 +41,7 @@ class PairEditor extends React.Component<any> {
         value: "",
     };
 
-    change = (...args) => {
+    change: ChangeFn = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
@@ -84,7 +86,7 @@ class PairsEditor extends React.Component<any> {
         ).isRequired,
     };
 
-    change = (...args) => {
+    change: ChangeFn = (...args) => {
         return Changeable.change.apply(this, args);
     };
 

diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx
@@ -27,6 +27,8 @@ import type {
     LegacyButtonSets,
 } from "@khanacademy/perseus";
 
+type ChangeFn = typeof Changeable.change;
+
 const {InfoTip} = components;
 
 type Props = {
@@ -109,9 +111,9 @@ class ExpressionEditor extends React.Component<Props, State> {
         };
     }
 
-    change(...args) {
+    change: ChangeFn = (...args) => {
         return Changeable.change.apply(this, args);
-    }
+    };
 
     serialize: () => any = () => {
         const formSerializables = [
@@ -356,6 +358,7 @@ class ExpressionEditor extends React.Component<Props, State> {
                     buttonSets: this.props.buttonSets,
                     buttonsVisible: "focused",
                     value: ans.value,
+                    // @ts-expect-error: Type '(props: React.ComponentProps<typeof Expression>) => void' is not assignable to type 'ChangeHandler'. Types of parameters 'props' and 'arg1' are incompatible.
                     onChange: (
                         props: React.ComponentProps<typeof Expression>,
                     ) => this.changeExpressionWidget(key, props),
@@ -553,7 +556,7 @@ class AnswerOption extends React.Component<
 > {
     state = {deleteFocused: false};
 
-    change = (...args) => {
+    change: ChangeFn = (...args) => {
         return Changeable.change.apply(this, args);
     };
 

diff --git a/packages/perseus-editor/src/widgets/iframe-editor.tsx b/packages/perseus-editor/src/widgets/iframe-editor.tsx
@@ -7,6 +7,8 @@ import _ from "underscore";
 
 import BlurInput from "../components/blur-input";
 
+type ChangeFn = typeof Changeable.change;
+
 type PairEditorProps = any;
 
 /**
@@ -24,7 +26,7 @@ class PairEditor extends React.Component<PairEditorProps> {
         value: "",
     };
 
-    change = (...args) => {
+    change: ChangeFn = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
@@ -70,7 +72,7 @@ class PairsEditor extends React.Component<PairsEditorProps> {
         ).isRequired,
     };
 
-    change = (...args) => {
+    change: ChangeFn = (...args) => {
         return Changeable.change.apply(this, args);
     };
 

diff --git a/packages/perseus-editor/src/widgets/image-editor.tsx b/packages/perseus-editor/src/widgets/image-editor.tsx
@@ -14,6 +14,8 @@ import Editor from "../editor";
 
 import type {APIOptions, Range, Size} from "@khanacademy/perseus";
 
+type ChangeFn = typeof Changeable.change;
+
 const {InfoTip, InlineIcon, RangeInput} = components;
 
 const defaultBoxSize = 400;
@@ -159,9 +161,9 @@ class ImageEditor extends React.Component<Props> {
         );
     }
 
-    change(...args) {
+    change: ChangeFn = (...args) => {
         return Changeable.change.apply(this, args);
-    }
+    };
 
     removeLabel(labelIndex, e) {
         e.preventDefault();

diff --git a/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx b/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx
@@ -31,6 +31,8 @@ export default function MathquillInput(props: Props) {
                 mathFieldWrapperRef.current,
                 locale,
                 strings,
+                // TODO(LEMS-2656): remove TS suppression
+                // @ts-expect-error: Types of parameters 'mathField' and 'mq' are incompatible. Type 'EditableMathQuill | BaseMathQuill' is not assignable to type 'MathFieldInterface'.
                 (baseConfig) => ({
                     ...baseConfig,
                     handlers: {

diff --git a/packages/perseus-editor/src/widgets/interaction-editor/movable-line-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/movable-line-editor.tsx
@@ -10,6 +10,8 @@ import _ from "underscore";
 import ConstraintEditor from "./constraint-editor";
 import MathquillInput from "./mathquill-input";
 
+type ChangeFn = typeof Changeable.change;
+
 const {NumberInput} = components;
 const {getDependencies} = Dependencies;
 
@@ -53,7 +55,7 @@ class MovableLineEditor extends React.Component<Props> {
         constraintYMax: "10",
     };
 
-    change = (...args) => {
+    change: ChangeFn = (...args) => {
         return Changeable.change.apply(this, args);
     };
 

diff --git a/packages/perseus-editor/src/widgets/interaction-editor/movable-point-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/movable-point-editor.tsx
@@ -10,6 +10,8 @@ import _ from "underscore";
 import ConstraintEditor from "./constraint-editor";
 import MathquillInput from "./mathquill-input";
 
+type ChangeFn = typeof Changeable.change;
+
 const {NumberInput} = components;
 const {getDependencies} = Dependencies;
 
@@ -46,7 +48,7 @@ class MovablePointEditor extends React.Component<Props> {
         constraintYMax: "10",
     };
 
-    change = (...args) => {
+    change: ChangeFn = (...args) => {
         return Changeable.change.apply(this, args);
     };
 

diff --git a/...eus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx b/...eus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
@@ -21,6 +21,8 @@ import LabeledRow from "../locked-figures/labeled-row";
 
 import type {PerseusImageBackground} from "@khanacademy/perseus";
 
+type ChangeFn = typeof Changeable.change;
+
 const {ButtonGroup, InfoTip, RangeInput} = components;
 
 const defaultBackgroundImage = {
@@ -175,7 +177,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
         this._isMounted = false;
     }
 
-    change = (...args) => {
+    change: ChangeFn = (...args) => {
         return Changeable.change.apply(this, args);
     };