From 39ef126a9f10e7c9bac17b230e00158dc17bbaf5 Mon Sep 17 00:00:00 2001
From: Mohsen Azimi <mazimi@lyft.com>
Date: Sat, 24 Jun 2017 09:51:56 -0700
Subject: [PATCH 1/7] Upgrade to TypeScript 2.4 as well as other dependencies

---
 package.json                                   | 18 +++++++++---------
 src/compiler.ts                                |  6 ++++--
 .../react-js-make-props-and-state-transform.ts |  4 ++--
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 17d8438..b957a88 100644
--- a/package.json
+++ b/package.json
@@ -30,20 +30,20 @@
   "license": "Apache-2.0",
   "dependencies": {
     "chalk": "^1.1.3",
-    "commander": "^2.9.0",
+    "commander": "^2.10.0",
     "glob": "^7.1.2",
-    "typescript": "^2.3.2"
+    "typescript": "^2.4.0"
   },
   "devDependencies": {
     "@types/chalk": "^0.4.31",
-    "@types/commander": "^2.9.0",
+    "@types/commander": "^2.9.1",
     "@types/glob": "^5.0.30",
-    "@types/jest": "^19.2.3",
-    "@types/node": "^7.0.12",
-    "@types/react": "^15.0.21",
-    "jest": "^20.0.0",
-    "ts-jest": "^20.0.1",
-    "ts-node": "^3.0.2",
+    "@types/jest": "^20.0.2",
+    "@types/node": "^8.0.2",
+    "@types/react": "^15.0.31",
+    "jest": "^20.0.4",
+    "ts-jest": "^20.0.6",
+    "ts-node": "^3.1.0",
     "tslint": "^5.2.0"
   }
 }
