Blueprint: Trying not to use PropTypes and use existing built in TS instead.

[havesomeleeway]

Environment

• __Package version(s)__:
  "@blueprintjs/core": "^3.11.0",
• __Browser and OS versions__:
  Google Chrome: Version 71.0.3578.98 (Official Build) (64-bit)
  OS: Mojave 10.14.2

Question

I've been building my app so far with PropTypes, but I realised that the components themselves already have Typescript prop checkers _(is this what we refer to them as? 🤔 )_ in place. For my example, lets look at the controlled input props,

/** Interface for a controlled input. */
export interface IControlledProps {
    /** Initial value of the input, for uncontrolled usage. */
    defaultValue?: string;

    /** Change event handler. Use `event.target.value` for new value. */
    onChange?: React.FormEventHandler<HTMLElement>;

    /** Form value of the input, for controlled usage. */
    value?: string;
}

What I'm doing now

It seems to me that I'm doing double work to define PropTypes that __can__ already be checked by IControlledProps

SignUpForm.propTypes = {
  email: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
}

```jsx
const SignUpForm = props => {
return (
value={props.email}
onChange={props.onChange}
name="email"
type="text"
placeholder="Enter e-mail address"
large="true"
/>
)
}

____

### What I think can be done? 🤷‍♂️ 
I could probably do something like:

```tsx
import { IControlledProps } from "@blueprintjs/core/src/common/props.ts"

const SignUpForm = (props:IControlledProps) => {
  return (
            <InputGroup
              value={props.email}
              onChange={props.onChange}
              name="email"
              type="text"
              placeholder="Enter e-mail address"
              large="true"
            />
  )
}

As such, my questions are:

1. Is my approach of importing props.ts the proper way to do this if I want to make use of TypeScript?
2. What advantages, if any, are there to choosing PropTypes over TypeScript for prop type checking?

[giladgray]

@havesomeleeway great question! you can definitely rely on our types for prop validation ✅

1. you should be able to import all these interfaces from the package itself, rather than reaching into submodules -- we're very deliberate about exporting public components _and_ their props interfaces _for exactly this purpose!_

   import { IControlledProps } from "@blueprintjs/core";
   

2. the primary difference is that all typescript checking happens at _compile time_ while prop-types run at _run time_ (in the browser). this means that you can get immediate editor feedback from typescript but _not from prop-types_. prop-types requires running additional code in the browser, although in practice this is negligible.

   here are some hopefully helpeful resources from a quick google: https://dbushell.com/2017/04/19/typescript-instead-of-react-proptypes/, https://www.reddit.com/r/reactjs/comments/8zzb4p/why_do_you_use_typescript_if_proptypes_is/

[havesomeleeway]

Thanks for the response as usual. In that case, how should I best proceed from here? I've mainly got components and containers set up for now. Should I refactor my app with a react/typescript starter as indicated by this?
https://github.com/Microsoft/TypeScript-React-Starter/blob/master/README.md

I've never used TypeScript in my projects before so i'm unsure on how to progress from here, especially when I already have some config files setup.

[giladgray]

@havesomeleeway yes you'll need to integrate typescript into your project in order to leverage its benefits. that microsoft starter is a great resource, and it's also worth noting that create-react-app supports typescript directly now: https://facebook.github.io/create-react-app/docs/adding-typescript.

for further learning, there are plenty of amazing typescript resources just a google search away, not least of which is their own documentation.