TypeScript. TypeScript. RxJS

Size: px

Start display at page:

Download "TypeScript. TypeScript. RxJS"

Jayson Gregory
5 years ago
Views:

2 Web

3 About Me

4 TypeScript TypeScript RxJS

6 2014 X 4 0 Mac/Windows Native

7 UI Web Angular React JavaScript IM User DING Contact RPC Native Nw.js C++ Cef

8 Web 11 nw.js

9 Web

10 App

11 IM DING DING

12 ->

13 RPC 10W + IM DING User Contact

14 RPC

15 import axios from 'axios'; export const getuserbyuid = (uid) => { return axios.get('/users?id=' + uid).then((response) => { return response.data; }); }; getuserbyuid(123).then((user) => { console.log(user.avatar); console.log(user.bio); User }); console

16 User { "uid": 12345, "nickname": " ", "sex": "M", "avatar": "@xfdjj", "isactive": true, "org": { orgname :, orgid : 0001 } }

17 User { } "uid": 12345, "nickname": " ", "sex": "M", "avatar": "@xfdjj", "bio": "Web Developer", "isactive": true, "org": { "mainorgid": "00001", "orglist": [ { "orgid": "00001", "orgname": " ", "departmentlist": [ { "departid": "0001", "departname": " " } ] } ] }

18 User { } "uid": 12345, "nickname": " ", "sex": "M", "avatar": "@xfdjj", "bio": "Web Developer", "isactive": true, "org": { "mainorgid": "00001", "orglist": [ { "orgid": "00001", "orgname": " ", "departmentlist": [ { "departid": "0001", "departname": " " } ] } ] } org let mainorgid = user.org.mainorgid; Uncaught TypeError: Cannot read property 'mainorgid' of undefined

19 TypeScript

20 User // user.ts import axios from 'axios'; export enum SEX { Male = 'M', Female = 'F' } export interface IDepartment { departid: string; departname: string } export interface IOrgItem { orgid: string; orgname: string; departmentlist: IDepartment[]; } export interface IOrg { mainorgid: string; orglist: IOrgItem[]; } export interface IUser { uid: number; nickname: string; sex: SEX, avatar: string, bio: string, isactive: boolean, org?: IOrg } export const getuserbyuid = (uid: number): Promise<IUser> => { return axios.get('/users?id=' + uid).then((response) => { return response.data as IUser; }) }; getuserbyuid(123).then((user) => { console.log(user.avatar); console.log(user.bio); })

21 User

22 types RPC types types

23 types RPC IDL Java Interface

24 types RPC.idl IDL AST.ts IDL Parser IDL Parser TS

25 types RPC

26 types RPC.idl TS JS OC C++ Android Java Server Java

27 TypeScript TypeScript ES7 (ES.next) ES6 ES5

28 TypeScript Anders Hejlsberg C# JavaScript ES5, ES2015, ES2016,ES2017 JavaScript Node.js JavaScript TS JS

29 TypeScript JS TypeScript React, Vue, Angular1.x, Redux, React-redux, lodash, moment ts Angular 2+, RxJS, cycle.js, vscode, ant-design IDE / TypeScript, WebStorm, VSCode, VSStudio, Sublime, Atom, Eclipse, Emacs, Vim

30 TS JS TS import allowjs JS node_modules/react Type Check TS import type JS node_modules/react types react

31 TS 3K+ DefinitelyTyped/DefinitelyTyped Github JS

32 TS JS JS.d.ts type package.json types { } main :./entry.js, types :./entry.d.ts

34 import { Component } from selector: 'app-root', templateurl: './app.component.html', styleurls: ['./app.component.css'] }) export class AppComponent { title = 'app'; countrylist: string[]; constructor() { this.countrylist = ['china', 'USA']; } Angular TS template Type Check } Angular AOT TS Type Check

https://vuejs.org/v2/guide/typescript.html import Vue from 'vue'; import Component from 'vue-class-component'; @Component({ template: require('./home.

35 import Vue from 'vue'; import Component from template: require('./home.html') }) export class HomeComponent extends Vue { package: string = 'vue-webpack-typescript'; } dev build Chrome

36 TypeScript jsx jsx js Type Check

37 switch case type

38 TS TS JS ES ES

41 var mainsearch = function(keyword) { var workerlist = [ }; orgsearch(keyword), friendsearch(keyword), localmsgsearch(keyword) ]; var result = []; workerlist.foreach(function(item){ item.then(function (data) { result.push(data); if (result.length === workerlist.length) { searcheventemitter.emit('finish', rebuildsearchresult(result)); } else{ searcheventemitter.emit('update', rebuildsearchresult(result)); } }); }) API Promise mainsearch emit value Promise callback

42 var onkeywordchange = function(keyword) { mainsearch(keyword); this.issearching = true; }; Bug: Race Condition searcheventemitter.on('update', function (result) { this.searchresult = result; }); searcheventemitter.on('finish', function (result) { this.searchresult = result; this.issearching = false; });

43 var mainsearch = function(keyword, taskid) { var workerlist = [ orgsearch(keyword), friendsearch(keyword), localmsgsearch(keyword) ]; var result = []; workerlist.foreach(function(item){ item.then(function (data) { result.push(data); if (result.length === workerlist.length) { searcheventemitter.emit('finish', rebuildsearchresult(result), taskid); } else{ searcheventemitter.emit('update', rebuildsearchresult(result), taskid); } }) }); };

44 var taskid = 0; var onkeywordchange = function(keyword) { taskid++; mainsearch(keyword, taskid); this.searchresult = {}; Race Condition this.issearching = true; }; searcheventemitter.on('update', function (result, _taskid) { if (_taskid === taskid) { this.searchresult = result; } }); searcheventemitter.on('finish', function (result, _taskid) { if (_taskid === taskid) { this.searchresult = result; this.issearching = false; } });

45 RxJS

46 const mainsearch = function(keyword){ return Rx.Observable.merge( Rx.Observable.fromPromise(orgSearch(keyword)), Rx.Observable.fromPromise(friendSearch(keyword)), Rx.Observable.fromPromise(localMsgSearch(keyword)) }; ).scan((acc, value) => { if (value.type === 'org') { acc.org = value.data; } else if (value.type === 'friend') { acc.friend = value.data; } else if (value.type === 'localmsg') { acc.localmsg = value.data; } return acc; }, {}); Array.prototype.reduce rebuildsearchresult Observable emit value API

47 V0 Promise V1 frompromise V2 Observable.merge Value V0 V1 V2 next value complete

48 const keyword$ = new Rx.Subject(); const onkeywordchange = function(keyword) { keyword$.next(keyword); }; Race Condition keyword$.switchmap((keyword) => { return Rx.Observable.merge( Rx.Observable.of({}), mainsearch(keyword) ).materialize(); }).subscribe((item) => { if (item.kind === 'N') { this.issearching = true; this.searchresult = item.value; } else if (item.kind === 'C') { this.issearching = false; } });

49 K0 K1 switchmap( return merge({}, mainsearch(keyword)) ) V00 V01 V10 V11 V12 V02 switchmap projected Observable Race Condition

50 Profile Profile -> Profile Cancel API Component API Cancel Rx.js Observable API API

51 Thanks Q&A allenm56

Decoupled Drupal with Angular

Decoupled Drupal with Angular Agenda Introduction Short intro on Drupal What is decoupled and choosing the right architecture Introduction to Angular Setting up Angular development environment Demo Application