@damassi => Upgrades typescript and enables type emitting

package.json

@@ -24,8 +24,9 @@
   },
   "scripts": {
     "clean": "rm -rf dist",
-    "compile": "babel src --out-dir dist --copy-files -s --source-map --extensions '.js,.jsx,.ts,.tsx' --ignore src/**/__tests__,src/**/__stories__",
+    "compile": "tsc",
     "deploy-storybook": "yarn relay && NODE_ENV=production storybook-to-ghpages",
+    "emit-types": "tsc --declaration --emitDeclarationOnly --listEmittedFiles --outDir dist",
     "lint": "tslint -c tslint.json --project tsconfig.json",
     "prepare": "patch-package",
     "precommit": "lint-staged",
@@ -43,7 +44,7 @@
     "test": "node verify-node-version.js && jest",
     "test:watch": "jest --watch --runInBand",
     "type-check": "tsc --noEmit --pretty",
-    "watch": "concurrently --raw --kill-others 'yarn relay --watch' 'yarn compile -w'",
+    "watch": "concurrently --kill-others 'yarn relay --watch' 'yarn compile -w'",
     "semantic-release": "semantic-release"
   },
   "resolutions": {
@@ -117,14 +118,14 @@
     "relay-compiler": "https://github.com/alloy/relay/releases/download/v1.5.0-artsy.3/relay-compiler-1.5.0-artsy.3.tgz",
     "relay-compiler-language-typescript": "^0.9.0",
     "semantic-release": "^12.4.1",
-    "styled-components": "^3.2.6",
+    "styled-components": "^3.3.2",
     "ts-jest": "^22.4.6",
     "ts-loader": "^3.5.0",
     "tslint": "^4.5.0",
     "tslint-config-prettier": "^1.1.0",
     "tslint-react": "^2.4.0",
-    "typescript": "^2.6.2",
-    "typescript-styled-plugin": "^0.1.2",
+    "typescript": "^2.9.1",
+    "typescript-styled-plugin": "^0.6.3",
     "webpack-bundle-analyzer": "^2.13.1",
     "webpack-merge": "^4.1.0"
   },

src/Assets/Checkmark.tsx

@@ -1,12 +1,12 @@
 import React, { HTMLProps } from "react"
 
