Chore: Bump typescript version (#657)

docusaurus/website/package.json

@@ -28,7 +28,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.0",
     "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.7.4"
+    "typescript": "^5.4.3"
   },
   "browserslist": {
     "production": [
@@ -43,6 +43,6 @@
     ]
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   }
 }

packages/scenes-app/package.json

@@ -21,14 +21,14 @@
     "@grafana/e2e": "9.2.1",
     "@grafana/e2e-selectors": "10.3.3",
     "@grafana/eslint-config": "5.0.0",
-    "@grafana/tsconfig": "1.2.0-rc1",
+    "@grafana/tsconfig": "1.3.0-rc1",
     "@swc/core": "^1.2.144",
     "@swc/helpers": "^0.3.6",
-    "@swc/jest": "^0.2.20",
+    "@swc/jest": "^0.2.36",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^12.1.3",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.19",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.30",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
@@ -45,9 +45,9 @@
     "prettier": "^2.5.0",
     "replace-in-file-webpack-plugin": "^1.0.6",
     "swc-loader": "^0.1.15",
-    "ts-node": "^10.5.0",
-    "tsconfig-paths": "^3.12.0",
-    "typescript": "^4.4.0",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.4.3",
     "webpack": "^5.69.1",
     "webpack-cli": "^4.9.2",
     "webpack-livereload-plugin": "^3.0.2"
