Introduction to TypeScriptiproduct.org/wp-content/uploads/2016/06/AngularJS... · IPT –...

IPT – Intellectual Products & Technologies Trayan Iliev, http://www.iproduct.org/

AngularJS and TypeScript

SPA Development

Slide 1Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License

Introduction to TypeScript

Trayan Iliev

IPT – Intellectual Products & Technologiese-mail: [email protected]

web: http://www.iproduct.org

Oracle®, Java™ and JavaScript™ are trademarks or registered trademarks of Oracle and/or its affiliates.Microsoft .NET, Visual Studio and Visual Studio Code are trademarks of Microsoft Corporation.

Other names may be trademarks of their respective owners.

http://www.iproduct.org/

mailto:[email protected]



SPA Development


Agenda

1. TypeScript project structure

2. TypeScript basic types

3. Variable types and declaration

4. TypeScript details: types, interfaces, classes, functions, sysmbols, modules, namespaces

5. Ambient declarations

6. Declaration merging


Trayan Iliev IPT – Intellectual Products & Technologies Ltd.

Разработка на уеб приложения с AJAX библиотеки

16/02/2015 Slide 3Copyright © 2003-2011 IPT – Intellectual Products & Technologies Ltd. All rights reserved.

TypeScript Hello World Quickstart

Install node and npm

Create an application project folder

Add a tsconfig.json to guide the TypeScript compiler

Add a typings.json that identifies missing TypeScript definition files

Add a package.json that defines the packages and scripts we need

Install the npm packages and typings files:

npm install typings install




Example package.json (1)

{ "name": "IPT_Reactor_Demo_JUG_Wishes_1_0", "version": "1.0.1", "description" : "Reactive WebSockets demo ...", "main": "app/app5.js", "keywords": ["WebSocket", "reactive", "demo", "rxjs", "RxNext", "angular2"], "author": "Trayan Iliev (http://iproduct.org)", "license": { "type": "Apache-2.0", "url": "http://opensource.org/licenses/apache2.0.php"}, "readme" : "README.md", "repository" : { "type" : "git", "url" : "https://github.com/iproduct/low-latency-high-throughput"},




{ "scripts": { "tsc": "tsc -p . -w", "start": "live-server --open=." }, "dependencies": { "angular2": "2.0.0-alpha.44", "rxjs": "^5.0.0-alpha.14", "systemjs": "^0.19.2" }, "devDependencies": { "live-server": "^0.8.2", "typescript": "^1.6.2" }}

Example package.json (2)

Runtime dependencies

Development dependencies




http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

How to Use npm as a Build Tool

npm run – prints all available commands (scripts) to console

Shortcut scripts: npm test (↔ npm run test ), npm start, npm stop

Pre- & Post- Hooks: preinstall→ install→ postinstall, uninstall, publish, update, test, lint, ...

Pass args: "server:dev:hmr": "npm run server:dev -- --hot"






index.html with SystemJS<html><head>... <script> <div id="content"></div> <script> System.config({ "baseURL": "/", "defaultJSExtensions": true, "map": { "es6-promise": "./node_modules/es6-promise/dist/es6-promise.js", } });

System.import('./greeter.js').then(null, console.error.bind(console)); </script></body></html>

index.html with Webpack<html><head><meta charset="utf-8"><title>TodoMVC in Pure TypeScript</title><link rel="stylesheet" href="css/index.css"></head><body> <section class="todoapp"> … </section>  <script type="text/javascript" src="./dist/bundle.js"></script></body></html>




Example Project Structure

typescript-projectsrc

app.ts / main.tstodo.controller.ts

distnode_modules ...typings ...index.htmlpackage.jsonstyles.csstsconfig.jsontypings.json




app.ts

import * as utils from './utils';import TodoMain from "./todo-main.ts";

const todo = new TodoMain('todos-typescript');

const $on = utils.$on;const setView = () => todo.controller.setView(document.location.hash);

$on(window, 'load', setView);$on(window, 'hashchange', setView);




todo-main.ts

class TodoMain { store: TodoStore; repository: TodoRepository; controller: TodoController; template: TodoTemplate; view: TodoView; constructor(name: string) { this.store = new TodoStore(name); this.repository = new TodoRepository(this.store); this.template = new TodoTemplate(); this.view = new TodoView(this.template); this.controller = new TodoController(this.repository, this.view); }}




TypeScript [http://www.typescriptlang.org/]

Typescript → since October 2012, Anders Hejlsberg (lead architect of C# and creator of Delphi and Turbo Pascal)

Targets large scale client-side and mobile applications by compile time type checking + @Decorators -> Microsoft, GoogleTypeScript is strictly superset of JavaScript, so any JS is valid TS

Source: Google Trends comparison

http://www.typescriptlang.org/

https://www.google.com/trends/explore#q=TypeScript%2C%20CoffeeScript%2C%20%2Fm%2F0h52xr1&date=1%2F2011%2053m&cmpt=q&tz=




EcmaScript 6 Compatibility[http://kangax.github.io/compat-table/es6/]

http://kangax.github.io/compat-table/es6/



SPA Development


TS Basic Types

Source: https://github.com/Microsoft/TypeScript-Handbook, License: Apache License Version 2.0, January 2004,http://www.apache.org/licenses/

Boolean – let isDone: boolean = false;

Number – let decimal: number = 6;

String – let fullName: string = `Jane Smith`; let sentence: string = `Hello, my name is ${ fullName }.`

Array – let list: Array<number> = [1, 2, 3];

Tuple – let x: [string, number];

Enum – enum Color {Red, Green, Blue}; let c:Color = Color.Green;

Any – let s:any="str"; let l: number=(<string>s).length;

Void – function printUser(): void {...}




SPA Development


TS Variable Declarations


let vs. varfor (let i = 0; i < 10 ; i++) { setTimeout(function() {console.log(i); }, 1000 * i);}

constconst data:StorageData = JSON.parse(localStorage[this.db]);const todos: ItemData[] = data.todos;

Object and array destructuringlet o = {a: "foo", b: 12, c: "bar"}let {a, b = 20} = o;

Function argument destructuringtype X = {a: string, b?: number}function f({a, b}: X): void {...}



BG OUG Meeting – Pravetz November 20, 2015

Slide 16Licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License

http://www.typescriptlang.org/docs/handbook

TypeScript Details

Types

Interfaces

Classes

Functions

Sysmbols

Modules

Namespaces

http://www.typescriptlang.org/docs/handbook



SPA Development


Example: jQuery


interface JQuery { text(content: string); } interface JQueryStatic { get(url: string, callback: (data: string) => any); (query: string): JQuery; }declare var $: JQueryStatic;$.get("http://mysite.org/divContent", function (data: string) { $("div").text(data); } );




SPA Development


Function Signature Overloading


interface JQueryStatic {

(ready: () => any): any;

}




SPA Development


Decalration Merging


interface Point { x: number; y: number; }function point(x: number, y: number): Point { return { x: x, y: y }; }namespace point { export var origin = point(0, 0); export function equals(p1: Point, p2: Point) { return p1.x == p2.x && p1.y == p2.y; } }var p1 = point(0, 0); var p2 = point.origin; var b = point.equals(p1, p2);



BG OUG Meeting – Pravetz November 20, 2015

Slide 20Licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License

https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md

TypeScript Specification





SPA Development


Thanks for Your Attention!

Questions?


Introduction to TypeScriptiproduct.org/wp-content/uploads/2016/06/AngularJS... · IPT –...

Documents

Transcript of Introduction to TypeScriptiproduct.org/wp-content/uploads/2016/06/AngularJS... · IPT –...