Setting up your development environment can be done in just a few steps.

Installing TypeScript

For simplicity in these tutorials, you can download a boilerplate at https://github.com/sjohnsonaz/ts-boilerplate. Follow its instructions to get a TypeScript environment up and running. Otherwise, you will need to set up Node, TypeScript, and Webpack to compile and run these projects.

Using npm

For TypeScript, the simplest way to install packages is through npm. Any project using npm must define a package.json file in its root directory. The boilerplate above already has done this for you. This file defines useful information about your project. For simply developing a project, the most important sections are for defining its dependencies. However, if you were to publish your project to npm so others could use it, this file includes other important information which would need customizing.

The package.json file defines several properties to store dependencies:

  • "dependencies"
  • "devDependencies"
  • "peerDependencies"
  • "bundledDependencies"
  • "optionalDependencies"

For our purposes, we will be most concerned with the first two. By default, packages are installed as "dependencies", which means any time your project is installed, these will be installed along with it. However, in some cases your project may need certain packages while it is being developed, but not while it is being used. For example, we might install TypeScript on the development environment to build our project, but we certainly don't need to deploy it along with the project. In this case, these packages should be installed as "devDependencies".

For more information, refer to package.json | npm Documentation.

Installing React and MobX

We need to install four packages as regular dependencies.

  • react
  • react-dom
  • mobx
  • mobx-react

This is done with a simple npm install command:

npm install react react-dom mobx mobx-react

In older versions of npm, we would need to append --save to the end of that command.

Next, we need to install several packages as "devDependencies".

  • @types/react
  • @types/react-dom

This provides the TypeScript typings to react and react-dom, which are only pure JavaScript packages. Many pure JavaScript packages have related typings available, simply look for packages prefixed with @types. However, these typings may be maintained separately from the orignal project, so some caution is advised.

In order to save these as "devDependencies", run:

npm install @types/react @types/react-dom --save-dev

Keep in mind, any dependency to be saved to "devDependencies" should be installed with --save-dev appended.