Note This demo is obsolete. You should use the Angular CLI, if at all possible. It can create 1.x Angular project too!
This demo is intended to showcase some of the major advantages to using TypeScript. The demo does not make use of a packager, such as browserify or webPack. But those forms of mosule delivery should work just as well.
The use of Visual Studio Code is optional, but an IDE with TypeScript Support is highly recommended, so the full benefits of using TypeScript can be realized.
- Sublime Text (demo version available)
- WebStorm (commerical only)
- Eclipse (free)
For more tools, see the DefinatelyTyped wiki pages.
- TypeScript http://www.typescriptlang.org/Handbook
- DefinatelyTyped (tsd) http://definitelytyped.org/tsd/
- VS Code https://code.visualstudio.com/Docs/languages/typescript
- Simple API Server
- Simple Angular 1.X Client
The client is output into a single js file, while the server retains the seperate module files that are more suitable for node. These module systems are often referred to as internal/external within the TypeScript community.
A shared type definition file is provided to demonstrate how it would be useful on both server and client. These d.ts files also referred to as ambient definitions.
TsLint is optional, and can be invoked directly within VSCode or executed as cli.
root
├─ .vscode Visual Studio Code configuration
├─ config
│ └─ default.json
├─ dist
│ ├─ client Angular client output
│ └─ server Server output
├─ src
│ ├─ client Angular Client source
│ └─ server Server source
└─ typings DefinatelyTyped store
Clone a copy of the repo:
$ git clone https://github.com/djabraham/typescript-demo.git
Download node_modules and dependencies:
$ npm install
Install gulp-cli (if you don't already have it):
$ sudo npm install gulp-cli -g
Build source and watch for changes:
$ gulp
Client address: http://localhost:3088
The server and client are actually served from 3080, but the BrowserSync service wraps it and proxies it to 3088, so that it can send dynamic updates to the browser.
Run TsLint on the source code:
$ gulp tslint
See gulpfile.js for other more granular options.
The project should already contain the content files that these utilities generate; but it's helpful to know about them, in case it is necessary to update the contained libraries.
Install DefinatelyTyped and download dependencies:
$ sudo npm install tsd -g
$ tsd install
Install Bower (if you don't already have it) and download dependencies:
$ sudo npm install bower -g
$ bower install
Visual Studio Code is an editor based on the GitHub Electron Shell (Atom), that runs on Windows, Mac and Linux. It's open source and has greqat support for JS and other file formats.
Some of the features shown above are best ran as VSCode tasks, such as tslint. The IDE can parse the output and help navigate to issues within the code.
- Hit Ctrl + P
- Run "task ..."
- Hit Ctrl + shift + P
- Run "Tasks: Terminate Running Task"