Awesome TypeScript example project

.mocha.opts

--compilers js:ts-node/register
--reporter progress
--recursive
--colors

.webpack.ts

/// <reference path="./node_modules/@types/node/index.d.ts" />

import * as path from 'path';
import * as webpack from 'webpack';

export default {

  /**
   * The base directory (absolute path!) for resolving the entry option.
   * If output.pathinfo is set, the included pathinfo is shortened to this directory.
   *
   * @type {string}
   */
  context: path.resolve('./'),

  /**
   * The entry point(s) for the bundle.
   *
   * @type {object}
   */
  entry: {
    client: path.resolve('./bootstrap/client'),
    vendor: [
      'react',
      'react-dom',
      'react-router',
    ],
  },

  /**
   * The file output settings for the bundle.
   *
   * @type {object}
   */
  output: {
    path: path.resolve('./.tmp'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
  },

  /**
   * Options affecting the resolving of modules.
   *
   * @type {object}
   */
  resolve: {
    modules: [
      path.resolve('./'),
      path.resolve('./node_modules'),
    ],

    extensions: [
      '.js',
      '.jsx',
      '.ts',
      '.tsx',
      '.json',
    ],
  },

  /**
   * Options affecting the resolving of the loader.
   *
   * @type {object}
   */
  resolveLoader: {
    root: path.resolve('./node_modules')
  },

  /**
   * Options affecting the normal modules (NormalModuleFactory).
   *
   * @type {object}
   */
  module: {
    loaders: [
      {
        test: /\.(ts|tsx)$/,
        loader: 'ts',
        include: [
          path.resolve('./app'),
          path.resolve('./bootstrap'),
        ],
      },
    ],
  },

  /**
   * Add additional plugins to the compiler.
   *
   * @type {array}
   */
  plugins: [

    /**
     * Make sure webpack shares the vendor chunk as shared,
     * and dos not re-include it into the app chunk.
     */
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
    }),

  ],

  /**
   * Choose a developer tool to enhance debugging.
   *
   * @type {string}
   */
  devtool: 'source-map',

  /**
   * Can be used to configure the behaviour of webpack-dev-server when
   * the webpack config is passed to webpack-dev-server CLI.
   *
   * @type {object}
   */
  devServer: {
    contentBase: path.resolve('./public'),
    host: '0.0.0.0',
    port: 8000,
    historyApiFallback: true,
    inline: true,
    https: false,
  },

};

app-components-test.tsx

import * as React from 'react';
import { Component, PropTypes, ReactElement } from 'react';

export interface Props {
  compliment: string;
}

export default class TestComponent extends Component<Props, {}>
{
  /**
   * The initial value of the component's properties.
   */
  static defaultProps: Props = {
    compliment: '',
  };

  /**
   * Render the component.
   *
   * @return {ReactElement}
   */
  render(): ReactElement<any> {
    return <h1>Hello {this.props.compliment} TypeScript!</h1>;
  }
}

bootstrap-client.tsx

import * as React from 'react';
import { render } from 'react-dom';

import TestComponent from 'app/components/test';

/**
 * Render the loaded routes into the `body > #app` element.
 */
render(<TestComponent compliment='magnificent' />, document.getElementById('app'));

package.json

{
  "name": "awesome-typescript",
  "version": "1.0.0",
  "author": "Cedric van Putten <[email protected]> (https://bycedric.com)",
  "dependencies": {
    "react": "^15.3",
    "react-dom": "^15.3",
    "react-router": "^2.8"
  },
  "devDependencies": {
    "@types/chai": "^3.4",
    "@types/enzyme": "^2.4",
    "@types/mocha": "^2.2",
    "@types/node": "^6.0",
    "@types/react": "^0.14",
    "@types/react-dom": "^0.14",
    "@types/webpack": "^1.12",
    "chai": "^3.5",
    "enzyme": "^2.4",
    "mocha": "^3.0",
    "react-addons-test-utils": "^15.3",
    "ts-loader": "^0.8",
    "ts-node": "^1.3",
    "typescript": "^2.0",
    "webpack": "2.1.0-beta.22",
    "webpack-dashboard": "^0.1",
    "webpack-dev-server": "2.1.0-beta.4"
  },
  "scripts": {
    "test": "npm run test:mocha",
    "test:mocha": "NODE_ENV=testing NODE_PATH=. ./node_modules/.bin/mocha ./test/**/* --opts ./.mocha.opts",
    "start": "npm run start:dashboard -- npm run start:server",
    "start:dashboard": "./node_modules/.bin/webpack-dashboard",
    "start:server": "./node_modules/.bin/webpack-dev-server --config .webpack.ts",
    "compile": "./node_modules/.bin/tsc"
  }
}

public-index.html

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>Magical TypeScript</title>
  <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
  <meta http-equiv='x-ua-compatible' content='ie=edge, chrome=1'>
  <link rel='shortcut icon' href='/favicon.ico'>
</head>
<body>
  <div id='app' />
  <script src='/vendor.js'></script>
  <script src='/client.js'></script>
</body>
</html>

test-components-test.tsx

import * as React from 'react';
import * as Mocha from 'mocha';
import { expect } from 'chai';
import { shallow } from 'enzyme';

import TestComponent from 'app/components/test';

describe('components/test', () => {
  it('#render - contains the test prop', () => {
    const component = shallow(<TestComponent compliment='elegant' />);
    const text = component.text();
    
    expect(text).to.contain('elegant');
  });
});

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "jsx": "react",
    "module": "commonjs",
    "moduleResolution": "node",
    "removeComments": true,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "test"
  ]
}