Enable some TS consistency lints

frontend/.eslintrc.js

@@ -73,8 +73,12 @@ module.exports = {
 		"@typescript-eslint/camelcase": "off",
 		"@typescript-eslint/no-use-before-define": "off",
 		"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", ignoreRestSiblings: true }],
-		"@typescript-eslint/explicit-function-return-type": ["error"],
+		"@typescript-eslint/explicit-function-return-type": "error",
 		"@typescript-eslint/consistent-type-imports": "error",
+		"@typescript-eslint/consistent-type-definitions": ["error", "type"],
+		"@typescript-eslint/consistent-type-assertions": ["error", { assertionStyle: "as", objectLiteralTypeAssertions: "never" }],
+		"@typescript-eslint/consistent-indexed-object-style": ["error", "record"],
+		"@typescript-eslint/consistent-generic-constructors": ["error", "constructor"],
 
 		// Import plugin config (used to intelligently validate module import statements)
 		"import/prefer-default-export": "off",

frontend/src/App.vue

@@ -248,6 +248,7 @@ const managerDestructors: {
 // Vue injects don't play well with TypeScript (all injects will show up as `any`) but we can define these types as a solution
 declare module "@vue/runtime-core" {
 	// Systems `provide`d by the root App to be `inject`ed into descendant components and used for reactive bindings
+	// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 	interface ComponentCustomProperties {
 		// Graphite WASM editor instance
 		editor: Editor;

frontend/src/components/panels/Document.vue

@@ -404,6 +404,12 @@ export default defineComponent({
 		window.dispatchEvent(new Event("resize"));
 	},
 	data() {
+		const scrollbarPos: XY = { x: 0.5, y: 0.5 };
+		const scrollbarSize: XY = { x: 0.5, y: 0.5 };
+		const scrollbarMultiplier: XY = { x: 0, y: 0 };
+
+		const rulerOrigin: XY = { x: 0, y: 0 };
+
 		return {
 			// Interactive text editing
 			textInput: undefined as undefined | HTMLDivElement,
@@ -414,12 +420,12 @@ export default defineComponent({
 			canvasCursor: "default" as MouseCursorIcon,
 
 			// Scrollbars
-			scrollbarPos: { x: 0.5, y: 0.5 } as XY,
+			scrollbarPos,
-			scrollbarSize: { x: 0.5, y: 0.5 } as XY,
+			scrollbarSize,
-			scrollbarMultiplier: { x: 0, y: 0 } as XY,
+			scrollbarMultiplier,
 
 			// Rulers
-			rulerOrigin: { x: 0, y: 0 } as XY,
+			rulerOrigin,
 			rulerSpacing: 100 as number,
 			rulerInterval: 100 as number,
 

frontend/src/components/widgets/buttons/TextButton.ts

@@ -1,18 +0,0 @@
-// TODO: Try and get rid of the need for this file
-
-export interface TextButtonWidget {
-	tooltip?: string;
-	message?: string | object;
-	callback?: () => void;
-	props: {
-		kind: "TextButton";
-		label: string;
-		icon?: string;
-		emphasized?: boolean;
-		minWidth?: number;
-		disabled?: boolean;
-
-		// Callbacks
-		// `action` is used via `IconButtonWidget.callback`
-	};
-}

frontend/src/components/widgets/buttons/TextButton.vue

@@ -62,6 +62,7 @@
 }
 </style>
 
+
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 
@@ -70,6 +71,23 @@ import { type IconName } from "@/utility-functions/icons";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
+export type TextButtonWidget = {
+	tooltip?: string;
+	message?: string | object;
+	callback?: () => void;
+	props: {
+		kind: "TextButton";
+		label: string;
+		icon?: string;
+		emphasized?: boolean;
+		minWidth?: number;
+		disabled?: boolean;
+
+		// Callbacks
+		// `action` is used via `IconButtonWidget.callback`
+	};
+};
+
 export default defineComponent({
 	props: {
 		label: { type: String as PropType<string>, required: true },

frontend/src/io-managers/panic.ts

@@ -1,10 +1,9 @@
-import { type TextButtonWidget } from "@/components/widgets/buttons/TextButton";
 import { type DialogState } from "@/state-providers/dialog";
 import { type IconName } from "@/utility-functions/icons";
 import { browserVersion, operatingSystem } from "@/utility-functions/platform";
 import { stripIndents } from "@/utility-functions/strip-indents";
 import { type Editor } from "@/wasm-communication/editor";
-import { type WidgetLayout, Widget, DisplayDialogPanic } from "@/wasm-communication/messages";
+import { type TextButtonWidget, type WidgetLayout, Widget, DisplayDialogPanic } from "@/wasm-communication/messages";
 
 export function createPanicManager(editor: Editor, dialogState: DialogState): void {
 	// Code panic dialog and console error

frontend/src/io-managers/persistence.ts

@@ -40,7 +40,7 @@ export async function createPersistenceManager(editor: Editor, portfolio: Portfo
 	});
 
 	// Open the IndexedDB database connection and save it to this variable, which is a promise that resolves once the connection is open
-	const databaseConnection: Promise<IDBDatabase> = new Promise((resolve) => {
+	const databaseConnection = new Promise<IDBDatabase>((resolve) => {
 		const dbOpenRequest = indexedDB.open(GRAPHITE_INDEXED_DB_NAME, GRAPHITE_INDEXED_DB_VERSION);
 
 		dbOpenRequest.onupgradeneeded = (): void => {

frontend/src/state-providers/dialog.ts

@@ -1,9 +1,8 @@
 import { reactive, readonly } from "vue";
 
-import { type TextButtonWidget } from "@/components/widgets/buttons/TextButton";
 import { type IconName } from "@/utility-functions/icons";
 import { type Editor } from "@/wasm-communication/editor";
-import { defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails, type WidgetLayout } from "@/wasm-communication/messages";
+import { type TextButtonWidget, type WidgetLayout, defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails } from "@/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDialogState(editor: Editor) {

frontend/src/state-providers/fonts.ts

@@ -57,11 +57,11 @@ export function createFontsState(editor: Editor) {
 		}
 	});
 
-	const fontList: Promise<{ family: string; variants: string[]; files: Map<string, string> }[]> = new Promise((resolve) => {
+	const fontList = new Promise<{ family: string; variants: string[]; files: Map<string, string> }[]>((resolve) => {
 		fetch(fontListAPI)
 			.then((response) => response.json())
 			.then((fontListResponse) => {
-				const fontListData = fontListResponse.items as { family: string; variants: string[]; files: { [name: string]: string } }[];
+				const fontListData = fontListResponse.items as { family: string; variants: string[]; files: Record<string, string> }[];
 				const result = fontListData.map((font) => {
 					const { family } = font;
 					const variants = font.variants.map(formatFontStyleName);

frontend/src/wasm-communication/messages.ts

@@ -241,10 +241,10 @@ export class UpdateDocumentLayerTreeStructure extends JsMessage {
 	}
 }
 
-interface DataBuffer {
+type DataBuffer = {
 	pointer: bigint;
 	length: bigint;
-}
+};
 
 export function newUpdateDocumentLayerTreeStructure(input: { dataBuffer: DataBuffer }, wasm: WasmRawInstance): UpdateDocumentLayerTreeStructure {
 	const pointerNum = Number(input.dataBuffer.pointer);
@@ -519,7 +519,7 @@ export class PopoverButton extends WidgetProps {
 	text!: string;
 }
 
-export interface RadioEntryData {
+export type RadioEntryData = {
 	value?: string;
 	label?: string;
 	icon?: IconName;
@@ -527,7 +527,7 @@ export interface RadioEntryData {
 
 	// Callbacks
 	action?: () => void;
-}
+};
 export type RadioEntries = RadioEntryData[];
 
 export class RadioInput extends WidgetProps {
@@ -573,6 +573,23 @@ export class TextButton extends WidgetProps {
 	disabled!: boolean;
 }
 
+export type TextButtonWidget = {
+	tooltip?: string;
+	message?: string | object;
+	callback?: () => void;
+	props: {
+		kind: "TextButton";
+		label: string;
+		icon?: string;
+		emphasized?: boolean;
+		minWidth?: number;
+		disabled?: boolean;
+
+		// Callbacks
+		// `action` is used via `IconButtonWidget.callback`
+	};
+};
+
 export class TextInput extends WidgetProps {
 	value!: string;
 
@@ -645,10 +662,10 @@ function hoistWidgetHolders(widgetHolders: any[]): Widget[] {
 
 // WIDGET LAYOUT
 
-export interface WidgetLayout {
+export type WidgetLayout = {
 	layoutTarget: unknown;
 	layout: LayoutGroup[];
-}
+};
 
 export function defaultWidgetLayout(): WidgetLayout {
 	return {

frontend/src/wasm-communication/subscription-router.ts

@@ -4,12 +4,10 @@ import { type WasmEditorInstance, type WasmRawInstance } from "@/wasm-communicat
 import { type JsMessageType, messageMakers, type JsMessage } from "@/wasm-communication/messages";
 
 type JsMessageCallback<T extends JsMessage> = (messageData: T) => void;
-type JsMessageCallbackMap = {
+// Don't know a better way of typing this since it can be any subclass of JsMessage
-	// Don't know a better way of typing this since it can be any subclass of JsMessage
+// The functions interacting with this map are strongly typed though around JsMessage
-	// The functions interacting with this map are strongly typed though around JsMessage
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type JsMessageCallbackMap = Record<string, JsMessageCallback<any> | undefined>;
-	[message: string]: JsMessageCallback<any> | undefined;
-};
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createSubscriptionRouter() {