@@ -56,7 +56,7 @@
     "rxjs": "7.3.0"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "dependencies": {
     "@emotion/css": "^11.1.3",

packages/scenes-app/src/demos/dynamicPanelOptions.tsx

@@ -47,10 +47,10 @@ interface VizOptionsState extends SceneObjectState {
 }
 
 class VizOptions extends SceneObjectBase<VizOptionsState> {
-  private intervalId?: NodeJS.Timer;
+  private intervalId?: number;
 
   public onChange = (value: string) => {
-    clearInterval(this.intervalId);
+    window.clearInterval(this.intervalId);
     this.setState({ value });
     const viz = this.parent as VizPanel;
 
@@ -60,7 +60,7 @@ class VizOptions extends SceneObjectBase<VizOptionsState> {
         break;
       case 'random_title':
         viz.onTitleChange(getRandomSentence());
-        this.intervalId = setInterval(() => {
+        this.intervalId = window.setInterval(() => {
           viz.onTitleChange(getRandomSentence());
         }, 2000);
         break;

packages/scenes-app/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "./.config/tsconfig.json"
+  "extends": "./.config/tsconfig.json",
+  "compilerOptions": {
+    "typeRoots": ["./node_modules/@types", "../../node_modules/@types"]
+  }
 }

packages/scenes/package.json

@@ -55,20 +55,20 @@
     "@emotion/css": "11.10.5",
     "@emotion/react": "11.10.5",
     "@grafana/eslint-config": "5.1.0",
-    "@grafana/tsconfig": "^1.2.0-rc1",
+    "@grafana/tsconfig": "^1.3.0-rc1",
     "@rollup/plugin-eslint": "^9.0.3",
     "@rollup/plugin-node-resolve": "15.0.1",
     "@swc/core": "^1.2.162",
-    "@swc/jest": "^0.2.20",
+    "@swc/jest": "^0.2.36",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/history": "4.7.11",
-    "@types/jest": "29.2.3",
+    "@types/jest": "29.5.12",
     "@types/lodash": "4.14.187",
-    "@types/node": "18.11.9",
+    "@types/node": "20.11.30",
     "@types/react": "18.2.55",
     "@types/react-dom": "18.2.19",
     "@types/react-grid-layout": "1.3.2",
@@ -85,9 +85,9 @@
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^8.0.3",
-    "jest": "29.3.1",
-    "jest-environment-jsdom": "29.3.1",
-    "jest-matcher-utils": "29.3.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-matcher-utils": "29.7.0",
     "lodash": "4.17.21",
     "prettier": "2.5.1",
     "react-router-dom": "^5.2.0",
@@ -100,11 +100,11 @@
     "rollup-plugin-node-externals": "^5.0.0",
     "rollup-plugin-svg-import": "^1.6.0",
     "rxjs": "7.8.1",
-    "ts-jest": "29.0.3",
-    "ts-node": "10.9.1",
+    "ts-jest": "29.1.2",
+    "ts-node": "10.9.2",
     "tsc-watch": "^4.5.0",
-    "tslib": "2.4.1",
-    "typescript": "4.9.3"
+    "tslib": "2.6.2",
+    "typescript": "5.4.3"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [

packages/scenes/src/components/SceneApp/utils.ts

@@ -32,5 +32,6 @@ export function getUrlWithAppState(path: string, preserveParams?: string[]): str
 }
 
 export function renderSceneComponentWithRouteProps(sceneObject: SceneObject, routeProps: RouteComponentProps) {
+  // @ts-ignore
   return React.createElement(sceneObject.Component, { model: sceneObject, routeProps: routeProps });
 }

packages/scenes/src/core/sceneGraph/sceneGraph.ts

@@ -194,7 +194,7 @@ export function getAncestor<ParentType>(
     throw new Error('Unable to find parent of type ' + ancestorType.name);
   }
 
-  return parent;
+  return parent as ParentType;
 }
 
 /**
@@ -214,5 +214,5 @@ export function getQueryController(sceneObject: SceneObject): SceneQueryControll
     parent = parent.parent;
   }
 
-  return parent;
+  return undefined;
 }

packages/scenes/src/variables/groupby/GroupByVariable.tsx

@@ -4,7 +4,7 @@ import { DataSourceRef, VariableType } from '@grafana/schema';
 import { SceneComponentProps, ControlsLayout } from '../../core/types';
 import { DataQueryExtended, SceneQueryRunner } from '../../querying/SceneQueryRunner';
 import { sceneGraph } from '../../core/sceneGraph';
-import { ValidateAndUpdateResult, VariableValueOption } from '../types';
+import { ValidateAndUpdateResult, VariableValueOption, VariableValueSingle } from '../types';
 import { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from '../variants/MultiValueVariable';
 import { from, map, mergeMap, Observable, of, take } from 'rxjs';
 import { getDataSource } from '../../utils/getDataSource';
@@ -173,7 +173,7 @@ export class GroupByVariable extends MultiValueVariable<GroupByVariableState> {
   /**
    * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable
    */
-  public getDefaultMultiState(options: VariableValueOption[]) {
+  public getDefaultMultiState(options: VariableValueOption[]): { value: VariableValueSingle[]; text: string[] } {
     return { value: [], text: [] };
   }
 

packages/scenes/src/variables/variants/query/createQueryVariableRunner.ts

@@ -144,11 +144,11 @@ export function setCreateQueryVariableRunnerFactory(fn: (datasource: DataSourceA
  * Fixes old legacy query string models and adds refId if missing
  */
 function ensureVariableQueryModelIsADataQuery(variable: QueryVariable): StandardVariableQuery {
-  const query = variable.state.query;
+  const query = variable.state.query ?? '';
 
   // Turn into query object if it's just a string
-  if (!query || typeof query !== 'object') {
-    return { query: query, refId: `variable-${variable.state.name}` };
+  if (typeof query === 'string') {
+    return { query, refId: `variable-${variable.state.name}` };
   }
 
   // Add potentially missing refId

packages/scenes/tsconfig.json

@@ -4,7 +4,8 @@
     "declarationDir": "./compiled",
     "emitDeclarationOnly": true,
     "isolatedModules": true,
-    "rootDirs": ["."]
+    "rootDirs": ["."],
+    "noImplicitReturns": false,
   },
   "exclude": ["dist/**/*"],
   "include": ["utils/**/*.ts*", "src/**/*.ts*"]

tsconfig.json

@@ -1,6 +1,7 @@
 {
-  "extends": "@grafana/tsconfig",
+  "extends": "@grafana/tsconfig/base.json",
   "compilerOptions": {
+    "declaration": true,
     "declarationDir": "./compiled",
     "emitDeclarationOnly": true,
     "isolatedModules": true,