Merge pull request #882 from Igorbek/feature/ts-nested-interpolations

Add TypeScript support of using other styled components in selectors

CHANGELOG.md

@@ -10,6 +10,7 @@ All notable changes to this project will be documented in this file. If a contri
 - Added a test for `withComponent` followed by `attrs`, thanks to [@btmills](https://github.com/btmills). (see [#851](https://github.com/styled-components/styled-components/pull/851))
 - Fix Flow type signatures for compatibility with Flow v0.47.0 (see [#840](https://github.com/styled-components/styled-components/pull/840))
 - Upgraded stylis to v3.0. (see [#829](https://github.com/styled-components/styled-components/pull/829) and [#876](https://github.com/styled-components/styled-components/pull/876))
+- Added missing v2.0 APIs to TypeScript typings, thanks to [@patrick91](https://github.com/patrick91), [@igorbek](https://github.com/igorbek) (see [#837](https://github.com/styled-components/styled-components/pull/837), [#882](https://github.com/styled-components/styled-components/pull/882))
 
 ## [v2.0.0] - 2017-05-25
 

typings/styled-components.d.ts

@@ -20,7 +20,7 @@ export type OuterStyledProps<P> = ThemedOuterStyledProps<P, any>;
 
 export type Interpolation<P> = FlattenInterpolation<P> | ReadonlyArray<FlattenInterpolation<P> | ReadonlyArray<FlattenInterpolation<P>>>;
 export type FlattenInterpolation<P> = InterpolationValue | InterpolationFunction<P>;
-export type InterpolationValue = string | number;
+export type InterpolationValue = string | number | StyledComponentClass<any, any>;
 export type SimpleInterpolation = InterpolationValue | ReadonlyArray<InterpolationValue | ReadonlyArray<InterpolationValue>>;
 export interface InterpolationFunction<P> {
   (props: P): Interpolation<P>;
@@ -105,13 +105,13 @@ interface StylesheetComponentProps {
   sheet: ServerStyleSheet;
 }
 
-export class StyleSheetManager extends React.Component<StylesheetComponentProps, any> { }
+export class StyleSheetManager extends React.Component<StylesheetComponentProps, {}> { }
 
 export class ServerStyleSheet {
   collectStyles(tree: React.ReactNode): ReactElement<StylesheetComponentProps>;
 
   getStyleTags(): string;
-  getStyleElement(): ReactElement<any>[];
+  getStyleElement(): ReactElement<{}>[];
 }
 
 export default styled;

typings/tests/nested-test.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import styled, { css } from "../..";
+
+const Link = styled.a`
+    color: red;
+`;
+
+const AlternativeLink = styled.a`
+    color: blue;
+`;
+
+const freeStyles = css`
+    background-color: black;
+    color: white;
+    ${Link} {
+        color: blue;
+    }
+`;
+
+const Article = styled.section`
+    color: red;
+    ${freeStyles}
+    & > ${Link} {
+        color: green;
+    }
+    ${p => p.theme.useAlternativeLink ? AlternativeLink : Link} {
+        color: black
+    }
+`;