DEV Community

Migrating to TypeScript, Part 1: Introduction and getting started

Resi Respati on January 09, 2019

Header image by Franz Harvin Aceituna on Unsplash. TypeScript (TS) is a language which has seen quite a meteoric rise lately. It’s gone some favou...

Read full post

Simon Holm • Jan 9 '19

typescript is awesome!

I recommend:
ts-node (if you want to run node and write typescript) github.com/TypeStrong/ts-node

Create React App with --typescript (if you want to give React with typescript a try) facebook.github.io/create-react-ap...

Typescript can scare you at first with errors and warnings all over the show! You can tweak and adjust almost everything until its to your liking. It's worth the effort.

edit and tweak:
tsconfig.json
tslint.json

If you code in VSCODE check out the plugins
marketplace.visualstudio.com/items...
marketplace.visualstudio.com/items...

❤

Vignesh D • Jan 9 '19

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 • Jan 9 '19 • Edited

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 • Jan 10 '19

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.