Discussion on: Migrating to TypeScript, Part 1: Introduction and getting started

[Vignesh D]

I was trying to use Typescript with react and Evergreen-Ui react library. But Evergreen-ui doesn't have typescript support. It's asking for declaration file which I couldn't understand. How to proceed with it?

[Resi Respati]

I was planning to talk about dealing with libraries without TypeScript declarations in the next couple parts, but for a quick refresher:

• Create a types/ folder inside your root src/ folder
• Create a file to hold our own custom declarations for Evergreen UI, e.g. evergreen-ui.d.ts

Now inside the .d.ts file we just created, put the following:

declare module 'evergreen-ui';

This will shim the evergreen-ui module so we can import it safely without the "Cannot find module" errors.

Note that this doesn't give you the autocompletion support, as you will have to declare each components you use inside it. This next part is optional, but very useful if you want better autocompletion.

For example, if we were to use Evergreen UI's Button component:

// Import React's base types for us to use.
import * as React from 'react';

declare module 'evergreen-ui' {
  export interface ButtonProps extends DimensionProps, SpacingProps, PositionProps, LayoutProps {
    // The above extended props props are examples for extending common props and are not included in this example for brevity.

    intent: 'none' | 'success' | 'warning' | 'danger';
    appearance: 'default' | 'minimal' | 'primary';
    isLoading?: boolean;

    // Again, skipping the rest of the props for brevity, but you get the idea.
  }

  export class Button extends React.PureComponent<ButtonProps> {}
}

Again, more on this on the next few parts on this series, so watch this space!

[Vignesh D]

Thank you Bro. It did the work as a starting point to add other declarations.
It would be better if there is a tool that autogenrates declaration files using reflection anyway.