diff --git a/src/compiler.ts b/src/compiler.ts
index 0762e58..6b5b0d9 100644
--- a/src/compiler.ts
+++ b/src/compiler.ts
@@ -28,8 +28,10 @@ export function compile(filePath: string, factoryFactories: TransformFactoryFact
         ======================= Diagnostics for ${filePath} =======================
         `));
         for (const diag of result.diagnostics) {
-            const pos = diag.file.getLineAndCharacterOfPosition(diag.start);
-            console.log(`(${pos.line}, ${pos.character}) ${diag.messageText}`)
+            if (diag.file && diag.start) {
+                const pos = diag.file.getLineAndCharacterOfPosition(diag.start);
+                console.log(`(${pos.line}, ${pos.character}) ${diag.messageText}`)
+            }
         }
     }
 
diff --git a/src/transforms/react-js-make-props-and-state-transform.ts b/src/transforms/react-js-make-props-and-state-transform.ts
index bc82317..6aa9d1d 100644
--- a/src/transforms/react-js-make-props-and-state-transform.ts
+++ b/src/transforms/react-js-make-props-and-state-transform.ts
@@ -222,8 +222,8 @@ export function reactJSMakePropsAndStateInterfaceTransformFactoryFactory(typeChe
                             console.warn('Bad value for propType', name, 'at', propertyAssignment.getStart());
                             return result;
                         }
-                        const typeValue = getTypeFromReactPropTypeExpression(propertyAssignment.initializer)
-                        const propertySignature = ts.createPropertySignature(name, undefined, typeValue, undefined);
+                        const typeValue = getTypeFromReactPropTypeExpression(propertyAssignment.initializer);
+                        const propertySignature = ts.createPropertySignature([], name, undefined, typeValue, undefined);
                         result.members.push(propertySignature)
                         return result;
                 }, ts.createTypeLiteralNode([]));

From fee87efd7e075bcab155ba509b49f2dc14b6f9c1 Mon Sep 17 00:00:00 2001
From: Mohsen Azimi <mazimi@lyft.com>
Date: Sat, 24 Jun 2017 10:02:23 -0700
Subject: [PATCH 2/7] Update test according to the new printer

---
 .../empty-empty/output.tsx                     |  4 +---
 test/end-to-end/basic/output.tsx               |  6 ++----
 .../propless-stateless/output.tsx              |  4 +---
 .../propless-stateless/output.tsx              |  4 +---
 .../set-state-advanced/output.tsx              | 18 ++----------------
 .../set-state-only/output.tsx                  |  9 ++-------
 .../state-in-class-member/output.tsx           |  7 ++-----
 .../state-in-constructor/output.tsx            |  8 ++------
 .../static-proptypes-many-props/output.tsx     |  6 +++---
 9 files changed, 16 insertions(+), 50 deletions(-)

diff --git a/test/collapse-intersection-interfaces-transform/empty-empty/output.tsx b/test/collapse-intersection-interfaces-transform/empty-empty/output.tsx
index c2049e0..579668f 100644
--- a/test/collapse-intersection-interfaces-transform/empty-empty/output.tsx
+++ b/test/collapse-intersection-interfaces-transform/empty-empty/output.tsx
@@ -1,3 +1 @@
-type Foo = {
-
-};
\ No newline at end of file
+type Foo = {};
diff --git a/test/end-to-end/basic/output.tsx b/test/end-to-end/basic/output.tsx
index bd07c26..02e67d4 100644
--- a/test/end-to-end/basic/output.tsx
+++ b/test/end-to-end/basic/output.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
 
-type IMyComponentProps = {
-
-};
+type IMyComponentProps = {};
 type IMyComponentState = void;
 
 export default class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
     render() {
         return <div />;
     }
-}
\ No newline at end of file
+}
diff --git a/test/react-hoist-generics-transform/propless-stateless/output.tsx b/test/react-hoist-generics-transform/propless-stateless/output.tsx
index a6b24f3..9ee56a0 100644
--- a/test/react-hoist-generics-transform/propless-stateless/output.tsx
+++ b/test/react-hoist-generics-transform/propless-stateless/output.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 
-type IMyComponentProps = {
-
-};
+type IMyComponentProps = {};
 type IMyComponentState = void;
 export default class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
     render() {
diff --git a/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx b/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx
index 3eae241..d61f77b 100644
--- a/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx
+++ b/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 
-export default class MyComponent extends React.Component<{
-
-    }, void> {
+export default class MyComponent extends React.Component<{}, void> {
     render() {
         return <div />;
     }
diff --git a/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx b/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx
index 66b9845..a254578 100644
--- a/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx
+++ b/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx
@@ -1,20 +1,6 @@
 import * as React from 'react';
 
-export default class MyComponent extends React.Component<{
-    }, {
-        foo: number;
-        bar: number;
-    } & {
-        baz: number;
-    } & {
-        something: {
-            big: number;
-            here: string;
-            of: {
-                a: number;
-            }[];
-        };
-    }> {
+export default class MyComponent extends React.Component<{}, { foo: number; bar: number; } & { baz: number; } & { something: { big: number; here: string; of: { a: number; }[]; }; }> {
     render() {
         return <button onClick={this.onclick.bind(this)}/>;
     }
@@ -43,4 +29,4 @@ export default class MyComponent extends React.Component<{
             }
         });
     }
-}
\ No newline at end of file
+}
diff --git a/test/react-js-make-props-and-state-transform/set-state-only/output.tsx b/test/react-js-make-props-and-state-transform/set-state-only/output.tsx
index 673cf59..3795804 100644
--- a/test/react-js-make-props-and-state-transform/set-state-only/output.tsx
+++ b/test/react-js-make-props-and-state-transform/set-state-only/output.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 
-export default class MyComponent extends React.Component<{
-    }, {
-        foo: number;
-        bar: number;
-    }> {
-
+export default class MyComponent extends React.Component<{}, { foo: number; bar: number; }> {
     render() {
         return <button onClick={this.onclick.bind(this)}/>;
     }
@@ -13,4 +8,4 @@ export default class MyComponent extends React.Component<{
     onclick() {
         this.setState({ foo: 1, bar: 2 });
     }
-}
\ No newline at end of file
+}
diff --git a/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx b/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx
index d17ccee..d9b4578 100644
--- a/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx
+++ b/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx
@@ -1,11 +1,8 @@
 import * as React from 'react';
 
-export default class MyComponent extends React.Component<{
-    }, {
-        foo: number;
-    }> {
+export default class MyComponent extends React.Component<{}, { foo: number; }> {
     state = { foo: 1 };
     render() {
         return <div />;
     }
-}
\ No newline at end of file
+}
diff --git a/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx b/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx
index cc2b526..0ee6051 100644
--- a/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx
+++ b/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 
-export default class MyComponent extends React.Component<{
-    }, {
-        foo: number;
-    }> {
-
+export default class MyComponent extends React.Component<{}, { foo: number; }> {
     constructor(props, context) {
         super(props, context);
         this.state = { foo: 1 };
@@ -13,4 +9,4 @@ export default class MyComponent extends React.Component<{
     render() {
         return <div />;
     }
-}
\ No newline at end of file
+}
diff --git a/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx b/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx
index 780eaa2..6c2e28c 100644
--- a/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx
+++ b/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx
@@ -4,11 +4,11 @@ export default class MyComponent extends React.Component<{
         any: any | undefined;
         array: any[] | undefined;
         bool: boolean | undefined;
-        func: (...args: any[]) => any | undefined;
+        func: ((...args: any[]) => any) | undefined;
         number: number | undefined;
         object: object | undefined;
         string: string | undefined;
-        node: number | string | JSX.Element | undefined;
+        node: (number | string | JSX.Element) | undefined;
         element: JSX.Element | undefined;
         anyRequired: any;
         arrayRequired: any[];
@@ -43,4 +43,4 @@ export default class MyComponent extends React.Component<{
     render() {
         return <div />;
     }
-}
\ No newline at end of file
+}

From 9125af61198a9cf5f30cb8e43bc92ace13d3de87 Mon Sep 17 00:00:00 2001
From: Mohsen Azimi <mazimi@lyft.com>
Date: Sat, 24 Jun 2017 10:09:03 -0700
Subject: [PATCH 3/7] Remove createTypeDeclarationStatement hack

---
 src/helpers/index.ts                             | 16 ----------------
 ...collapse-intersection-interfaces-transform.ts |  6 ++++--
 src/transforms/react-hoist-generics-transform.ts |  4 ++--
 3 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index e80fc86..18c7315 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -43,22 +43,6 @@ export function isReactComponent(classDeclaration: ts.ClassDeclaration, typeChec
     return true;
 }
 
-/**
- * A temporary hack until ts allows creating type alias declaration nodes
- * Creates a TypeAliasDeclaration
- * @param name Name of type node
- * @param type Type node
- * @param sourceFile SourceFile for context
- */
-export function createTypeDeclarationStatement(name: string, type: ts.TypeNode, sourceFile: ts.SourceFile) {
-    const printer = ts.createPrinter()
-    const typeString = printer.printNode(ts.EmitHint.Unspecified, type, sourceFile);
-    const newSource = ts.createSourceFile('temp.ts', `type ${name} = ${typeString}`, sourceFile.languageVersion);
-
-    return newSource.statements[0];
-}
-
-
 /**
  * Determine if a ts.HeritageClause is React HeritageClause
  *
diff --git a/src/transforms/collapse-intersection-interfaces-transform.ts b/src/transforms/collapse-intersection-interfaces-transform.ts
index c4483c7..f04a9d1 100644
--- a/src/transforms/collapse-intersection-interfaces-transform.ts
+++ b/src/transforms/collapse-intersection-interfaces-transform.ts
@@ -39,10 +39,12 @@ export function collapseIntersectionInterfacesTransformFactoryFactory(
                         .map((type: ts.TypeLiteralNode) => type.members)
                         .reduce((all, members) => ts.createNodeArray(all.concat(members)), ts.createNodeArray([]));
 
-                    return helpers.createTypeDeclarationStatement(
+                    return ts.createTypeAliasDeclaration(
+                        [],
+                        [],
                         node.name.text,
+                        [],
                         ts.createTypeLiteralNode(allMembers),
-                        sourceFile,
                     );
                 }
 
diff --git a/src/transforms/react-hoist-generics-transform.ts b/src/transforms/react-hoist-generics-transform.ts
index e26c42e..6466485 100644
--- a/src/transforms/react-hoist-generics-transform.ts
+++ b/src/transforms/react-hoist-generics-transform.ts
@@ -56,8 +56,8 @@ function hoist(reactClass: ts.ClassDeclaration, sourceFile: ts.SourceFile) {
     const [propType, stateType] = reactType.typeArguments;
     const propTypeName = `I${className}Props`;
     const stateTypeName = `I${className}State`;
-    const propTypeDeclaration = helpers.createTypeDeclarationStatement(propTypeName, propType, sourceFile);
-    const stateTypeDeclaration = helpers.createTypeDeclarationStatement(stateTypeName, stateType, sourceFile);
+    const propTypeDeclaration = ts.createTypeAliasDeclaration([], [], propTypeName, [], propType);
+    const stateTypeDeclaration = ts.createTypeAliasDeclaration([], [], stateTypeName, [], stateType);
     const propTypeRef = ts.createTypeReferenceNode(propTypeName, []);
     const stateTypeRef = ts.createTypeReferenceNode(stateTypeName, []);
     const newClassStatement = insertTypeRefs(reactClass, propTypeRef, stateTypeRef);

From a0e924be125d2a500b7dcd4e9b183e9d10c1a671 Mon Sep 17 00:00:00 2001
From: Mohsen Azimi <mazimi@lyft.com>
Date: Sat, 24 Jun 2017 10:10:06 -0700
Subject: [PATCH 4/7] Clean before lint

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index b957a88..42fc53b 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "test": "jest",
     "coverage": "jest --coverage",
     "posttest": "npm run lint",
+    "prelint": "npm run clean",
     "lint": "tslint --type-check --project tsconfig.json --format codeFrame --exclude test/**/*.tsx",
     "prepublish": "npm run build",
     "clean": "rm -rf dist",

From d5471191a52e2fe09a45a601bce9ab8443fb4aac Mon Sep 17 00:00:00 2001
From: Mohsen Azimi <mazimi@lyft.com>
Date: Sat, 24 Jun 2017 10:19:29 -0700
Subject: [PATCH 5/7] 1.1.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 42fc53b..710ed2a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-js-to-ts",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Convert React code from JavaScript to TypeScript",
   "main": "dist/index.js",
   "scripts": {

From a6c3b9fb842d7c52870196aae0afb17d3fd597af Mon Sep 17 00:00:00 2001
From: Mohsen Azimi <mazimi@lyft.com>
Date: Sat, 24 Jun 2017 10:34:37 -0700
Subject: [PATCH 6/7] Remove I prefix from props and state props

---
 README.md                                                 | 6 +++---
 src/transforms/react-hoist-generics-transform.ts          | 4 ++--
 test/end-to-end/basic/output.tsx                          | 6 +++---
 .../initial-state-and-proprypes-and-set-state/output.tsx  | 8 ++++----
 test/end-to-end/initial-state-and-proprypes/output.tsx    | 8 ++++----
 .../propless-stateless/output.tsx                         | 6 +++---
 .../props-and-state/output.tsx                            | 6 +++---
 7 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index c52e9e1..3e5a819 100644
--- a/README.md
+++ b/README.md
@@ -36,18 +36,18 @@ class MyComponent extends React.Component {
 
 **output**
 ```ts
-interface IMyComponentProps {
+interface MyComponentProps {
   p: string;
   r: number | undefined;
 }
 
-interface IMyComponentState {
+interface MyComponentState {
   foo: number;
   bar: string;
   baz: number | undefined;
 }
 
-class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
+class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
   constructor() {
     super();
     this.state = { foo: 1, bar: 'str' };
diff --git a/src/transforms/react-hoist-generics-transform.ts b/src/transforms/react-hoist-generics-transform.ts
index 6466485..b2aa4c3 100644
--- a/src/transforms/react-hoist-generics-transform.ts
+++ b/src/transforms/react-hoist-generics-transform.ts
@@ -54,8 +54,8 @@ function hoist(reactClass: ts.ClassDeclaration, sourceFile: ts.SourceFile) {
     }
 
     const [propType, stateType] = reactType.typeArguments;
-    const propTypeName = `I${className}Props`;
-    const stateTypeName = `I${className}State`;
+    const propTypeName = `${className}Props`;
+    const stateTypeName = `${className}State`;
     const propTypeDeclaration = ts.createTypeAliasDeclaration([], [], propTypeName, [], propType);
     const stateTypeDeclaration = ts.createTypeAliasDeclaration([], [], stateTypeName, [], stateType);
     const propTypeRef = ts.createTypeReferenceNode(propTypeName, []);
diff --git a/test/end-to-end/basic/output.tsx b/test/end-to-end/basic/output.tsx
index 02e67d4..f0b58a2 100644
--- a/test/end-to-end/basic/output.tsx
+++ b/test/end-to-end/basic/output.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-type IMyComponentProps = {};
-type IMyComponentState = void;
+type MyComponentProps = {};
+type MyComponentState = void;
 
-export default class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     render() {
         return <div />;
     }
diff --git a/test/end-to-end/initial-state-and-proprypes-and-set-state/output.tsx b/test/end-to-end/initial-state-and-proprypes-and-set-state/output.tsx
index b81e124..64338c6 100644
--- a/test/end-to-end/initial-state-and-proprypes-and-set-state/output.tsx
+++ b/test/end-to-end/initial-state-and-proprypes-and-set-state/output.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 
-type IMyComponentProps = {
+type MyComponentProps = {
     baz: string;
 };
-type IMyComponentState = {
+type MyComponentState = {
     dynamicState: number;
     foo: number;
     bar: string;
 };
-export default class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     state = { foo: 1, bar: 'str' };
     render() {
         return <div />;
@@ -16,4 +16,4 @@ export default class MyComponent extends React.Component<IMyComponentProps, IMyC
     otherFn() {
         this.setState({ dynamicState: 42 });
     }
-}
\ No newline at end of file
+}
diff --git a/test/end-to-end/initial-state-and-proprypes/output.tsx b/test/end-to-end/initial-state-and-proprypes/output.tsx
index c809b17..4a358b2 100644
--- a/test/end-to-end/initial-state-and-proprypes/output.tsx
+++ b/test/end-to-end/initial-state-and-proprypes/output.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 
-type IMyComponentProps = {
+type MyComponentProps = {
     baz: string;
 };
-type IMyComponentState = {
+type MyComponentState = {
     foo: number;
     bar: string;
 };
-export default class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     state = { foo: 1, bar: 'str' };
     render() {
         return <div />;
     }
-}
\ No newline at end of file
+}
diff --git a/test/react-hoist-generics-transform/propless-stateless/output.tsx b/test/react-hoist-generics-transform/propless-stateless/output.tsx
index 9ee56a0..904d02c 100644
--- a/test/react-hoist-generics-transform/propless-stateless/output.tsx
+++ b/test/react-hoist-generics-transform/propless-stateless/output.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-type IMyComponentProps = {};
-type IMyComponentState = void;
-export default class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
+type MyComponentProps = {};
+type MyComponentState = void;
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     render() {
         return <div />;
     }
diff --git a/test/react-hoist-generics-transform/props-and-state/output.tsx b/test/react-hoist-generics-transform/props-and-state/output.tsx
index 841ed21..dbebeed 100644
--- a/test/react-hoist-generics-transform/props-and-state/output.tsx
+++ b/test/react-hoist-generics-transform/props-and-state/output.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 
-type IMyComponentProps = {
+type MyComponentProps = {
     foo: string;
     bar: object;
 };
-type IMyComponentState = {
+type MyComponentState = {
     baz: string;
     [k: string]: string;
 };
-export default class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     render() {
         return <div />;
     }

From 8b781502a4ebaa05ca8fbe0f59fe26cb141dfd33 Mon Sep 17 00:00:00 2001
From: Mohsen Azimi <mazimi@lyft.com>
Date: Sat, 24 Jun 2017 10:38:16 -0700
Subject: [PATCH 7/7] Fix readme

---
 README.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 3e5a819..4df874c 100644
--- a/README.md
+++ b/README.md
@@ -15,15 +15,15 @@ Transforms React code written in JavaScript to TypeScript.
 ## Example
 
 **input**
-```ts
+```jsx
 class MyComponent extends React.Component {
   static propTypes = {
-    p: React.PropTypes.string.isRequired,
-    r: React.PropTypes.number
+    prop1: React.PropTypes.string.isRequired,
+    prop2: React.PropTypes.number
   }
   constructor() {
     super();
-    this.state = { foo: 1, bar: 2 };
+    this.state = { foo: 1, bar: 'str' };
   }
   render() {
     return <div>{this.state.foo}, {this.state.bar}, {this.state.baz}</div>
@@ -35,13 +35,13 @@ class MyComponent extends React.Component {
 ```
 
 **output**
-```ts
-interface MyComponentProps {
-  p: string;
-  r: number | undefined;
+```tsx
+type MyComponentProps = {
+  prop1: string;
+  prop2: number | undefined;
 }
 
-interface MyComponentState {
+type MyComponentState = {
   foo: number;
   bar: string;
   baz: number | undefined;