Install our dependencies

Install our dependencies

First ensure TypeScript, Typings, and webpack are installed globally.

npm install -g typescript typings webpack

Webpack is a tool that will bundle your code and optionally all of its dependencies into a single .js file. Typings is a package manager for grabbing definition files.

Let’s now add React and React-DOM as dependencies to your package.json file:

npm install --save react react-dom

Next, we’ll add development-time dependencies on ts-loader and source-map-loader.

npm install --save-dev ts-loader source-map-loader
npm link typescript

Both of these dependencies will let TypeScript and webpack play well together. ts-loader helps webpack compile your TypeScript code using the TypeScript’s standard configuration file named tsconfig.json. source-map-loader uses any sourcemap outputs from TypeScript to inform webpack when generating its own sourcemaps. This will allow you to debug your final output file as if you were debugging your original TypeScript source code.

Linking TypeScript allows ts-loader to use your global installation of TypeScript instead of needing a separate local copy. If you want a local copy, just run npm install typescript.

Finally, we’ll use Typings to grab the declaration files for React and ReactDOM:

typings install --global --save dt~react
typings install --global --save dt~react-dom

The --global flag, along with the dt~ prefix tells Typings to grab any declaration files from DefinitelyTyped, a repository of community-authored .d.ts files.

This command will create a file called typings.json and a folder called typings in the current directory.