Upgrading TypeScript to 3.7.2 (#3295)

* updated TS * fixed many errors * added @types/node to yarn.lock * upgraded react,react-dom as devDep . Added ChangeLog entry. Fixed TS errors * Update package.json * changelog Co-authored-by: Chandler Prall <[email protected]>
elastic · Apr 15, 2020 · dd296ce · dd296ce
1 parent 971754b
commit dd296ce
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `22.6.0`.
+**Breaking changes**
+
+- Upgraded `TypeScript` to 3.7.2 ([#3295](https://github.com/elastic/eui/pull/3295))
 
 ## [`22.6.0`](https://github.com/elastic/eui/tree/v22.6.0)
 

diff --git a/package.json b/package.json
@@ -90,10 +90,11 @@
     "@types/classnames": "^2.2.6",
     "@types/highlight.js": "^9.12.3",
     "@types/jest": "^24.0.6",
-    "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.6",
     "@types/react-is": "^16.7.1",
     "@types/resize-observer-browser": "^0.1.1",
+    "@types/node": "10.17.5",
     "@types/tabbable": "^3.1.0",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
@@ -186,7 +187,7 @@
     "shelljs": "^0.8.1",
     "start-server-and-test": "^1.1.4",
     "style-loader": "^0.19.0",
-    "typescript": "3.5.3",
+    "typescript": "3.7.2",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.0.1",
     "wdio-chromedriver-service": "^0.1.2",
@@ -210,6 +211,6 @@
     "prop-types": "^15.5.0",
     "react": "^16.12",
     "react-dom": "^16.12",
-    "typescript": "^3.5.3"
+    "typescript": "^3.7.2"
   }
 }
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
@@ -236,6 +236,7 @@ function sortByColumn(
       columnSorter
         .find('EuiSwitch')
         .props()
+        // @ts-ignore-next-line
         .onChange();
     });
 

diff --git a/src/components/observer/observer.ts b/src/components/observer/observer.ts
@@ -47,6 +47,7 @@ export class EuiObserver<Props extends BaseProps> extends Component<Props> {
   };
 
   render() {
-    return this.props.children(this.updateChildNode);
+    const props: BaseProps = this.props;
+    return props.children(this.updateChildNode);
   }
 }
