Improve TypeScript typings for withTheme HOC

- upgrade typescript to 2.4.1 - make tests of withTheme more strict
nstadigs · Jul 11, 2017 · 62ae36e · 62ae36e
1 parent 96afe68
commit 62ae36e
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 9 deletions.
diff --git 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
@@ -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,21 +81,26 @@ 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>;
 }
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"