799 lines
23 KiB
HTML
Executable File
799 lines
23 KiB
HTML
Executable File
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
<title>reveal.js</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/reveal.js/css/reset.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/reveal.js/css/reveal.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/reveal.js/css/theme/black.css">
|
|
|
|
<!-- Theme used for syntax highlighting of code -->
|
|
<link rel="stylesheet" href="https://unpkg.com/reveal.js/lib/css/monokai.css">
|
|
|
|
<style>
|
|
.reveal pre code {
|
|
max-height: unset;
|
|
padding: .5rem;
|
|
border-radius: .25rem;
|
|
}
|
|
</style>
|
|
|
|
<!-- Printing and PDF exports -->
|
|
<script>
|
|
var link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.type = 'text/css';
|
|
link.href = window.location.search.match(/print-pdf/gi) ? 'https://unpkg.com/reveal.js/css/print/pdf.css' :
|
|
'https://unpkg.com/reveal.js/css/print/paper.css';
|
|
document.getElementsByTagName('head')[0].appendChild(link);
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="reveal">
|
|
<div class="slides">
|
|
<section data-background-color="#357EDD">
|
|
<h1>Typescript</h1>
|
|
|
|
<ul class="fragment">
|
|
<li>What is typescript?</li>
|
|
<li>History & Today</li>
|
|
<li>Why?</li>
|
|
<li>Basics</li>
|
|
<li>Typescript Utilities</li>
|
|
<li>Examples</li>
|
|
<li>Future</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<section data-markdown data-background-color="#CDECFF">
|
|
<script type="text/template">
|
|
## What is Typescript?
|
|
|
|
- Superset of Javascript <!-- .element: class="fragment" -->
|
|
- Enables typschecking <!-- .element: class="fragment" -->
|
|
</script>
|
|
</section>
|
|
<section data-transition="fade-out slide-in">
|
|
<h3>Javascript</h3>
|
|
<pre><code data-trim class="hljs">
|
|
let a = 'a string'
|
|
a = 5
|
|
a = [1, 'two', {three: true}]
|
|
</code></pre>
|
|
</section>
|
|
<section data-transition="fade-in slide-out">
|
|
<h3>Typescript</h3>
|
|
<pre><code data-trim class="hljs">
|
|
let a = 'a string' // a is a string now
|
|
a = 5 // ❌
|
|
a = [1, 'two', {three: true}] // ❌
|
|
</code></pre>
|
|
</section>
|
|
</section>
|
|
<section data-background-color="#FBF1A9">
|
|
<section data-markdown>
|
|
<script type="text/template">
|
|
## Brief History Lesson
|
|
|
|
- <!-- .element: class="fragment" --> Development started in 2009 (codename Strada)
|
|
- <!-- .element: class="fragment" --> Problems scaling the office 365 suite (released June 2011)
|
|
- <!-- .element: class="fragment" --> Lead by Anders Hejlsberg (Author of C#, Delphi & Tubro Pascal) and Luke Hoban (Part of tc39)
|
|
- <!-- .element: class="fragment" --> 2012: <span><!-- .element: class="fragment fade-in" --><span><!-- .element: class="fragment highlight-red" -->World End</span></span><span> <!-- .element: class="fragment fade-in" -->; Released to public `v0.8`</span>
|
|
- <!-- .element: class="fragment" --> 2014: Moved to Github
|
|
</script>
|
|
</section>
|
|
<section data-markdown>
|
|
<script type="text/template">
|
|
## Today
|
|
<small>2 Oct. 2019</small>
|
|
|
|
- <!-- .element: class="fragment" --> ~54k Stargazers
|
|
- <!-- .element: class="fragment" --> ~10k closed PRs (167 open)
|
|
- <!-- .element: class="fragment" --> ~20k closed issues (~3.5k open)
|
|
- <!-- .element: class="fragment" --> 419 Contributors
|
|
- <!-- .element: class="fragment" --> Made & <b>Maintained</b> by Microsoft
|
|
</script>
|
|
</section>
|
|
</section>
|
|
<section data-background-color="#FFDFDF">
|
|
<section data-markdown>
|
|
<script type="text/template">
|
|
## So Why?
|
|
|
|
- <!-- .element: class="fragment" --> Less Errors
|
|
- <!-- .element: class="fragment" --> Less Bug-Hunting
|
|
- <!-- .element: class="fragment" --> More work gets done
|
|
- <!-- .element: class="fragment" --> Maintainability
|
|
- <!-- .element: class="fragment" --> Enables fast fixes
|
|
- <!-- .element: class="fragment" --> Dev. does not have to be context aware
|
|
- <!-- .element: class="fragment" --> Autocompletition, "Smart" IDEs, etc.
|
|
</script>
|
|
</section>
|
|
<section data-background-image="https://media.giphy.com/media/YXpp9YxWhyWBy/giphy.gif"></section>
|
|
</section>
|
|
<section data-background-color="#E8FDF5">
|
|
<section>
|
|
<h2>TS Config</h2>
|
|
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
npm i typescript
|
|
tsc --init
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>General</h3>
|
|
|
|
<ul>
|
|
<li class="fragment">target <small>(ES2014, ..., ES2019, ESNEXT, ...)</small></li>
|
|
<li class="fragment">module <small>(commonjs, es2016, esnext, ...)</small></li>
|
|
<li class="fragment">jsx</li>
|
|
<li class="fragment">esModuleInterop</li>
|
|
<li class="fragment">allowSyntheticDefaultImports</li>
|
|
<li class="fragment">experimentalDecorators</li>
|
|
<li class="fragment">emitDecoratorMetadata</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<h3>Type Checking</h3>
|
|
|
|
<ul>
|
|
<li class="fragment">noImplicitAny</li>
|
|
<li class="fragment">strictNullChecks</li>
|
|
<li class="fragment">strictFunctionTypes</li>
|
|
<li class="fragment">strictBindCallApply</li>
|
|
<li class="fragment">strictPropertyInitialization</li>
|
|
<li class="fragment">noImplicitThis</li>
|
|
<li class="fragment">alwaysStrict</li>
|
|
<li class="fragment">noImplicitReturns</li>
|
|
<li class="fragment">noFallthroughCasesInSwitch</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<h3>Production</h3>
|
|
|
|
<ul>
|
|
<li class="fragment">noUnusedLocals</li>
|
|
<li class="fragment">noUnusedParameters</li>
|
|
<li class="fragment">removeComments</li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
<h2>Basics</h2>
|
|
</section>
|
|
<section data-transition="slide-id fade-out">
|
|
<h3>Simple types</h3>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
const a: string = 'a string'
|
|
const b: number = 5
|
|
const c: boolean = true
|
|
const d: string[] = ['a', 'b', 'c']
|
|
const e: number[] = [1, 2, 3]
|
|
</code></pre>
|
|
</section>
|
|
<section data-transition="fate-in slide-out">
|
|
<h3>Simple types</h3>
|
|
<pre><code data-trim class="hljs">
|
|
const a = 'a string'
|
|
const b = 5
|
|
const c = true
|
|
const d = ['a', 'b', 'c']
|
|
const e = [1, 2, 3]
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Types</h3>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
type StrinOrNumber = string | number
|
|
</code></pre>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
type StringOrNumberOrBoolean = StringOrNumber | boolean
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Modifiers</h3>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
const a?: string // string | undefined
|
|
|
|
const obj = {
|
|
a: string,
|
|
b?: number,
|
|
}
|
|
|
|
funntion log(msg?: string) {}
|
|
</code></pre>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
class {
|
|
b!: string
|
|
}
|
|
|
|
obj!.one!.two!.three
|
|
</code></pre>
|
|
</section>
|
|
<section data-transition="slide-id fade-out">
|
|
<h3>Interfaces</h3>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
interface Pizza {
|
|
slices: number
|
|
round: boolean
|
|
name: string
|
|
}
|
|
|
|
const pizza: Pizza = {
|
|
slices: 4,
|
|
round: true,
|
|
name: 'Hawaii'
|
|
}
|
|
</code></pre>
|
|
</section>
|
|
<section data-transition="slide-out fade-in">
|
|
<h3>Interfaces</h3>
|
|
<pre><code data-trim class="hljs">
|
|
interface Pizza {
|
|
slices: 4 | 8
|
|
round: boolean
|
|
name: 'Margherita' | 'Parmigiana'
|
|
}
|
|
|
|
const pizza: Pizza = {
|
|
slices: -1, // ❌
|
|
round: true,
|
|
name: 'Margherita'
|
|
}
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Interfaces</h3>
|
|
<pre><code data-trim class="hljs">
|
|
interface A {
|
|
one: string
|
|
}
|
|
|
|
interface B extends A {
|
|
two: number
|
|
three?: string
|
|
}
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Interfaces</h3>
|
|
<pre><code data-trim class="hljs">
|
|
interface Project {
|
|
name: string,
|
|
paymentBasis: 'fix' | 'hour'
|
|
}
|
|
</code></pre>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
interface GoodProject extends Project {
|
|
paymentBasis: 'hour'
|
|
}
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Functions</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
function add(x: number, y: number): number {
|
|
return x + y
|
|
}
|
|
|
|
const add = (x: number, y: number): number => {
|
|
return x + y
|
|
}
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
function choose<T, P>(a: T, b: P): T | P {
|
|
if (something)
|
|
return a
|
|
else
|
|
return b
|
|
}
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
const waitForMe = async (text:string): Promise<string> => text
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Overloading</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
function add(x: number): number
|
|
function add(x: number, y: number = 1): number {
|
|
return x + y
|
|
}
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
function add(a: string, b: string): string
|
|
function add(a: number, b: number): number
|
|
function add(a: string | number, b: string | number): string | number {
|
|
if (a.constructor.name === 'String') return a + b
|
|
else return a + b
|
|
}
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Classes</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
class User {
|
|
private id: string
|
|
public readonly username: string
|
|
friends: User[] = []
|
|
|
|
constructor() {
|
|
this.id = 'abc'
|
|
this.username = 'John Doe'
|
|
}
|
|
|
|
private doSomeStuff() {}
|
|
}
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Generics</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
function choose<T, P>(a: T, b: P): T | P {
|
|
if (something)
|
|
return a
|
|
else
|
|
return b
|
|
}
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
type Something<T> = {
|
|
a: string,
|
|
b: T
|
|
}
|
|
</code></pre>
|
|
</section>
|
|
</section>
|
|
|
|
<section>
|
|
<section>
|
|
<h2>Typescript Utilities Types</h2>
|
|
<ul class="fragment">
|
|
<li>Partial & Required</li>
|
|
<li>Readonly</li>
|
|
<li>Pick & Omit</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<h3>Partial / Required</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
interface Props {
|
|
a: number;
|
|
b: string;
|
|
};
|
|
|
|
const x: Props = { a: 5 }; // Error: property 'b' missing
|
|
|
|
const y: Partial<Props> = { a: 5 }; // OK
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
interface Props {
|
|
a?: number;
|
|
b?: string;
|
|
};
|
|
|
|
const x: Props = { a: 5 }; // OK
|
|
|
|
const y: Required<Props> = { a: 5 }; // Error: property 'b' missing
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Readonly</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
interface Todo {
|
|
title: string;
|
|
}
|
|
|
|
const todo: Readonly<Todo> = {
|
|
title: 'Delete inactive users',
|
|
};
|
|
|
|
todo.title = 'Hello'; // Error: cannot reassign a readonly property
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Pick / Omit</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
interface Todo {
|
|
title: string;
|
|
description: string;
|
|
completed: boolean;
|
|
}
|
|
|
|
const todo: Pick<Todo, 'title' | 'completed'> = {
|
|
title: 'Clean room',
|
|
completed: false,
|
|
};
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
interface Todo {
|
|
title: string;
|
|
description: string;
|
|
completed: boolean;
|
|
}
|
|
|
|
const todo: Omit<Todo, 'description'> = {
|
|
title: 'Clean room',
|
|
completed: false,
|
|
};
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h2>Also there are...</h2>
|
|
<ul>
|
|
<li>Exclude & Extract</li>
|
|
<li>Record</li>
|
|
<li>NonNullable</li>
|
|
<li>ReturnType</li>
|
|
<li>InstanceType</li>
|
|
<li>ThisType</li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
<h2>Examples</h2>
|
|
</section>
|
|
<section>
|
|
<h3>Constructor</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
class Auto {
|
|
wheels: number
|
|
|
|
constructor(wheel: number) {
|
|
this.wheels = wheel
|
|
}
|
|
}
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
class Auto {
|
|
constructor(private wheel: number) { }
|
|
}
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
class Auto {
|
|
wheels!: number
|
|
|
|
constructor(init: typeof Auto) {
|
|
Object.assign(this, init)
|
|
}
|
|
}
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Advanced Stuff</h3>
|
|
<pre><code data-trim class="hljs">
|
|
import { NonFunctionKeys } from 'utility-types'
|
|
|
|
class Auto {
|
|
wheels!: number
|
|
doors?: number
|
|
// ...
|
|
|
|
constructor(init: Pick<Auto, NonFunctionKeys<Auto>>) {
|
|
Object.assign(this, init)
|
|
}
|
|
}
|
|
|
|
const a = new Auto({
|
|
wheels: 4, // Required
|
|
doors: 5, // Optional
|
|
})
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>React Higher Order Components</h3>
|
|
<pre><code data-trim class="hljs" data-line-numbers="1,2,5">
|
|
function withLayout<P extends object>(WrappedComponent: React.ComponentType<P>) {
|
|
return (props: P) => (
|
|
<div id='app'>
|
|
<Header/>
|
|
<WrappedComponent {...props}/>
|
|
<Footer/>
|
|
</div>
|
|
);
|
|
}
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Return Type depends on argument</h3>
|
|
<pre><code data-trim class="hljs">
|
|
function choose<T, P>(a: T, b: P, takeFirst?: false): P;
|
|
function choose<T, P>(a: T, b: P, takeFirst: true): T;
|
|
function choose<T, P>(a: T, b: P, takeFirst?: boolean): T | P {
|
|
if (takeFirst)
|
|
return a
|
|
else
|
|
return b
|
|
}
|
|
|
|
choose('a', 1).includes('a'); // error
|
|
choose('a', 1) * 2;
|
|
choose('a', 1, true) * 2; // error
|
|
choose('a', 1, true).includes('a');
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Argument type depends on another argument</h3>
|
|
<pre><code data-trim class="hljs">
|
|
function checkLock<
|
|
B extends { alwaysUnlocked?: boolean },
|
|
O extends (B extends { alwaysUnlocked: true } ? {} : { locked: boolean })
|
|
>(obj: O, options?: B) {
|
|
return options && options.alwaysUnlocked || !obj.locked
|
|
}
|
|
|
|
checkLock({}); // error
|
|
checkLock({ locked: false });
|
|
checkLock({ locked: true, foo: 'bar' });
|
|
|
|
checkLock({}, { alwaysUnlocked: false }); // error
|
|
checkLock({}, { alwaysUnlocked: true });
|
|
checkLock({ foo: 'bar' }, { alwaysUnlocked: true });
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Discriminated unions</h3>
|
|
<pre><code data-trim class="hljs">
|
|
type ColumnProps = {
|
|
width: number;
|
|
autoCalculateWidth?: false;
|
|
} | {
|
|
width?: undefined;
|
|
autoCalculateWidth: true;
|
|
}
|
|
|
|
// error
|
|
const props: ColumnProps = {
|
|
width: 4,
|
|
autoCalculateWidth: true,
|
|
};
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Merging Objects together</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
function merge<O, T>(master: O, myFeatureBranchFrom3MonthsAgo: T): O | T {
|
|
return {
|
|
...master,
|
|
...myFeatureBranchFrom3MonthsAgo,
|
|
};
|
|
}
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
type Merge<O, T> = Omit<O, keyof T> & T;
|
|
|
|
function merge<O, T>(master: O, myFeatureBranchFrom3MonthsAgo: T): Merge<O, T> {
|
|
return {
|
|
...master,
|
|
...myFeatureBranchFrom3MonthsAgo,
|
|
};
|
|
}
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Distinguish union types</h3>
|
|
<pre><code data-trim class="hljs">
|
|
enum Type {
|
|
A = 'A',
|
|
B = 'B',
|
|
}
|
|
|
|
interface ImagineCoolExampleName {
|
|
type: Type.A;
|
|
foo: string;
|
|
bar: string;
|
|
}
|
|
|
|
interface ImTooLazyToThinkOfRealWorldExamples {
|
|
type: Type.B;
|
|
foo: number;
|
|
blubb: string;
|
|
}
|
|
|
|
function distinguishType(obj: ImagineCoolExampleName | ImTooLazyToThinkOfRealWorldExamples) {
|
|
if (obj.type === Type.A) {
|
|
obj.foo.includes('whatever');
|
|
obj.bar;
|
|
} else {
|
|
obj.blubb.includes('something');
|
|
obj.foo.toFixed(2);
|
|
}
|
|
}
|
|
</code></pre>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
<h3>The agony of Object.keys</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
const someObj = {
|
|
a: 'a',
|
|
b: 'b',
|
|
2: 'c',
|
|
};
|
|
|
|
function filterByKeys(keys: (keyof typeof someObj)[]): ((typeof someObj)[keyof typeof someObj])[] {
|
|
return keys.map(key => someObj[key]);
|
|
}
|
|
|
|
filterByKeys(Object.keys(someObj)); // error
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
function getKeysFromObject<
|
|
T extends {}, K extends string = (keyof T & string)
|
|
>(object: T): K[] {
|
|
const keyPredicate = (key: string): key is K =>
|
|
object.hasOwnProperty(key) && typeof object[key] !== 'undefined' && object[key] !== null;
|
|
|
|
return Object
|
|
.keys(object)
|
|
.filter<K>(keyPredicate);
|
|
};
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>about predicates</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
interface SomeInterface {
|
|
what: string,
|
|
you: string,
|
|
}
|
|
|
|
const someArray: (SomeInterface | null)[] = [
|
|
{ what: 'ever', you: 'like' },
|
|
null,
|
|
{ what: 'the fuck', you: 'want' },
|
|
null,
|
|
];
|
|
|
|
// error: Signature ... must be a type predicate ?!
|
|
const filteredArray: SomeInterface[] = someArray.filter<SomeInterface>(value => !!value);
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
const predicate = (value: SomeInterface | null): value is SomeInterface => !!value;
|
|
|
|
const workingArray: SomeInterface[] = someArray.filter(predicate);
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Back to Object.keys</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
const someObj = {
|
|
a: 'a',
|
|
b: 'b',
|
|
2: 'c',
|
|
};
|
|
|
|
function filterByKeys(keys: (keyof typeof someObj)[]): ((typeof someObj)[keyof typeof someObj])[] {
|
|
return keys.map(key => someObj[key]);
|
|
}
|
|
|
|
function getKeysFromObject<
|
|
T extends {}, K extends string = (keyof T & string)
|
|
>(object: T): K[] {
|
|
const keyPredicate = (key: string): key is K =>
|
|
object.hasOwnProperty(key) && typeof object[key] !== 'undefined' && object[key] !== null;
|
|
|
|
return Object
|
|
.keys(object)
|
|
.filter<K>(keyPredicate);
|
|
};
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
filterByKeys(getKeysFromObject<typeof someObj>(someObj));
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Tradeoffs</h3>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
function getKeysFromObject<
|
|
T extends {}, K extends string = (keyof T & string)
|
|
>(object: T): K[] {
|
|
const keyPredicate = (key: string): key is K =>
|
|
object.hasOwnProperty(key) && typeof object[key] !== 'undefined' && object[key] !== null;
|
|
|
|
return Object
|
|
.keys(object)
|
|
.filter<K>(keyPredicate);
|
|
};
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
const testObject = {
|
|
2: 'teststring',
|
|
'testkey': 2131,
|
|
'otherkey': null,
|
|
3: null,
|
|
};
|
|
|
|
getKeysFromObject(testObject); // ('testkey' | 'otherkey')[] --- :(
|
|
getKeysFromObject<typeof testObject, '2' | 'testkey'>(testObject); // meh...
|
|
</code></pre>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
<h2>Future</h2>
|
|
</section>
|
|
<section>
|
|
<h3>Optional Chaining</h3>
|
|
<i>TS 3.7</i>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
a && a.b && a.b.c // 🤬
|
|
</code></pre>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
a?.b?.c // 🚀
|
|
</code></pre>
|
|
</section>
|
|
<section>
|
|
<h3>Null Coalescing</h3>
|
|
<i>TS 3.7</i>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
something || 'default'
|
|
</code></pre>
|
|
<pre class="fragment fade-in-then-semi-out"><code data-trim class="hljs">
|
|
false || 'default' // => 'default'
|
|
0 || 'default' // => 'default'
|
|
</code></pre>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
something ?? 'default' // 🚀
|
|
</code></pre>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
0 ?? 'default' // => 0
|
|
false ?? 'default' // => false
|
|
</code></pre>
|
|
<pre class="fragment"><code data-trim class="hljs">
|
|
(something === null || something === undefined) ? something : 'default'
|
|
</code></pre>
|
|
</section>
|
|
</section>
|
|
<section data-background-color="#FFFCEB">
|
|
<section>
|
|
<h1>Questions❓🤔</h1>
|
|
</section>
|
|
<section>
|
|
<h1>k thx bye 👋</h1>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/reveal.js/js/reveal.js"></script>
|
|
|
|
<script>
|
|
Reveal.initialize({
|
|
width: "100%",
|
|
height: "100%",
|
|
margin: .1,
|
|
minScale: 1,
|
|
maxScale: 1,
|
|
transition: 'slide',
|
|
hash: true,
|
|
fragmentInURL: true,
|
|
slideNumber: 'c/t',
|
|
dependencies: [{
|
|
src: 'https://unpkg.com/reveal.js/plugin/markdown/marked.js'
|
|
},
|
|
{
|
|
src: 'https://unpkg.com/reveal.js/plugin/markdown/markdown.js'
|
|
},
|
|
{
|
|
src: 'https://unpkg.com/reveal.js/plugin/notes/notes.js',
|
|
async: true
|
|
},
|
|
{
|
|
src: 'https://unpkg.com/reveal.js/plugin/highlight/highlight.js',
|
|
async: true
|
|
}
|
|
]
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |