@phxtypescript

Meetup, November 13th, 2018

Agenda

  • Dinner
  • PHX TS and TypeScript News
  • What's new in TS 3.1 and 3.2
  • WebAudio and Web Animations

Sponsors

Hello!

Paul Shannon

  • Sr Engineer @ SitePen
  • Talkscript Podcast
  • Phoenix TypeScript
  • Committer: Dojo, Intern
  • devpaul

TypeScript News

  • Vue 3 rewritten in TypeScript
  • create-react-app support for TypeScript
  • NativeScript 5 release
  • Angular 7 release
  • Dojo 4 release
  • Babel 7 @babel/preset-typescript

Typescript 3.1

Late Sept 2018

Mappable tuple and array types


				type MapToPromise<T> = { [K in keyof T]: Promise<T[K]> };

				type Coordinate = [number, number]

				type PromiseCoordinate = MapToPromise<Coordinate>; // [Promise<number>, Promise<number>]

Property declarations on functions


				function readImage(path: string, callback: (err: any, image: Image) => void) {
					// ...
				}

				readImage.sync = (path: string) => {
					const contents = fs.readFileSync(path);
					return decodeImageSync(contents);
				}

TypeScript 3.2

Late Nov 2018

Strict bind, call, and apply

  • Chipping away at variadic kinds
  • Typing challenges around higher-order functions
  • Adds a --strictBindCallApply flag

				let f00 = foo.bind(undefined);  // (a: number, b: string) => string
				let f01 = foo.bind(undefined, 10);  // (b: string) => string
				let f02 = foo.bind(undefined, 10, "hello");  // () => string

BigInt

  • TS39 BigInt support for 64-bit numbers
  • Loosely equal to Number
  • We need 64-bit numbers because of WebAssembly

Allow non-unit types in union discriminants


				type Result<T> = { error?: undefined, value: T } | { error: Error };

				function test(x: Result<number>) {
					if (!x.error) {
						x.value;  // number (used to be error)
					}
					else {
						x.error.message;  // string
					}
				}

				test({ value: 10 });
				test({ error: new Error("boom") });

Generic spread expressions in object literals


				function taggedObject<T, U extends string>(obj: T, tag: U) {
					return { ...obj, tag };  // T & { tag: U }
				}

				let x = taggedObject({ x: 10, y: 20 }, "point");  // { x: number, y: number } & { tag: "point" }

Non-generic spreads are merged as much as possible


				function foo1<T>(t: T, obj1: { a: string }, obj2: { b: string }) {
					// { a: string, x: number } & T & { b: string, y: number }
					return { ...obj1, x: 1, ...t, ...obj2, y: 2 };
				}

Non-generic spread expressions continue to be processed as before

  • Call and construct signatures are stripped
  • only non-method properties are preserved
  • for properties with the same name, the type of the rightmost property is used

(!) This differs from intersection types

Generic object rest variables and parameters


				function excludeTag<T extends { tag: string }>(obj: T) {
					let { tag, ...rest } = obj;
					return rest;  // Pick<T, Exclude<keyof T, "tag">>
				}

				const taggedPoint = { x: 10, y: 20, tag: "point" };
				const point = excludeTag(taggedPoint);  // { x: number, y: number }

Other improvements

TypeScript 3.3

Late Jan 2019

Implement partial type arguments


				class Foo<T, U> {
					constructor(value1: T, value2: U) { }
				}

				const instance = new Foo<_, string>(0, "");

Dogs vs Cats

The eternal battle

  • Tabs vs Spaces
  • ASI or ;
  • Vi or Emacs
  • OOP or Functional
  • Typed or Untyped
  • Roll your own or Framework
The real question is should we use dog or cat gifs for our comments?

How do we decide?

We built an app

  • Web Audio
  • Web Animations
  • Modern Standards
  • Dojo Framework
  • Reactive architecture
  • NestJS backend
  • now deployment

WebAudio

Web Animations

Vote NOW!

https://catsvsdogs.now.sh

And the winner is....

Thanks!

Paul Shannon

  • Sr Engineer @ SitePen
  • Talkscript Podcast
  • Phoenix TypeScript
  • Committer: Dojo, Intern
  • devpaul