Upload
others
View
15
Download
0
Embed Size (px)
Citation preview
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.
IPT – Intellectual Products & Technologies Trayan Iliev, http://www.iproduct.org/
AngularJS and TypeScript
SPA Development
Slide 2Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
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
Trayan Iliev IPT – Intellectual Products & Technologies Ltd.
Разработка на уеб приложения с AJAX библиотеки
16/02/2015 Slide 4Copyright © 2003-2011 IPT – Intellectual Products & Technologies Ltd. All rights reserved.
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"},
Trayan Iliev IPT – Intellectual Products & Technologies Ltd.
Разработка на уеб приложения с AJAX библиотеки
16/02/2015 Slide 5Copyright © 2003-2011 IPT – Intellectual Products & Technologies Ltd. All rights reserved.
{ "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
Trayan Iliev IPT – Intellectual Products & Technologies Ltd.
Разработка на уеб приложения с AJAX библиотеки
16/02/2015 Slide 6Copyright © 2003-2011 IPT – Intellectual Products & Technologies Ltd. All rights reserved.
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"
Trayan Iliev IPT – Intellectual Products & Technologies Ltd.
Разработка на уеб приложения с AJAX библиотеки
16/02/2015 Slide 7Copyright © 2003-2011 IPT – Intellectual Products & Technologies Ltd. All rights reserved.
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>
Trayan Iliev IPT – Intellectual Products & Technologies Ltd.
Разработка на уеб приложения с AJAX библиотеки
16/02/2015 Slide 8Copyright © 2003-2011 IPT – Intellectual Products & Technologies Ltd. All rights reserved.
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> <!-- Main --> <script type="text/javascript" src="./dist/bundle.js"></script></body></html>
Trayan Iliev IPT – Intellectual Products & Technologies Ltd.
Разработка на уеб приложения с AJAX библиотеки
16/02/2015 Slide 9Copyright © 2003-2011 IPT – Intellectual Products & Technologies Ltd. All rights reserved.
Example Project Structure
typescript-projectsrc
app.ts / main.tstodo.controller.ts
distnode_modules ...typings ...index.htmlpackage.jsonstyles.csstsconfig.jsontypings.json
Trayan Iliev IPT – Intellectual Products & Technologies Ltd.
Разработка на уеб приложения с AJAX библиотеки
16/02/2015 Slide 10Copyright © 2003-2011 IPT – Intellectual Products & Technologies Ltd. All rights reserved.
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);
Trayan Iliev IPT – Intellectual Products & Technologies Ltd.
Разработка на уеб приложения с AJAX библиотеки
16/02/2015 Slide 11Copyright © 2003-2011 IPT – Intellectual Products & Technologies Ltd. All rights reserved.
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); }}
Trayan Iliev IPT – Intellectual Products & Technologies Ltd.
Разработка на уеб приложения с AJAX библиотеки
16/02/2015 Slide 12Copyright © 2003-2011 IPT – Intellectual Products & Technologies Ltd. All rights reserved.
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
Trayan Iliev IPT – Intellectual Products & Technologies Ltd.
Разработка на уеб приложения с AJAX библиотеки
16/02/2015 Slide 13Copyright © 2003-2011 IPT – Intellectual Products & Technologies Ltd. All rights reserved.
EcmaScript 6 Compatibility[http://kangax.github.io/compat-table/es6/]
IPT – Intellectual Products & Technologies Trayan Iliev, http://www.iproduct.org/
AngularJS and TypeScript
SPA Development
Slide 14Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
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 {...}
IPT – Intellectual Products & Technologies Trayan Iliev, http://www.iproduct.org/
AngularJS and TypeScript
SPA Development
Slide 15Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
TS Variable Declarations
Source: https://github.com/Microsoft/TypeScript-Handbook, License: Apache License Version 2.0, January 2004,http://www.apache.org/licenses/
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 {...}
IPT – Intellectual Products & Technologies Trayan Iliev, http://www.iproduct.org/
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
IPT – Intellectual Products & Technologies Trayan Iliev, http://www.iproduct.org/
AngularJS and TypeScript
SPA Development
Slide 17Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
Example: jQuery
Source: https://github.com/Microsoft/TypeScript-Handbook, License: Apache License Version 2.0, January 2004,http://www.apache.org/licenses/
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); } );
IPT – Intellectual Products & Technologies Trayan Iliev, http://www.iproduct.org/
AngularJS and TypeScript
SPA Development
Slide 18Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
Function Signature Overloading
Source: https://github.com/Microsoft/TypeScript-Handbook, License: Apache License Version 2.0, January 2004,http://www.apache.org/licenses/
interface JQueryStatic {
(ready: () => any): any;
}
IPT – Intellectual Products & Technologies Trayan Iliev, http://www.iproduct.org/
AngularJS and TypeScript
SPA Development
Slide 19Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
Decalration Merging
Source: https://github.com/Microsoft/TypeScript-Handbook, License: Apache License Version 2.0, January 2004,http://www.apache.org/licenses/
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);
IPT – Intellectual Products & Technologies Trayan Iliev, http://www.iproduct.org/
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
IPT – Intellectual Products & Technologies Trayan Iliev, http://www.iproduct.org/
AngularJS and TypeScript
SPA Development
Slide 21Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
Thanks for Your Attention!
Questions?