Simple TypeScript Project Template for Prototyping
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.
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
- Existing configuration branches for common scenarios
git, node/npm is assumed to be installed on your system.
$ git clone git@github.com:dinony/od-tsplay.git <your-project>
$ cd <your-project>
$ npm i
$ npm run devOpen browser localhost:3000.
Do not forget to adapt package.json if you plan to publish your results.
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. If you are not familiar with SystemJS and want to get a feeling what needs to be done, check out the examples section for some details.
To avoid duplicate work of configuring SystemJS for common scenarios, some configurations are provided in config/* branches.
| Name | Description |
|---|---|
| master | Base config: TypeScript with module loading |
| config/rxjs | Base config + RxJS |
| config/angular | Base config + Angular |
| ... | TODO: Add other common configurations |
Feel free to add a PR if a common scenario is not covered for you yet.
When cloning initially you can choose to point the newly created HEAD to the e.g. config/rxjs branch.
git clone git@github.com:dinony/od-tsplay.git -b config/rxjs <your-project>If you already cloned the repository and decided later to switch to another configuration then simply checkout the other branch.
$ git branch -a
$ git checkout config/angular
$ npm iBrowsersync is used to synchronize the browser when changes are made. Refer to the browsersync options if you want to change the current configuration.
$ 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 |
- Install dependency
$ npm i -S rxjs- Adapt systemjs.config.js
SystemJS.config({
paths: {'npm:' : 'node_modules/'},
map: {'rxjs': 'npm:rxjs'},
packages: {'rxjs': {'defaultExtension': 'js'}},
warnings: true
})- 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)})- Install dependencies
$ npm i -S @angular/common @angular/compiler @angular/core @angular/platform-browser @angular/platform-browser-dynamic core-js reflect-metadata rxjs zone.js- Adapt systemjs.config.js
SystemJS.config({
paths: {'npm:' : 'node_modules/'},
map: {
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'rxjs': 'npm:rxjs'
},
packages: {
rxjs: {defaultExtension: 'js'}
},
warnings: true
})- Adapt index.html
<!doctype html>
<html lang="en">
<head>
<title>od-tsplay</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
SystemJS.import('./tsc-out/index.js').catch(function(err) {
console.error(err)
})
</script>
</head>
<body>
<!-- TODO: adapt title -->
<!-- TODO: adapt content -->
<od-app></od-app>
</body>
</html>- Play
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'
import {BrowserModule} from '@angular/platform-browser'
import {NgModule, Component} from '@angular/core'
@Component({
'selector': 'od-app',
'template': ':)'
})
export class AppShell {}
@NgModule({
imports: [BrowserModule],
declarations: [AppShell],
bootstrap:[AppShell]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));- Opaque layers of build steps / optimizations
- Unnecessary tooling barrieres
- Unnecessary CLI abstractions/indirections
- etc.