od-tsplay

Simple TypeScript Project Template for Prototyping

Purpose

The goal is to provide a project template, which is as simple as possible and provides the necessary amount of comfort to start prototyping or experimenting with TypeScript.

Features

The features are the minimum of requirements I find necessary to get started.

• Browsersync (watch mode)
• TypeScript compilation (watch mode)
• Strict compiler default settings
• Intermediate compilation output in ./tsc-out
• Module loading via SystemJS
• Direct access to underlying tools

Usage

git, node/npm is assumed to be installed on your system.

Initialization

$ git clone [e-mail]:dinony/od-tsplay.git <your-project>
$ cd <your-project>
$ npm i

Start

$ npm run dev

Open browser localhost:3000.

(Optional) Adapt package.json

Do not forget to adapt package.json if you plan to publish your results.

Process

SystemJS is the module loader of choice.

index.html imports the compilation output (./tsc-out/index.js). Additional libraries need to be added to systemjs.config.js according to the config API.

Example: Add RxJS

1. Install dependency

npm i -S rxjs

2. Adapt systemjs.config.js

SystemJS.config({
  paths: {'npm:' : 'node_modules/'},
  map: {'rxjs': 'npm:rxjs'},
  packages: {'rxjs': {'defaultExtension': 'js'}},
  warnings: true
})

3. Play

import {Observable} from 'rxjs/Observable'
import 'rxjs/add/observable/timer'
import 'rxjs/add/operator/map'

Observable.timer(0, 512).map(i => Math.pow(2, i))
  .subscribe(i => {console.log(i)})

Browsersync

Browsersync is used to synchronize the browser when changes are made. Refer to the browsersync options if you want to change the current configuration.

NPM Scripts

$ npm run <script>

Name	Description
dev	Concurrently run Browsersync and tsc compiler in watch mode
serve	Just start Browsersync
tsc:src	Just start tsc compiler

Anti-Goals

• Opaque layers of build steps / optimizations
• Unnecessary tooling barrieres
• Unnecessary CLI abstractions/indirections
• etc.