fix new TS errors

src/components/Context.vue

@@ -11,7 +11,7 @@ import {
     BoundsInjectionKey
 } from "game/layers";
 import type { FeatureNode } from "game/layers";
-import { nextTick, onMounted, provide, ref } from "vue";
+import { Ref, nextTick, onMounted, provide, ref } from "vue";
 import { globalBus } from "game/events";
 
 const emit = defineEmits<{
@@ -21,7 +21,7 @@ const emit = defineEmits<{
 const nodes = ref<Record<string, FeatureNode | undefined>>({});
 
 const resizeObserver = new ResizeObserver(updateBounds);
-const resizeListener = ref<Element | null>(null);
+const resizeListener = ref<Element | null>(null) as Ref<Element | null>;
 onMounted(() => {
     // ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element
     const resListener = resizeListener.value;
@@ -30,7 +30,7 @@ onMounted(() => {
     }
 });
 let isDirty = true;
-let boundingRect = ref(resizeListener.value?.getBoundingClientRect());
+const boundingRect = ref(resizeListener.value?.getBoundingClientRect());
 function updateBounds() {
     if (isDirty) {
         isDirty = false;

src/components/Options.vue

@@ -4,8 +4,15 @@
             <div class="header">
                 <h2>Settings</h2>
                 <div class="option-tabs">
-                    <button :class="{selected: isTab('behaviour')}" @click="setTab('behaviour')">Behaviour</button>
+                    <button :class="{ selected: isTab('behaviour') }" @click="setTab('behaviour')">
-                    <button :class="{selected: isTab('appearance')}" @click="setTab('appearance')">Appearance</button>
+                        Behaviour
+                    </button>
+                    <button
+                        :class="{ selected: isTab('appearance') }"
+                        @click="setTab('appearance')"
+                    >
+                        Appearance
+                    </button>
                 </div>
             </div>
         </template>
@@ -15,7 +22,9 @@
                 <Toggle v-if="projInfo.enablePausing" :title="isPausedTitle" v-model="isPaused" />
                 <Toggle :title="offlineProdTitle" v-model="offlineProd" />
                 <Toggle :title="autosaveTitle" v-model="autosave" />
-                <FeedbackButton v-if="!autosave" class="button save-button" @click="save()">Manually save</FeedbackButton>
+                <FeedbackButton v-if="!autosave" class="button save-button" @click="save()"
+                    >Manually save</FeedbackButton
+                >
             </div>
             <div v-if="isTab('appearance')">
                 <Select :title="themeTitle" :options="themes" v-model="theme" />
@@ -69,7 +78,7 @@ const themes = Object.keys(rawThemes).map(theme => ({
 }));
 
 const settingFieldsComponent = computed(() => {
-    return coerceComponent(jsx(() => (<>{settingFields.map(render)}</>)));
+    return coerceComponent(jsx(() => <>{settingFields.map(render)}</>));
 });
 
 const { showTPS, theme, unthrottled, alignUnits } = toRefs(settings);
@@ -91,19 +100,28 @@ const unthrottledTitle = jsx(() => (
 ));
 const offlineProdTitle = jsx(() => (
     <span class="option-title">
-        Offline Production<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        Offline Production
+        <Tooltip display="Save-specific" direction={Direction.Right}>
+            *
+        </Tooltip>
         <desc>Simulate production that occurs while the game is closed.</desc>
     </span>
 ));
 const autosaveTitle = jsx(() => (
     <span class="option-title">
-        Autosave<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        Autosave
+        <Tooltip display="Save-specific" direction={Direction.Right}>
+            *
+        </Tooltip>
         <desc>Automatically save the game every second or when the game is closed.</desc>
     </span>
 ));
 const isPausedTitle = jsx(() => (
     <span class="option-title">
-        Pause game<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        Pause game
+        <Tooltip display="Save-specific" direction={Direction.Right}>
+            *
+        </Tooltip>
         <desc>Stop everything from moving.</desc>
     </span>
 ));

src/features/action.tsx

@@ -30,7 +30,7 @@ import { coerceComponent, isCoercableComponent, render } from "util/vue";
 import { computed, Ref, ref, unref } from "vue";
 import { BarOptions, createBar, GenericBar } from "./bars/bar";
 import { ClickableOptions } from "./clickables/clickable";
-import { Decorator, GenericDecorator } from "./decorators/common";
+import { GenericDecorator } from "./decorators/common";
 
 /** A symbol used to identify {@link Action} features. */
 export const ActionType = Symbol("Action");

src/features/particles/Particles.vue

@@ -47,7 +47,8 @@ export default defineComponent({
                     resizeTo: resListener,
                     backgroundAlpha: 0
                 });
-                resizeListener.value?.appendChild(app.value.view);
+                // I think it's supporsed to be a canvas element
+                resizeListener.value?.appendChild(app.value.view as HTMLCanvasElement);
                 props.onInit?.(app.value as Application);
             }
             updateBounds();

src/game/requirements.tsx

@@ -19,7 +19,7 @@ import { createLazyProxy } from "util/proxies";
 import { joinJSX, renderJSX } from "util/vue";
 import { computed, unref } from "vue";
 import Formula, { calculateCost, calculateMaxAffordable } from "./formulas/formulas";
-import type { GenericFormula, InvertibleFormula } from "./formulas/types";
+import type { GenericFormula } from "./formulas/types";
 import { DefaultValue, Persistent } from "./persistence";
 
 /**

src/lib/pixi.ts

@@ -1,7 +0,0 @@
-import { Application } from "@pixi/app";
-import { BatchRenderer, Renderer } from "@pixi/core";
-import { TickerPlugin } from "@pixi/ticker";
-
-Application.registerPlugin(TickerPlugin);
-
-Renderer.registerPlugin("batch", BatchRenderer);

src/util/vue.tsx

@@ -125,7 +125,9 @@ export function setupHoldToClick(
     handleHolding: VoidFunction;
 } {
     const interval = ref<NodeJS.Timer | null>(null);
-    const event = ref<MouseEvent | TouchEvent | undefined>(undefined);
+    const event = ref<MouseEvent | TouchEvent | undefined>(undefined) as Ref<
+        MouseEvent | TouchEvent | undefined
+    >;
 
     function start(e: MouseEvent | TouchEvent) {
         if (!interval.value) {

tests/utils.ts

@@ -1,5 +1,5 @@
 import Decimal, { DecimalSource, format } from "util/bignum";
-import { expect, Assertion } from "vitest";
+import { expect } from "vitest";
 
 interface CustomMatchers<R = unknown> {
     compare_tolerance(expected: DecimalSource, tolerance?: number): R;