From eb5efcaf996b0efc6f6222f30a448f9f8ba83eeb Mon Sep 17 00:00:00 2001
From: James Adarich <jamesrichford@googlemail.com>
Date: Mon, 26 Aug 2019 16:12:11 +0100
Subject: [PATCH] Add missing typings for Component constructor (#37897)

* add tests for missing constructor and Indent types

* add missing typings

* Improve props typings

* Add missing prop
---
 types/ink/index.d.ts    |  6 ++++++
 types/ink/ink-tests.tsx | 18 ++++++++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/types/ink/index.d.ts b/types/ink/index.d.ts
index 23f4fe5d80..d098278005 100644
--- a/types/ink/index.d.ts
+++ b/types/ink/index.d.ts
@@ -1,6 +1,7 @@
 // Type definitions for ink 0.5
 // Project: https://github.com/vadimdemedes/ink#readme
 // Definitions by: Carlos Precioso <https://github.com/cprecioso>
+//                 James Adarich <https://github.com/jamesadarich>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -61,6 +62,9 @@ export abstract class Component<
 > {
     readonly props: P & { children?: InkNode };
     readonly context: C;
+    state: S;
+
+    constructor(props?: P);
 
     setState(
         nextState:
@@ -122,6 +126,8 @@ export namespace h {
 }
 export const Fragment: typeof h.Fragment;
 
+export const Indent: ComponentClass;
+
 export const Color: ComponentClass<{
     rgb?: [number, number, number];
     hsl?: [number, number, number];
diff --git a/types/ink/ink-tests.tsx b/types/ink/ink-tests.tsx
index 3d5d07febc..bdee66baa7 100644
--- a/types/ink/ink-tests.tsx
+++ b/types/ink/ink-tests.tsx
@@ -1,19 +1,25 @@
 // @jsx h
 
-import { Color, Component, Fragment, render } from "ink";
+import { Color, Component, Fragment, Indent, render } from "ink";
 
-class Counter extends Component<{}, { i: number }> {
+interface CounterProps {
+    totalTests: number;
+}
+
+class Counter extends Component<CounterProps, { i: number }> {
     timer = null as ReturnType<typeof setInterval> | null;
     state = { i: 0 };
 
-    constructor() {
-        super();
+    constructor(props: CounterProps) {
+        super(props);
     }
 
     render() {
         return (
             <Fragment>
-                <Color green>{this.state.i} tests passed</Color>
+                <Indent>
+                    <Color green>{this.state.i} / {this.props.totalTests} tests passed</Color>
+                </Indent>
             </Fragment>
         );
     }
@@ -31,4 +37,4 @@ class Counter extends Component<{}, { i: number }> {
     }
 }
 
-render(<Counter />);
+render(<Counter totalTests={100} />);