From: Bill Erickson Date: Tue, 2 Apr 2019 15:13:54 +0000 (-0400) Subject: typescript lightning talk X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=5a5f38493cc70a0c6750bd6c1e326da52ed6581e;p=working%2Frandom.git typescript lightning talk Signed-off-by: Bill Erickson --- diff --git a/images/vscode.png b/images/vscode.png new file mode 100644 index 000000000..5990c1dbe Binary files /dev/null and b/images/vscode.png differ diff --git a/images/vscode2.png b/images/vscode2.png new file mode 100644 index 000000000..b84528fc9 Binary files /dev/null and b/images/vscode2.png differ diff --git a/tsfun.adoc b/tsfun.adoc index 284a5f8d7..dc9ad35da 100644 --- a/tsfun.adoc +++ b/tsfun.adoc @@ -1,4 +1,4 @@ -= Visual Studio Code For Developers += Typescript Fun :author: Bill Erickson, Software Development Engineer, King County Library System :email: berickxx@gmail.com :date: Evergreen Conference 2019 @@ -6,42 +6,64 @@ :backend: slidy :max-width: 45em :deckjs_theme: web-2.0 +:data-uri: -== 5 Angular / Typescript Tips +== Typescript Fun == Getters and Setters [source,javascript] ------------------------------------------------------------------------- private _msg: string; + set msg(s: string) { - console.debug('Got a new msg:', s); this._msg = s; } get msg(): string { return this._msg; } -this.msg = "hello"; // Produces console message -// NOT this.msg("hello") or this.msg() +this.msg = "hello"; +const m = this.msg; ------------------------------------------------------------------------- -== Async Functions +== Setters -* Any function that returns a promise can be prefixed with the 'async' - keyword -* Any 'async' function that calls another 'async' function can 'await' - the results of the called function. -* The result of the called function is the value passed to the promise - resolution. -* You can write async code that looks like sync code. +[source,javascript] +------------------------------------------------------------------------- +set msg(s: string) { + + this._msg = s; + + this.doImportStuff(); +} +------------------------------------------------------------------------- + +== Setters with Angular Component Inputs + +[source,javascript] +------------------------------------------------------------------------- +@Input() set msg(s: string) { + + this._msg = s; -== Async Functions: Promise Chain + console.debug('Parent component passed new value for msg', s); + + this.doImportStuff(); +} +------------------------------------------------------------------------- + + +== Async Functions... + +== Traditional Promise Chain [source,javascript] ------------------------------------------------------------------------- -async modifyCar(): Promise { - return loadCar() +modifyCar(): Promise { + + return this.loadCar() + .then((car: Car) => this.colorDialog.open(car)) .then((color: string) => this.applyColor(color)) @@ -50,14 +72,13 @@ async modifyCar(): Promise { } ------------------------------------------------------------------------- -== Async Functions: await +== Converted to Async Functions [source,javascript] ------------------------------------------------------------------------- +async modifyCarColor(): Promise { -async modifyCarColor(): Promise { - - const car: Car = await loadCar(); + const car: Car = await this.loadCar(); const color: string = await this.colorDialog.open(car); @@ -67,18 +88,32 @@ async modifyCarColor(): Promise { } ------------------------------------------------------------------------- -== Async Functions: loadCar() +== Async Function Requirements -[source,javascript] -------------------------------------------------------------------------- -async loadCar(): Promise { - return new Promise((resolve, reject) => { - // Network stuff that takes time... - resolve(myCar); - }); -} -------------------------------------------------------------------------- +[role="incremental"] +* Any function that returns a promise can be prefixed with the 'async' + keyword +* Any 'async' function that calls another 'async' function can 'await' + the results of the called function. +* The result of the called function is the value passed to the promise + resolution. + +== Typescript IDE Support + +image::images/vscode.png[VS Code] +image::images/vscode2.png[VS Code] +== Visual Studio Code +[role="incremental"] +* Open Source: https://github.com/Microsoft/vscode +* Linux, Mac, and Windows +* Native Typescript Support +* Real-time Typescript compiler warnings +* Indicates unused imports +* Recommendations +* Autocomplete +* Code Block Collapsing +* Variety of Plugins diff --git a/tsfun.html b/tsfun.html new file mode 100644 index 000000000..670fdd14d --- /dev/null +++ b/tsfun.html @@ -0,0 +1,6738 @@ + + + + +Typescript Fun + + + + + + + + + +
+

Typescript Fun

+
+
+
+
+

Getters and Setters

+
+
+
+
private _msg: string;
+
+set msg(s: string) {
+    this._msg = s;
+}
+get msg(): string {
+    return this._msg;
+}
+
+this.msg = "hello";
+const m = this.msg;
+
+
+
+

Setters

+
+
+
+
set msg(s: string) {
+
+    this._msg = s;
+
+    this.doImportStuff();
+}
+
+
+
+

Setters with Angular Component Inputs

+
+
+
+
@Input() set msg(s: string) {
+
+    this._msg = s;
+
+    console.debug('Parent component passed new value for msg', s);
+
+    this.doImportStuff();
+}
+
+
+
+

Async Functions…

+
+
+
+
+

Traditional Promise Chain

+
+
+
+
modifyCar(): Promise<CarStuff> {
+
+    return this.loadCar()
+
+        .then((car: Car) => this.colorDialog.open(car))
+
+        .then((color: string) => this.applyColor(color))
+
+        .then((cost: number) => this.addCost(cost))
+}
+
+
+
+

Converted to Async Functions

+
+
+
+
async modifyCarColor(): Promise<CarStuff> {
+
+    const car: Car = await this.loadCar();
+
+    const color: string = await this.colorDialog.open(car);
+
+    const cost: number = await this.applyColor(color);
+
+    return this.addCost(cost);
+}
+
+
+
+

Async Function Requirements

+
+
    +
  • + +Any function that returns a promise can be prefixed with the async + keyword + +
    • +
  • + +Any async function that calls another async function can await + the results of the called function. + +
    • +
  • + +The result of the called function is the value passed to the promise + resolution. + +
    • +
+
+
+
+

Typescript IDE Support

+
+
+
+VS Code +
+
+
+
+VS Code +
+
+
+
+
+

Visual Studio Code

+
+
    +
  • + +Open Source: https://github.com/Microsoft/vscode + +
    • +
  • + +Linux, Mac, and Windows + +
    • +
  • + +Native Typescript Support + +
    • +
  • + +Real-time Typescript compiler warnings + +
    • +
  • + +Indicates unused imports + +
    • +
  • + +Recommendations + +
    • +
  • + +Autocomplete + +
    • +
  • + +Code Block Collapsing + +
    • +
  • + +Variety of Plugins + +
    • +
+
+
+ +