Chore: Typecheck TypeScript in CI pipelines (#23052)

* circle-test-frontend.sh: Typecheck TypeScript
* Chore: fixes type errors
Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

packages/grafana-data/src/dataframe/processDataFrame.test.ts

@@ -7,7 +7,7 @@ import {
   toDataFrame,
   toLegacyResponseData,
 } from './processDataFrame';
-import { DataFrameDTO, FieldType, TableData, TimeSeries } from '../types/index';
+import { DataFrameDTO, FieldType, QueryResultMeta, TableData, TimeSeries } from '../types/index';
 import { dateTime } from '../datetime/moment_wrapper';
 import { MutableDataFrame } from './MutableDataFrame';
 
@@ -227,9 +227,9 @@ describe('SerisData backwards compatibility', () => {
   it('can convert DataFrame to TableData to series and back again', () => {
     const json: DataFrameDTO = {
       refId: 'Z',
-      meta: {
-        somethign: 8,
-      },
+      meta: ({
+        something: 8,
+      } as unknown) as QueryResultMeta,
       fields: [
         { name: 'T', type: FieldType.time, values: [1, 2, 3] },
         { name: 'N', type: FieldType.number, config: { filterable: true }, values: [100, 200, 300] },

packages/grafana-data/src/field/displayProcessor.test.ts

 import { getDisplayProcessor } from './displayProcessor';
 import { DisplayProcessor, DisplayValue } from '../types/displayValue';
-import { ValueMapping, MappingType } from '../types/valueMapping';
-import { FieldType, Threshold, GrafanaTheme, Field, FieldConfig, ThresholdsMode } from '../types';
+import { MappingType, ValueMapping } from '../types/valueMapping';
+import { Field, FieldConfig, FieldType, GrafanaTheme, Threshold, ThresholdsMode } from '../types';
 import { getScaleCalculator, sortThresholds } from './scale';
 import { ArrayVector } from '../vector';
 import { validateFieldConfig } from './fieldOverrides';
@@ -210,7 +210,7 @@ describe('Format value', () => {
     const instance = getDisplayProcessorFromConfig({
       thresholds: {
         mode: ThresholdsMode.Absolute,
-        steps: [{ index: 0, value: -Infinity, color: '#AAA' }],
+        steps: [{ value: -Infinity, color: '#AAA' }],
       },
     });
     const disp = instance(null);

packages/grafana-data/src/field/fieldDisplay.test.ts

@@ -4,7 +4,7 @@ import { toDataFrame } from '../dataframe/processDataFrame';
 import { ReducerID } from '../transformations/fieldReducer';
 import { ThresholdsMode } from '../types/thresholds';
 import { GrafanaTheme } from '../types/theme';
-import { MappingType, FieldConfig } from '../types';
+import { FieldConfig, MappingType } from '../types';
 import { validateFieldConfig } from './fieldOverrides';
 import { standardFieldConfigEditorRegistry } from './standardFieldConfigEditorRegistry';
 
@@ -203,6 +203,7 @@ describe('FieldDisplay', () => {
       ];
       const options = createDisplayOptions({
         fieldOptions: {
+          calcs: [ReducerID.first],
           values: true,
           override: {},
           defaults: {

packages/grafana-data/src/field/fieldDisplay.ts

@@ -4,18 +4,19 @@ import isEmpty from 'lodash/isEmpty';
 import { getDisplayProcessor } from './displayProcessor';
 import { getFlotPairs } from '../utils/flotPairs';
 import {
-  FieldConfig,
   DataFrame,
-  FieldType,
   DisplayValue,
   DisplayValueAlignmentFactors,
+  FieldConfig,
   FieldConfigSource,
+  FieldType,
   InterpolateFunction,
+  ValueMapping,
 } from '../types';
 import { DataFrameView } from '../dataframe/DataFrameView';
 import { GraphSeriesValue } from '../types/graph';
 import { GrafanaTheme } from '../types/theme';
-import { ReducerID, reduceField } from '../transformations/fieldReducer';
+import { reduceField, ReducerID } from '../transformations/fieldReducer';
 import { ScopedVars } from '../types/ScopedVars';
 import { getTimeField } from '../dataframe/processDataFrame';
 
@@ -24,6 +25,10 @@ export interface FieldDisplayOptions {
   values?: boolean; // If true show each row value
   limit?: number; // if showing all values limit
   calcs: string[]; // when !values, pick one value for the whole field
+  override?: any;
+  defaults?: {
+    mappings: ValueMapping[];
+  };
 }
 
 // TODO: use built in variables, same as for data links?

scripts/circle-test-frontend.sh

@@ -5,8 +5,10 @@ source "$(dirname "$0")/helpers/exit-if-fail.sh"
 
 start=$(date +%s)
 
-exit_if_fail npm run prettier:check
-exit_if_fail npm run test
+exit_if_fail yarn run prettier:check
+exit_if_fail yarn run packages:typecheck
+exit_if_fail yarn run typecheck
+exit_if_fail yarn run test
 
 end=$(date +%s)
 seconds=$((end - start))