-interface CheckmarkProps extends HTMLProps<SVGElement> {
+export interface CheckmarkProps extends HTMLProps<SVGElement> {
   stroke?: string
 }
 
 export class Checkmark extends React.Component<CheckmarkProps> {
   render() {
-    const { stroke, ...remainderProps } = this.props
+    const { stroke, ref, ...remainderProps } = this.props
 
     return (
       <svg width={14} height={11} viewBox="0 0 14 11" {...remainderProps}>

src/Components/Artist/MarketDataSummary/MarketDataSummary.tsx

@@ -1,15 +1,16 @@
 import { groupBy } from "lodash"
 import * as React from "react"
-import { createFragmentContainer, graphql } from "react-relay"
-import styled from "styled-components"
-
+// @ts-ignore
+import { ComponentRef, createFragmentContainer, graphql } from "react-relay"
+// @ts-ignore
+import styled, { StyledComponentClass } from "styled-components"
 import { unica } from "Assets/Fonts"
 
 export const MarketDataSummaryContainer = styled.div`
   ${unica("s14")};
 `
 import { MarketDataSummary_artist } from "../../../__generated__/MarketDataSummary_artist.graphql"
-interface Props extends React.HTMLProps<MarketDataSummary> {
+export interface Props extends React.HTMLProps<MarketDataSummary> {
   artist: MarketDataSummary_artist
   onEmptyText?: string
 }

src/Components/Artist/MarketDataSummary/index.tsx

@@ -4,7 +4,7 @@ import { graphql, QueryRenderer } from "react-relay"
 import { ContextConsumer, ContextProps } from "../../Artsy"
 import MarketDataSummary from "./MarketDataSummary"
 
-interface Props extends ContextProps {
+export interface Props extends ContextProps {
   artistID: string
 }
 

src/Components/Artist/MarketInsights/index.tsx

@@ -4,7 +4,7 @@ import { graphql, QueryRenderer } from "react-relay"
 import { ContextConsumer, ContextProps } from "../../Artsy"
 import MarketInsights from "./MarketInsights"
 
-interface Props extends ContextProps {
+export interface Props extends ContextProps {
   artistID: string
 }
 

src/Components/Artwork/Details.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { createFragmentContainer, graphql } from "react-relay"
+// @ts-ignore
+import { ComponentRef, createFragmentContainer, graphql } from "react-relay"
 import TextLink from "../TextLink"
 
 import styled from "styled-components"
@@ -11,7 +12,7 @@ const TruncatedLine = styled.div`
   white-space: nowrap;
 `
 
-interface Props extends RelayProps, React.HTMLProps<Details> {
+export interface Props extends RelayProps, React.HTMLProps<Details> {
   showSaleLine: boolean
 }
 
@@ -99,7 +100,7 @@ export class Details extends React.Component<Props, null> {
   }
 }
 
-export default createFragmentContainer(
+export default createFragmentContainer<Props>(
   Details,
   graphql`
     fragment Details_artwork on Artwork {
@@ -128,7 +129,7 @@ export default createFragmentContainer(
   `
 )
 
-interface RelayProps {
+export interface RelayProps {
   artwork: {
     href: string | null
     title: string | null

src/Components/Artwork/FillwidthItem.tsx

@@ -1,6 +1,8 @@
 import React from "react"
-import { createFragmentContainer, graphql } from "react-relay"
-import styled from "styled-components"
+// @ts-ignore
+import { ComponentRef, createFragmentContainer, graphql } from "react-relay"
+// @ts-ignore
+import styled, { StyledComponentClass } from "styled-components"
 
 import RelayMetadata, { Metadata } from "./Metadata"
 import RelaySaveButton, { SaveButton } from "./Save"
@@ -21,15 +23,20 @@ const Placeholder = styled.div`
   width: 100%;
 `
 
-interface Props extends RelayProps, React.HTMLProps<FillwidthItemContainer> {
+export interface FillwidthItemContainerProps
+  extends RelayProps,
+    React.HTMLProps<FillwidthItemContainer> {
   targetHeight?: number
   imageHeight?: number
   width?: number
   margin?: number
   useRelay?: boolean
 }
 
-class FillwidthItemContainer extends React.Component<Props, null> {
+export class FillwidthItemContainer extends React.Component<
+  FillwidthItemContainerProps,
+  null
+> {
   static defaultProps = {
     useRelay: true,
   }
@@ -94,7 +101,7 @@ export default createFragmentContainer(
   `
 )
 
-interface RelayProps {
+export interface RelayProps {
   artwork: {
     href: string | null
     image: {

src/Components/Artwork/index.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { createFragmentContainer, graphql } from "react-relay"
+// @ts-ignore
+import { ComponentRef, createFragmentContainer, graphql } from "react-relay"
 import styled, { css } from "styled-components"
 
 import theme from "../../Assets/Theme"
@@ -143,7 +144,7 @@ export default createFragmentContainer(
   `
 )
 
-interface RelayProps {
+export interface RelayProps {
   artwork: {
     id: string | null
     image: {

src/Components/ArtworkGrid.tsx

@@ -1,24 +1,30 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import { createFragmentContainer, graphql } from "react-relay"
-import styled from "styled-components"
-
+// @ts-ignore
+import { ComponentRef, createFragmentContainer, graphql } from "react-relay"
+// @ts-ignore
+import styled, { StyledComponentClass } from "styled-components"
 import RelayGridItem, { ArtworkGridItem } from "./Artwork/GridItem"
 
-interface Props extends RelayProps, React.HTMLProps<ArtworkGridContainer> {
+export interface ArtworkGridContainerProps
+  extends RelayProps,
+    React.HTMLProps<ArtworkGridContainer> {
   columnCount?: number
   sectionMargin?: number
   itemMargin?: number
   onLoadMore?: () => any
   useRelay?: boolean
 }
 
-interface State {
+export interface ArtworkGridContainerState {
   loading: boolean
   interval: any
 }
 
-class ArtworkGridContainer extends React.Component<Props, State> {
+export class ArtworkGridContainer extends React.Component<
+  ArtworkGridContainerProps,
+  ArtworkGridContainerState
+> {
   static defaultProps = {
     columnCount: 3,
     sectionMargin: 20,
@@ -168,14 +174,14 @@ export default createFragmentContainer(
   `
 )
 
-interface ArtworkRelayProps {
+export interface ArtworkRelayProps {
   __id: string
   image: {
     aspect_ratio: number | null
   } | null
 }
 
-interface RelayProps {
+export interface RelayProps {
   artworks: {
     edges: Array<{
       node: any

src/Components/BorderedPulldown.tsx

@@ -2,23 +2,28 @@ import React from "react"
 
 import Icon from "./Icon"
 
-import styled from "styled-components"
+// @ts-ignore
+import styled, { StyledComponentClass } from "styled-components"
 import colors from "../Assets/Colors"
 import { garamond } from "../Assets/Fonts"
 
-interface Props extends React.HTMLProps<BorderedPulldown> {
+export interface BorderedPullDownProps
+  extends React.HTMLProps<BorderedPulldown> {
   options: any
   defaultValue: string
   onChange?: any
   selectedName?: string
 }
 
-interface State {
+export interface BorderedPulldownState {
   selected: any
   isHovered: boolean
 }
 
-export class BorderedPulldown extends React.Component<Props, State> {
+export class BorderedPulldown extends React.Component<
+  BorderedPullDownProps,
+  BorderedPulldownState
+> {
   state = {
     selected: null,
     isHovered: false,

src/Components/Buttons/Default.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import styled from "styled-components"
+// @ts-ignore
+import styled, { StyledComponentClass } from "styled-components"
 import colors from "Assets/Colors"
 import { avantgarde } from "Assets/Fonts"
 import { block } from "../Helpers"
@@ -19,7 +20,7 @@ export enum ButtonState {
   Failure,
 }
 
-class Button extends React.Component<ButtonProps, any> {
+export class Button extends React.Component<ButtonProps, any> {
   public static defaultProps: ButtonProps
 
   render(): JSX.Element {

src/Components/Buttons/index.tsx

@@ -1,4 +1,5 @@
-import Button from "./Default"
+// @ts-ignore
+import Button, { ButtonProps } from "./Default"
 import FacebookButton from "./Facebook"
 import GhostButton from "./Ghost"
 import InvertedButton from "./Inverted"

src/Components/Checkbox.tsx

@@ -4,7 +4,7 @@ import colors from "../Assets/Colors"
 import { Checkmark } from "Assets/Checkmark"
 import { garamond } from "Assets/Fonts"
 
-interface CheckboxState {
+export interface CheckboxState {
   checked: boolean
 }
 

src/Components/Gene/index.tsx

@@ -5,32 +5,32 @@ import { ContextConsumer, ContextProps } from "../Artsy"
 import Artists from "./Artists"
 import GeneArtworks from "./GeneArtworks"
 
-interface Filters {
+export interface Filters {
   for_sale: boolean
   dimension_range: string
   price_range: string
-  medium: string
+  medium?: string
 }
 
-type Sort = "year" | "-year" | "-partner_updated_at"
+export type Sort = "year" | "-year" | "-partner_updated_at"
 
-type Mode = "artists" | "artworks"
+export type Mode = "artists" | "artworks"
 
-interface StateChangePayload {
+export interface StateChangePayload {
   filters: Filters
   sort: Sort
   mode: Mode
 }
 
-interface Props extends ContextProps {
+export interface Props extends ContextProps {
   mode: Mode
   filters?: Partial<Filters>
   geneID: string
   sort?: Sort
   onStateChange: (payload: StateChangePayload) => void
 }
 
-interface State extends Filters {
+export interface State extends Filters {
   mode: Mode
   sort?: Sort
 }
@@ -75,17 +75,17 @@ class GeneContents extends React.Component<Props, State> {
   // Because `for_sale` is a proper filter of its own, but
   // we include its aggregation as part of `price_range`, we
   // have to handle it specially.
-  onDropdownSelect(slice: string, value: string) {
-    let filter = slice.toLowerCase() as any
+  onDropdownSelect(slice: string, value: string | boolean) {
+    let filter = slice.toLowerCase() as string
     if (filter === "price_range" && value === "*-*") {
       filter = "for_sale"
-      value = "true"
+      value = true
     }
     this.setState(
       {
         [filter]: value,
         mode: "artworks",
-      },
+      } as any,
       this.handleStateChange
     )
   }

src/Components/Icon.tsx

@@ -1,4 +1,5 @@
-import React from "react"
+// @ts-ignore
+import React, { StatelessComponent } from "react"
 import styled from "styled-components"
 import "../Assets/Fonts"
 import icons, { IconName } from "../Assets/Icons"

src/Components/Input.tsx

@@ -19,7 +19,7 @@ export interface InputProps extends React.HTMLProps<HTMLInputElement> {
   rightView?: JSX.Element
 }
 
-interface InputState {
+export interface InputState {
   focused: boolean
   value: string
   showPassword: boolean
@@ -51,7 +51,7 @@ interface InputState {
  *    type="text"
  *  />
  */
-class Input extends React.Component<InputProps, InputState> {
+export class Input extends React.Component<InputProps, InputState> {
   state = {
     focused: false,
     value: "",