Introduction to TypeScript

Size: px

Start display at page:

Download "Introduction to TypeScript"

Tabitha Charles
5 years ago
Views:

1 AngularJS and TypeScript SPA Development, Introduction to TypeScript web: 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. Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 1

2 AngularJS and TypeScript 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 Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 2

3 Ltd. 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 Copyright Ltd. All rights reserved. 16/02/2015 Slide 3

4 Ltd. 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": " ( "license": { "type": "Apache-2.0", "url": " "readme" : "README.md", "repository" : { "type" : "git", "url" : " Copyright Ltd. All rights reserved. 16/02/2015 Slide 4

5 Ltd. { Example package.json (2) "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" Runtime dependencies Copyright Ltd. All rights reserved. Development dependencies 16/02/2015 Slide 5

6 Ltd. 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" Copyright Ltd. All rights reserved. 16/02/2015 Slide 6

7 Ltd. 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> Copyright Ltd. All rights reserved. 16/02/2015 Slide 7

8 Ltd. 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> Copyright Ltd. All rights reserved. 16/02/2015 Slide 8

9 Ltd. Example Project Structure typescript-project src app.ts / main.ts todo.controller.ts dist node_modules... typings... index.html package.json styles.css tsconfig.json typings.json Copyright Ltd. All rights reserved. 16/02/2015 Slide 9

10 Ltd. 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); Copyright Ltd. All rights reserved. 16/02/2015 Slide 10

11 Ltd. 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); Copyright Ltd. All rights reserved. 16/02/2015 Slide 11

12 Ltd. TypeScript [ 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 -> Microsoft, Google TypeScript is strictly superset of JavaScript, so any JS is valid TS Copyright Ltd. All rights reserved. 16/02/2015 Slide 12 Source: Google Trends comparison

Ltd. EcmaScript 6 Compatibility [http://kangax.github.

14 AngularJS and TypeScript SPA Development, TS Basic Types 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 {... Source: Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 License: Apache International License Version License 2.0, January 2004, Slide 14

15 AngularJS and TypeScript SPA Development, TS Variable Declarations let vs. var for (let i = 0; i < 10 ; i++) { settimeout(function() {console.log(i);, 1000 * i); const const data:storagedata = JSON.parse(localStorage[this.db]); const todos: ItemData[] = data.todos; Object and array destructuring let o = {a: "foo", b: 12, c: "bar" let {a, b = 20 = o; Function argument destructuring type X = {a: string, b?: number function f({a, b: X): void {... Source: Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 License: Apache International License Version License 2.0, January 2004, Slide 15

16 BG OUG Meeting Pravetz November 20, 2015, TypeScript Details Types Interfaces Classes Functions Sysmbols Modules Namespaces Licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License Slide 16

17 AngularJS and TypeScript 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(" function (data: string) { $("div").text(data); ); Source: Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 License: Apache International License Version License 2.0, January 2004, Slide 17

18 AngularJS and TypeScript SPA Development, Function Signature Overloading interface JQueryStatic { (ready: () => any): any; Source: Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 License: Apache International License Version License 2.0, January 2004, Slide 18

19 AngularJS and TypeScript 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); Source: Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 License: Apache International License Version License 2.0, January 2004, Slide 19

20 BG OUG Meeting Pravetz November 20, 2015, TypeScript Specification blob/master/doc/spec.md Licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License Slide 20

21 AngularJS and TypeScript SPA Development, Thanks for Your Attention! Questions? Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 21

Advanced React JS + Redux Development

Advanced React JS + Redux Development Course code: IJ - 27 Course domain: Software Engineering Number of modules: 1 Duration of the course: 40 astr. hours / 54 study 1 hours Sofia, 2016 Copyright 2003-2016