Getting started with typescript , react, webpack and atom

Nowadays webapps get more and more complex and if the webapp is crafted in a team it adds additional complexity and potential for mistakes. JS is a loosely typed language that means types are not enforced by JS. With typescript you can have strong typing and it can be compiled to JS. Editors can then show / suggest parameters of a function without the need to look them up. That makes your webapp more bulletproof because you can rely on the defined types.

This article aims to teach you what i learned in some hours peeking into the nitty gritty of typescript with react, webpack and atom. You can find the demo project (a github profile display page) here. The article is structured as follows: First i will tell you where you can learn the basic syntax for typescript then how to setup atom for typescript then how you hookup typescript with webpack and then what you need to take care of with JSX. Then some notes on typescript vs. ES6 then you learn how to install typings for libraries like lodash. In the end i have a quick conclusion.

Basics of typescript

To get started with typescript you need to learn a bit of new syntax, i found the handbook provided by typescriptlang.org very helpful and easy to grasp the basics.

Here the gist:

Its a good practice to prefix Interfaces with I to make it more obvious. Below you can find some basic types i crafted to have an quick overview of the syntax, but i would advise you to read also read type-compatibility, functions, classes, interfaces, basic types to get an deeper understanding of the basics.

Its also important to know that with type script your projects will have 2 additional config files (YAY!!).

  • tsconfig.json — settings for the compiler (check my tsconfig.json) for a sample
  • typings.json — kind of like the package.json for typescript, where it saves the depending typings

Typescript and atom

For atom there is this beautiful package called atom-typescript which makes you life so much easier. It gives you things like: auto-suggestion, AST Visualizer, very helpful error messages.

Frst install typescript globally on your system then install the atom plugin:

npm install -g typescript 
apm install atom-typescript

Typescript and Webpack

To use typescript with webpack is really straight forward, just use the ts-loader which will pull its config from the tsconfig.json file. Not much more to say here, webpack will throw errors if your TS-Code has errors, but Atom will notify you more visually before.

Typescript and JSX

Most react projects use react with JSX i think, so its important to know that if you do type casting you need to be aware of this:

// without jsx
var
foo = <foo>bar;
// you need to do the type casting with the as keyword instead
var foo = bar as foo;

some more hints for the jsx usage here: https://www.typescriptlang.org/docs/handbook/jsx.html

Typescript vs ES6

If you are used to ES6 and like all these new features like spread etc. then you will quickly notice that typescript does not support all those new features out of the box, with core-js shim get almost all the stage-0 features, more infos here. If a features you are used to i missing then googling usually helps, but i noticed that for example Object.assign does not type check very strict, its a good idea to check how typescript is behaving with an ES6 feature before using it just to be safe.

You will also notice that you cannot have default exports like

// es6 way
import ReactDOM from 'react-dom';
// typescript way 
import * as ReactDOM from 'react-dom';

Install typings for libraries like react

If the library you are using is not by accident written in typescript like angular2 then you should try to install the typings for this library to also have type safety while using other libraries in your codebase. All the big libraries come with typings, but they can be a bit outdated as i heard. Its always a good idea to search for the package before installing to see when it was updated the last time.

Before you can install typings you need to install: https://github.com/typings/typings

typings search es6-promise
typings install dt~es6-promise --global --save

Todos / to explore

Following things i could not cover in this article, if you got a good link for following topics leave it in the comments.

  • writing unit tests with typescript
  • jest and typescript
  • creating namespaces, modules (advanced shit)

Conclusion

Looking back im suprised how easy it was to get started with typescript, i expected it to be harder to use it. But i guess to build some more advanced logic and models or creating typings for existing libraries can be a bit of a challenge. I think typescript can be a big help when developing in a team where you need to integrate code a college wrote, with typings this is kind so self explanatory.

What i was missing with typescript was eslint, which tells you if u have unneded imports / typos / or u violate the code style. I found (but didnt test it) https://github.com/eslint/typescript-eslint-parser.

Last word: I think its a very powerful and big language but probably not a quick learn like ES6 vs ES5, but i think you can gradually learn it by doing and screening stack overflow and google if u encounter problems. Another useful resources to learn is probably the source code of angular2 and other libraries written in typescript.

Follow me on twitter: @theotow

Links

Contact me on: https://manuelvilling.de/

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.