diff --git a/src/services/popover/popover_positioning.test.ts b/src/services/popover/popover_positioning.test.ts
@@ -37,7 +37,9 @@ describe('popover_positioning', () => {
     const origGetBoundingClientRect =
       HTMLElement.prototype.getBoundingClientRect;
     beforeEach(
-      () => (HTMLElement.prototype.getBoundingClientRect = () => clientRect)
+      () =>
+        (HTMLElement.prototype.getBoundingClientRect = () =>
+          (clientRect as unknown) as DOMRect)
     );
     afterEach(
       () =>
@@ -457,13 +459,16 @@ describe('popover_positioning', () => {
     describe('placement in desired position', () => {
       it('finds space in the requested position', () => {
         const anchor = document.createElement('div');
-        anchor.getBoundingClientRect = () => makeBB(100, 150, 120, 50);
+        anchor.getBoundingClientRect = () =>
+          (makeBB(100, 150, 120, 50) as unknown) as DOMRect;
 
         const popover = document.createElement('div');
-        popover.getBoundingClientRect = () => makeBB(0, 30, 50, 0);
+        popover.getBoundingClientRect = () =>
+          (makeBB(0, 30, 50, 0) as unknown) as DOMRect;
 
         const container = document.createElement('div');
-        container.getBoundingClientRect = () => makeBB(0, 1024, 768, 0);
+        container.getBoundingClientRect = () =>
+          (makeBB(0, 1024, 768, 0) as unknown) as DOMRect;
 
         expect(
           findPopoverPosition({
@@ -485,14 +490,17 @@ describe('popover_positioning', () => {
     describe('placement falls back to position on same axis', () => {
       it('finds space in the requested position', () => {
         const anchor = document.createElement('div');
-        anchor.getBoundingClientRect = () => makeBB(100, 150, 120, 50);
+        anchor.getBoundingClientRect = () =>
+          (makeBB(100, 150, 120, 50) as unknown) as DOMRect;
 
         const popover = document.createElement('div');
-        popover.getBoundingClientRect = () => makeBB(0, 30, 50, 0);
+        popover.getBoundingClientRect = () =>
+          (makeBB(0, 30, 50, 0) as unknown) as DOMRect;
 
         // give the container limited space on both left and top, forcing to bottom-right
         const container = document.createElement('div');
-        container.getBoundingClientRect = () => makeBB(50, 300, 768, 30);
+        container.getBoundingClientRect = () =>
+          (makeBB(50, 300, 768, 30) as unknown) as DOMRect;
 
         expect(
           findPopoverPosition({
@@ -514,14 +522,17 @@ describe('popover_positioning', () => {
     describe('placement falls back to first complementary position', () => {
       it('finds space in the requested position', () => {
         const anchor = document.createElement('div');
-        anchor.getBoundingClientRect = () => makeBB(100, 150, 120, 50);
+        anchor.getBoundingClientRect = () =>
+          (makeBB(100, 150, 120, 50) as unknown) as DOMRect;
 
         const popover = document.createElement('div');
-        popover.getBoundingClientRect = () => makeBB(0, 30, 50, 0);
+        popover.getBoundingClientRect = () =>
+          (makeBB(0, 30, 50, 0) as unknown) as DOMRect;
 
         // give the container limited space on both left and right, forcing to top
         const container = document.createElement('div');
-        container.getBoundingClientRect = () => makeBB(0, 160, 768, 40);
+        container.getBoundingClientRect = () =>
+          (makeBB(0, 160, 768, 40) as unknown) as DOMRect;
 
         expect(
           findPopoverPosition({
@@ -541,14 +552,17 @@ describe('popover_positioning', () => {
 
       it('ignores any specified alignment', () => {
         const anchor = document.createElement('div');
-        anchor.getBoundingClientRect = () => makeBB(100, 150, 120, 50);
+        anchor.getBoundingClientRect = () =>
+          (makeBB(100, 150, 120, 50) as unknown) as DOMRect;
 
         const popover = document.createElement('div');
-        popover.getBoundingClientRect = () => makeBB(0, 30, 50, 0);
+        popover.getBoundingClientRect = () =>
+          (makeBB(0, 30, 50, 0) as unknown) as DOMRect;
 
         // give the container limited space on both left and right, forcing to top
         const container = document.createElement('div');
-        container.getBoundingClientRect = () => makeBB(0, 160, 768, 40);
+        container.getBoundingClientRect = () =>
+          (makeBB(0, 160, 768, 40) as unknown) as DOMRect;
 
         expect(
           findPopoverPosition({
@@ -569,14 +583,17 @@ describe('popover_positioning', () => {
 
       it('respects forcePosition value', () => {
         const anchor = document.createElement('div');
-        anchor.getBoundingClientRect = () => makeBB(100, 150, 120, 50);
+        anchor.getBoundingClientRect = () =>
+          (makeBB(100, 150, 120, 50) as unknown) as DOMRect;
 
         const popover = document.createElement('div');
-        popover.getBoundingClientRect = () => makeBB(0, 30, 50, 0);
+        popover.getBoundingClientRect = () =>
+          (makeBB(0, 30, 50, 0) as unknown) as DOMRect;
 
         // give the container limited space on both left and right, forcing to top
         const container = document.createElement('div');
-        container.getBoundingClientRect = () => makeBB(0, 160, 768, 40);
+        container.getBoundingClientRect = () =>
+          (makeBB(0, 160, 768, 40) as unknown) as DOMRect;
 
         expect(
           findPopoverPosition({
@@ -599,14 +616,17 @@ describe('popover_positioning', () => {
     describe('placement falls back to second complementary position', () => {
       it('finds space in the requested position', () => {
         const anchor = document.createElement('div');
-        anchor.getBoundingClientRect = () => makeBB(100, 150, 120, 50);
+        anchor.getBoundingClientRect = () =>
+          (makeBB(100, 150, 120, 50) as unknown) as DOMRect;
 
         const popover = document.createElement('div');
-        popover.getBoundingClientRect = () => makeBB(0, 30, 50, 0);
+        popover.getBoundingClientRect = () =>
+          (makeBB(0, 30, 50, 0) as unknown) as DOMRect;
 
         // give the container limited space on both left, right, and top, forcing to bottom
         const container = document.createElement('div');
-        container.getBoundingClientRect = () => makeBB(100, 160, 768, 40);
+        container.getBoundingClientRect = () =>
+          (makeBB(100, 160, 768, 40) as unknown) as DOMRect;
 
         expect(
           findPopoverPosition({
@@ -633,13 +653,16 @@ describe('popover_positioning', () => {
         window.pageXOffset = 15;
 
         const anchor = document.createElement('div');
-        anchor.getBoundingClientRect = () => makeBB(100, 150, 120, 50);
+        anchor.getBoundingClientRect = () =>
+          (makeBB(100, 150, 120, 50) as unknown) as DOMRect;
 
         const popover = document.createElement('div');
-        popover.getBoundingClientRect = () => makeBB(0, 30, 50, 0);
+        popover.getBoundingClientRect = () =>
+          (makeBB(0, 30, 50, 0) as unknown) as DOMRect;
 
         const container = document.createElement('div');
-        container.getBoundingClientRect = () => makeBB(0, 1024, 768, 0);
+        container.getBoundingClientRect = () =>
+          (makeBB(0, 1024, 768, 0) as unknown) as DOMRect;
 
         expect(
           findPopoverPosition({
@@ -661,13 +684,16 @@ describe('popover_positioning', () => {
     describe('disable positioning on the cross-axis', () => {
       it('forces the popover to stay on the primary axis', () => {
         const anchor = document.createElement('div');
-        anchor.getBoundingClientRect = () => makeBB(450, 150, 550, 50);
+        anchor.getBoundingClientRect = () =>
+          (makeBB(450, 150, 550, 50) as unknown) as DOMRect;
 
         const popover = document.createElement('div');
-        popover.getBoundingClientRect = () => makeBB(0, 30, 100, 0);
+        popover.getBoundingClientRect = () =>
+          (makeBB(0, 30, 100, 0) as unknown) as DOMRect;
 
         const container = document.createElement('div');
-        container.getBoundingClientRect = () => makeBB(400, 1024, 600, 0);
+        container.getBoundingClientRect = () =>
+          (makeBB(400, 1024, 600, 0) as unknown) as DOMRect;
 
         expect(
           findPopoverPosition({
@@ -688,10 +714,12 @@ describe('popover_positioning', () => {
 
     it('returns anchorBoundingBox if param is specified', () => {
       const anchor = document.createElement('div');
-      anchor.getBoundingClientRect = () => makeBB(100, 150, 120, 50);
+      anchor.getBoundingClientRect = () =>
+        (makeBB(100, 150, 120, 50) as unknown) as DOMRect;
 
       const popover = document.createElement('div');
-      popover.getBoundingClientRect = () => makeBB(0, 30, 50, 0);
+      popover.getBoundingClientRect = () =>
+        (makeBB(0, 30, 50, 0) as unknown) as DOMRect;
 
       expect(
         findPopoverPosition({

diff --git a/yarn.lock b/yarn.lock
@@ -1268,6 +1268,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-9.3.0.tgz#3a129cda7c4e5df2409702626892cb4b96546dd5"
   integrity sha512-wNBfvNjzsJl4tswIZKXCFQY0lss9nKUyJnG6T94X/eqjRgI2jHZ4evdjhQYBSan/vGtF6XVXPApOmNH2rf0KKw==
 
+"@types/[email protected]":
+  version "10.17.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.5.tgz#c1920150f7b90708a7d0f3add12a06bc9123c055"
+  integrity sha512-RElZIr/7JreF1eY6oD5RF3kpmdcreuQPjg5ri4oQ5g9sq7YWU8HkfB3eH8GwAwxf5OaCh0VPi7r4N/yoTGelrA==
+
 "@types/numeral@^0.0.25":
   version "0.0.25"
   resolved "https://registry.yarnpkg.com/@types/numeral/-/numeral-0.0.25.tgz#b6f55062827a4787fe4ab151cf3412a468e65271"
@@ -1295,10 +1300,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^16.9.5":
-  version "16.9.5"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.5.tgz#5de610b04a35d07ffd8f44edad93a71032d9aaa7"
-  integrity sha512-BX6RQ8s9D+2/gDhxrj8OW+YD4R+8hj7FEM/OJHGNR0KipE1h1mSsf39YeyC81qafkq+N3rU3h3RFbLSwE5VqUg==
+"@types/react-dom@^16.9.6":
+  version "16.9.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.6.tgz#9e7f83d90566521cc2083be2277c6712dcaf754c"
+  integrity sha512-S6ihtlPMDotrlCJE9ST1fRmYrQNNwfgL61UB4I1W7M6kPulUKx9fXAleW5zpdIjUQ4fTaaog8uERezjsGUj9HQ==
   dependencies:
     "@types/react" "*"
 
@@ -1324,10 +1329,10 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.23":
-  version "16.9.23"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.23.tgz#1a66c6d468ba11a8943ad958a8cb3e737568271c"
-  integrity sha512-SsGVT4E7L2wLN3tPYLiF20hmZTPGuzaayVunfgXzUn1x4uHVsKH6QDJQ/TdpHqwsTLd4CwrmQ2vOgxN7gE24gw==
+"@types/react@*", "@types/react@^16.9.34":
+  version "16.9.34"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349"
+  integrity sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -15068,10 +15073,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.5.3:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.3.tgz#c830f657f93f1ea846819e929092f5fe5983e977"
-  integrity sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==
+typescript@3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.2.tgz#27e489b95fa5909445e9fef5ee48d81697ad18fb"
+  integrity sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==
 
 ua-parser-js@^0.7.18, ua-parser-js@^0.7.9:
   version "0.7.18"