Implement as TypeScript compiler transform

[grncdr]

The TypeScript compiler API supports transforms for a while now. It should be possible to implement the main functionality independent of webpack, and then expose it as a compiler transform as well as a webpack loader.

Keep an eye on microsoft/TypeScript#14419 to see if a common approach to using typescript with compiler transforms comes about.

[grncdr]

Turns out ts-loader already supports custom transformers 🎉

The way the first proof-of-concept was written is incredibly wasteful (running the typescript compiler twice) so I will definitely be rewriting this as a transformer and documenting how to use it with ts-loader.

[grncdr]

From looking at https://github.com/Igorbek/typescript-plugin-styled-components, the same is also true of awesome-typescript

[grncdr]

Further thoughts on this:

• @babel/preset-typescript is gaining in popularity, especially for development builds (where you really want the prop-types). It doesn't have any real type information though so this could never work in that environment.
• prop-types in general appear to be falling out of favor for React.
• The new context API has been released and use of static contextTypes is discouraged for new code.

Given the above, it doesn't make sense to sink a lot of effort into this project. I do like the idea of generating runtime validation code from static types, but I think it makes more sense to decouple this from the react prop-types infrastructure and require explicit validations. E.g.

import * as React from 'react'
import validate from 'ts-validate/validate' // a "marker" function, calls will be replaced by the transform

interface Props {
  foo: string
}

export default function MyComponent(props: Props) {
  validate(props) // compiler transform replaces this call with validation code generated from `Props`
  return <span>{props.foo}</span>
}

The ts-validate/validate package would export an empty function, so that code compiled without the transform will continue to run:

export default function validate(x: any) {}

(I'm fairly certain many minifiers will actually remove the function call entirely).