From 62ae36eeb6ddf43ec2f1d5b8e0546dd8df47b15d Mon Sep 17 00:00:00 2001
From: Igor Oleinikov <igor@oleinikov.ru>
Date: Mon, 10 Jul 2017 17:57:40 -0700
Subject: [PATCH] Improve TypeScript typings for withTheme HOC - upgrade
 typescript to 2.4.1 - make tests of withTheme more strict

---
 package.json                                    |  2 +-
 typings/styled-components.d.ts                  | 10 ++++++++--
 typings/tests/main-test.tsx                     |  2 +-
 .../themed-tests/mytheme-styled-components.tsx  |  2 +-
 typings/tests/themed-tests/with-theme-test.tsx  |  3 ++-
 typings/tests/with-theme-test.tsx               | 17 +++++++++++++++++
 yarn.lock                                       |  6 +++---
 7 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 typings/tests/with-theme-test.tsx

diff --git a/package.json b/package.json
index 5b7c9ae2d..b36e802c1 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "rollup-plugin-uglify": "^1.0.1",
     "rollup-plugin-visualizer": "^0.1.5",
     "tslint": "^4.3.1",
-    "typescript": "^2.3.3"
+    "typescript": "^2.4.1"
   },
   "peerDependencies": {
     "react": ">= 0.14.0 < 17.0.0-0"
diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts
index 16e80c677..49e92d27c 100644
--- a/typings/styled-components.d.ts
+++ b/typings/styled-components.d.ts
@@ -63,6 +63,7 @@ type ThemedStyledComponentFactoriesSVG<T> = {
 type ThemedStyledComponentFactories<T> = ThemedStyledComponentFactoriesHTML<T> & ThemedStyledComponentFactoriesSVG<T>;
 
 export interface ThemedBaseStyledInterface<T> extends ThemedStyledComponentFactories<T> {
+  <P extends { theme?: T; }>(component: Component<P>): ThemedStyledFunction<P, T, WithOptionalTheme<P, T>>;
   <P>(component: Component<P>): ThemedStyledFunction<P, T>;
 }
 export type BaseStyledInterface = ThemedBaseStyledInterface<any>;
@@ -80,13 +81,18 @@ export interface ThemedCssFunction<T> {
   <P>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): FlattenInterpolation<ThemedStyledProps<P, T>>[];
 }
 
+// Helper type operators
+type Diff<T extends string, U extends string> = ({ [P in T]: P } & { [P in U]: never } & { [x: string]: never })[T];
+type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
+type WithOptionalTheme<P extends { theme?: T; }, T> = Omit<P, 'theme'> & { theme?: T; };
+
 export interface ThemedStyledComponentsModule<T> {
   default: ThemedStyledInterface<T>;
 
   css: ThemedCssFunction<T>;
   keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): string;
   injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void;
-  withTheme<P extends { theme?: T; }, T>(component: Component<P>): ComponentClass<P>;
+  withTheme<P extends { theme?: T; }>(component: Component<P>): ComponentClass<WithOptionalTheme<P, T>>;
 
   ThemeProvider: ThemeProviderComponent<T>;
 }
@@ -94,7 +100,7 @@ export interface ThemedStyledComponentsModule<T> {
 declare const styled: StyledInterface;
 
 export const css: ThemedCssFunction<any>;
-export function withTheme<P extends { theme?: T; }, T>(component: Component<P>): ComponentClass<P>;
+export function withTheme<P extends { theme?: T; }, T>(component: Component<P>): ComponentClass<WithOptionalTheme<P, T>>;
 
 export function keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): string;
 export function injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void;
diff --git a/typings/tests/main-test.tsx b/typings/tests/main-test.tsx
index 78e57af87..0e20762b1 100644
--- a/typings/tests/main-test.tsx
+++ b/typings/tests/main-test.tsx
@@ -40,7 +40,7 @@ interface MyTheme {
 interface ButtonProps {
   name: string;
   primary?: boolean;
-  theme?: MyTheme;
+  theme: MyTheme;
 }
 
 class MyButton extends React.Component<ButtonProps, {}> {
diff --git a/typings/tests/themed-tests/mytheme-styled-components.tsx b/typings/tests/themed-tests/mytheme-styled-components.tsx
index 386907ea0..1a584c9ff 100644
--- a/typings/tests/themed-tests/mytheme-styled-components.tsx
+++ b/typings/tests/themed-tests/mytheme-styled-components.tsx
@@ -17,7 +17,7 @@ const {
 } = styledComponents as ThemedStyledComponentsModule<MyTheme>;
 
 interface ThemeProps {
-  theme?: MyTheme;
+  theme: MyTheme;
 }
 
 export default styled;
diff --git a/typings/tests/themed-tests/with-theme-test.tsx b/typings/tests/themed-tests/with-theme-test.tsx
index 6f0d05238..31642253d 100644
--- a/typings/tests/themed-tests/with-theme-test.tsx
+++ b/typings/tests/themed-tests/with-theme-test.tsx
@@ -22,4 +22,5 @@ const text = "hey";
 
 const MyThemedComponent = withTheme(MyComponent);
 
-<MyThemedComponent text={text} />;
+<MyThemedComponent text={text} />; // ok
+<MyThemedComponent text={text} theme={theme} />; // ok
diff --git a/typings/tests/with-theme-test.tsx b/typings/tests/with-theme-test.tsx
new file mode 100644
index 000000000..b1f86f97c
--- /dev/null
+++ b/typings/tests/with-theme-test.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import styled, { withTheme } from "../..";
+
+interface Props {
+    theme: {
+        color: string;
+    };
+    text: string;
+}
+
+const Component = (props: Props) => <div style={{color: props.theme.color}}>{props.text}</div>;
+
+const ComponentWithTheme = withTheme(Component);
+
+<ComponentWithTheme text={"hi"} />; // ok
+<ComponentWithTheme text={"hi"} theme={{ color: "red" }} />; // ok
diff --git a/yarn.lock b/yarn.lock
index 1f36bdf2c..c2196ed89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6056,9 +6056,9 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.3.tgz#9639f3c3b40148e8ca97fe08a51dd1891bb6be22"
+typescript@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.1.tgz#c3ccb16ddaa0b2314de031e7e6fee89e5ba346bc"
 
 ua-parser-js@^0.7.9:
   version "0.7.12"