Use named Props interfaces instead of defining types inline

extensions/ql-vscode/src/view/results/locations/ClickableLocation.tsx

@@ -3,6 +3,14 @@ import { useCallback } from "react";
 import { ResolvableLocationValue } from "../../../common/bqrs-cli-types";
 import { jumpToLocation } from "../result-table-utils";
 
+interface Props {
+  loc: ResolvableLocationValue;
+  label: string;
+  databaseUri: string;
+  title?: string;
+  jumpToLocationCallback?: () => void;
+}
+
 /**
  * A clickable location link.
  */
@@ -12,13 +20,7 @@ export function ClickableLocation({
   databaseUri,
   title,
   jumpToLocationCallback,
-}: {
+}: Props): JSX.Element {
-  loc: ResolvableLocationValue;
-  label: string;
-  databaseUri: string;
-  title?: string;
-  jumpToLocationCallback?: () => void;
-}): JSX.Element {
   const jumpToLocationHandler = useCallback(
     (e: React.MouseEvent) => {
       jumpToLocation(loc, databaseUri);

extensions/ql-vscode/src/view/results/locations/Location.tsx

@@ -10,6 +10,14 @@ import { convertNonPrintableChars } from "../../../common/text-utils";
 import { NonClickableLocation } from "./NonClickableLocation";
 import { ClickableLocation } from "./ClickableLocation";
 
+interface Props {
+  loc?: UrlValue;
+  label?: string;
+  databaseUri?: string;
+  title?: string;
+  jumpToLocationCallback?: () => void;
+}
+
 /**
  * A location link. Will be clickable if a location URL and database URI are provided.
  */
@@ -19,13 +27,7 @@ export function Location({
   databaseUri,
   title,
   jumpToLocationCallback,
-}: {
+}: Props): JSX.Element {
-  loc?: UrlValue;
-  label?: string;
-  databaseUri?: string;
-  title?: string;
-  jumpToLocationCallback?: () => void;
-}): JSX.Element {
   const resolvableLoc = useMemo(() => tryGetResolvableLocation(loc), [loc]);
   const displayLabel = useMemo(() => convertNonPrintableChars(label!), [label]);
   if (loc === undefined) {

extensions/ql-vscode/src/view/results/locations/NonClickableLocation.tsx

@@ -1,16 +1,15 @@
 import * as React from "react";
 
+interface Props {
+  msg?: string;
+  locationHint?: string;
+}
+
 /**
  * A non-clickable location for when there isn't a valid link.
  * Designed to fit in with the other types of location components.
  */
-export function NonClickableLocation({
+export function NonClickableLocation({ msg, locationHint }: Props) {
-  msg,
-  locationHint,
-}: {
-  msg?: string;
-  locationHint?: string;
-}) {
   if (msg === undefined) return null;
   return <span title={locationHint}>{msg}</span>;
 }

extensions/ql-vscode/src/view/results/locations/SarifLocation.tsx

@@ -6,6 +6,14 @@ import { basename } from "path";
 import { useMemo } from "react";
 import { Location } from "./Location";
 
+interface Props {
+  text?: string;
+  loc?: Sarif.Location;
+  sourceLocationPrefix: string;
+  databaseUri: string;
+  jumpToLocationCallback: () => void;
+}
+
 /**
  * A clickable SARIF location link.
  *
@@ -18,13 +26,7 @@ export function SarifLocation({
   sourceLocationPrefix,
   databaseUri,
   jumpToLocationCallback,
-}: {
+}: Props) {
-  text?: string;
-  loc?: Sarif.Location;
-  sourceLocationPrefix: string;
-  databaseUri: string;
-  jumpToLocationCallback: () => void;
-}) {
   const parsedLoc = useMemo(
     () => loc && parseSarifLocation(loc, sourceLocationPrefix),
     [loc, sourceLocationPrefix],

extensions/ql-vscode/src/view/results/locations/SarifMessageWithLocations.tsx

@@ -3,6 +3,14 @@ import * as Sarif from "sarif";
 import { parseSarifPlainTextMessage } from "../../../common/sarif-utils";
 import { SarifLocation } from "./SarifLocation";
 
+interface Props {
+  msg: string;
+  relatedLocations: Sarif.Location[];
+  sourceLocationPrefix: string;
+  databaseUri: string;
+  jumpToLocationCallback: () => void;
+}
+
 /**
  * Parses a SARIF message and populates clickable locations.
  */
@@ -12,13 +20,7 @@ export function SarifMessageWithLocations({
   sourceLocationPrefix,
   databaseUri,
   jumpToLocationCallback,
-}: {
+}: Props) {
-  msg: string;
-  relatedLocations: Sarif.Location[];
-  sourceLocationPrefix: string;
-  databaseUri: string;
-  jumpToLocationCallback: () => void;
-}) {
   const relatedLocationsById: Map<number, Sarif.Location> = new Map();
   for (const loc of relatedLocations) {
     if (loc.id !== undefined) {