Add test for TypeScript typings

Author: Oblosys

index.d.ts

@@ -22,6 +22,8 @@ type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 // Simpler TypeScript 2.8+ definition of Omit (disabled for now to support lower TypeScript versions)
 // export type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
 
+// Due to https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796, we cannot use traceLifecycle as a decorator
+// in TypeScript, so just do `const TracedComponent = traceLifecycle(ComponentToTrace)` instead.
 export function traceLifecycle<P extends TraceProps>(
   component: React.ComponentClass<P>
 ): React.ComponentClass<Omit<P, keyof TraceProps>>;

package-lock.json

@@ -6,7 +6,8 @@
   "typings": "./index.d.ts",
   "scripts": {
     "lint": "eslint --ext js,jsx --max-warnings 0 src test examples",
-    "test": "npm run lint && jest",
+    "test": "npm run lint && npm run test-typings && jest",
+    "test-typings": "tsc -p test/typescript",
     "start": "webpack-dev-server --hot --mode development",
     "build-demo": "webpack --mode development",
     "clean-lib": "rm -rf dist",
@@ -44,6 +45,8 @@
     }
   },
   "devDependencies": {
+    "@types/react": "^16.3.14",
+    "@types/react-dom": "^16.0.5",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.2.3",
     "babel-jest": "^22.4.3",
@@ -83,7 +86,8 @@
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
     "redux-thunk": "^2.2.0",
-    "style-loader": "^0.20.3"
+    "style-loader": "^0.20.3",
+    "typescript": "^2.8.3"
   },
   "peerDependencies": {
     "react": "^16.3.0",

package.json

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+import { resetInstanceIdCounters, clearLog, Log, traceLifecycle, VisualizerProvider, TraceProps }
+  from 'react-lifecycle-visualizer';
+
+// Basic test to check if the typings are consistent. Whether these types correspond to the actual JavaScript
+// implementation is currently not tested, as we'd need to do a TypeScript webpack build for that.
+
+resetInstanceIdCounters();
+clearLog();
+
+interface ComponentToTraceProps extends TraceProps {};
+interface ComponentToTraceState {}
+
+class ComponentToTrace extends React.Component<ComponentToTraceProps, ComponentToTraceState> {
+  constructor(props: ComponentToTraceProps, context?: any) {
+    props.trace('before super(props)');
+    super(props, context);
+    this.props.trace('after super(props)');
+  }
+
+  static getDerivedStateFromProps(nextProps : ComponentToTraceProps, nextState: ComponentToTraceState) {
+    nextProps.trace('deriving');
+    return null;
+  }
+
+  render() {
+    return <this.props.LifecyclePanel/>;
+  }
+}
+
+// Due to https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796, we cannot use `traceLifecycle` as a decorator
+// in TypeScript, so we just apply it as a function.
+const TracedComponent = traceLifecycle(ComponentToTrace);
+
+const ProvidedComponent = () => (
+  <VisualizerProvider>
+    <div>
+      <TracedComponent/>
+      <Log/>
+    </div>
+  </VisualizerProvider>
+);
+render(<ProvidedComponent/>, document.getElementById('root'));

test/typescript/react-lifecycle-visualizer-typings-test.tsx

@@ -0,0 +1,28 @@
+{
+    "files": [
+        "../../index.d.ts",
+        "react-lifecycle-visualizer-typings-test.tsx"
+    ],
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "experimentalDecorators": true,
+        "baseUrl": "../..",
+        "jsx": "react",
+        "typeRoots": [
+            "../.."
+        ],
+        "types": [],
+        "noEmit": true,
+        "paths": {
+          "react-lifecycle-visualizer": ["index.d.ts"]
+        }
+    }
+}