From 9d84603315d84946c673fdc2369e1f3d84e7d173 Mon Sep 17 00:00:00 2001 From: cupcakearmy Date: Wed, 2 Oct 2019 14:20:02 +0200 Subject: [PATCH] initial commit --- index.html | 533 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 533 insertions(+) create mode 100755 index.html diff --git a/index.html b/index.html new file mode 100755 index 0000000..1f7ca29 --- /dev/null +++ b/index.html @@ -0,0 +1,533 @@ + + + + + + + + reveal.js + + + + + + + + + + + + + + + +
+
+
+

Typescript

+ +
    +
  • What is typescript?
    • +
  • History & Today
    • +
  • Why?
    • +
  • Basics
    • +
  • Typescript Utilities
    • +
  • Examples
    • +
  • Future
    • +
+
+
+
+ +
+
+

Javascript

+ 

+							let a = 'a string'
+							a = 5
+							a = [1, 'two', {three: true}]
+
+
+
+

Typescript

+ 

+								let a = 'a string' https:// a is a string now
+								a = 5 https:// ❌
+								a = [1, 'two', {three: true}] https:// ❌
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+

TS Config

+ + 

+						npm i typescript
+						tsc --init
+
+
+
+

General

+ +
    +
  • target (ES2014, ..., ES2019, ESNEXT, ...)
    • +
  • module (commonjs, es2016, esnext, ...)
    • +
  • jsx
    • +
  • esModuleInterop
    • +
  • allowSyntheticDefaultImports
    • +
  • experimentalDecorators
    • +
  • emitDecoratorMetadata
    • +
+
+
+

Type Cheking

+ +
    +
  • noImplicitAny
    • +
  • strictNullChecks
    • +
  • strictFunctionTypes
    • +
  • strictBindCallApply
    • +
  • strictPropertyInitialization
    • +
  • noImplicitThis
    • +
  • alwaysStrict
    • +
  • noImplicitReturns
    • +
  • noFallthroughCasesInSwitch
    • +
+
+
+

Production

+ +
    +
  • noUnusedLocals
    • +
  • noUnusedParameters
    • +
  • removeComments
    • +
+
+
+
+
+

Basics

+
+
+

Simple types

+ 

+						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]
+
+
+
+

Simple types

+ 

+						const a = 'a string'
+						const b = 5
+						const c = true
+						const d = ['a', 'b', 'c']
+						const e = [1, 2, 3]
+
+
+
+

Types

+ 

+						type StrinOrNumber = string | number
+						type StringOrNumberOrBoolean = StringOrNumber | boolean
+
+
+
+

Modifiers

+ 

+						const a: string
+						const b?: string
+						const c!: string
+
+						constructor(field?: text)
+
+
+
+

Interfaces

+ 

+						interface Pizza {
+							slices: number
+							round: boolean
+							name: string
+						}
+
+						const pizza: Pizza = {
+							slices: 4,
+							round: true,
+							name: 'Hawaii'
+						}
+
+
+
+

Interfaces

+ 

+						interface Pizza {
+							slices: 4 | 8
+							round: boolean
+							name: 'Margherita' | 'Parmigiana'
+						}
+
+						const pizza: Pizza = {
+							slices: -1, https:// ❌
+							round: true,
+							name: 'Margherita'
+						}
+
+
+
+

Interfaces

+ 

+						interface A {
+							one: string
+						}
+						
+						interface B extends A {
+							two: number
+							three?: string
+						}
+
+
+
+

Interfaces

+ 

+						interface Project {
+							name: string,
+							paymentBasis: 'fix' | 'hour'
+						}
+
+ 

+						interface GoodProject extends Project {
+							paymentBasis: 'hour'
+						}
+
+
+
+

Functions

+ 

+						function add(x: number, y: number): number {
+							return x + y
+						}
+						
+						const add = (x: number, y: number): number => {
+							return x + y
+						}
+
+ 

+						function choose<T, P>(a: T, b: P): T | P {
+							if (something)
+								return a
+							else
+								return b
+						}
+
+ 

+						const waitForMe = async (text:string): Promise<string> => text
+
+
+
+

Overloading

+ 

+						function add(x: number): number
+						function add(x: number, y: number = 1): number {
+							return x + y
+						}
+
+ 

+						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
+						}
+
+
+
+

Generics

+ 

+						function choose<T, P>(a: T, b: P): T | P {
+							if (something)
+								return a
+							else
+								return b
+						}
+
+ 

+						type Something<T> = {
+							a: string,
+							b: T
+						}
+
+
+
+ +
+
+

Typescript Utilities Types

+
    +
  • Partial & Required
    • +
  • Readonly
    • +
  • Pick & Omit
    • +
+
+
+

Partial / Required

+ 

+						interface Props {
+							a: number;
+							b: string;
+						};
+						
+						const x: Props = { a: 5 }; https:// Error: property 'b' missing
+						
+						const y: Partial<Props> = { a: 5 }; https:// OK
+
+ 

+						interface Props {
+							a?: number;
+							b?: string;
+						};
+						
+						const x: Props = { a: 5 }; https:// OK
+						
+						const y: Required<Props> = { a: 5 }; https:// Error: property 'b' missing
+
+
+
+

Readonly

+ 

+						interface Todo {
+							title: string;
+						}
+						
+						const todo: Readonly<Todo> = {
+							title: 'Delete inactive users',
+						};
+						
+						todo.title = 'Hello'; https:// Error: cannot reassign a readonly property
+
+
+
+

Pick / Omit

+ 

+						interface Todo {
+							title: string;
+							description: string;
+							completed: boolean;
+						}
+						
+						const todo: Pick<Todo, 'title' | 'completed'> = {
+							title: 'Clean room',
+							completed: false,
+						};
+
+ 

+						interface Todo {
+							title: string;
+							description: string;
+							completed: boolean;
+						}
+						
+						const todo: Omit<Todo, 'description'> = {
+							title: 'Clean room',
+							completed: false,
+						};
+
+
+
+

Also there are...

+
    +
  • Exclude & Extract
    • +
  • Record
    • +
  • NonNullable
    • +
  • ReturnType
    • +
  • InstanceType
    • +
  • ThisType
    • +
+
+
+ +
+
+

Examples

+
+
+

Constructor

+ 

+						class Auto {
+							wheels: number
+						
+							constructor(wheel: number) {
+								this.wheels = wheel
+							}
+						}
+
+ 

+						class Auto {
+							constructor(private wheel: number) { }
+						}
+
+ 

+						class Auto {
+							wheels: number
+						
+							constructor(init: typeof Auto) {
+								Object.assign(this, init)
+							}
+						}
+
+
+
+

Advanced Stuff

+ 

+						class Auto {
+							wheels?: number
+							doors?: number
+							https:// ...
+						
+							constructor(init: Partial<Auto>) {
+								Object.assign(this, init)
+							}
+						}
+
+						const a = new Auto({
+							doors: 5,
+						})
+
+
+
+

Advanced Stuff

+ 

+						type RequireSome<T, K extends keyof T> = {
+							[X in Exclude<keyof T, K>]?: T[X]
+						} & {
+							[P in K]-?: T[P]
+						}
+
+						class Auto {
+							wheels!: number
+							doors?: number
+							https:// ...
+						
+							constructor(init: RequireSome<Auto, 'wheels'>) {
+								Object.assign(this, init)
+							}
+						}
+
+						const a = new Auto({
+							wheels: 4,
+							doors: 5,
+						})
+
+
+
+

React Higher Order Components

+ 

+						function withLayout<P extends object>(WrappedComponent: React.ComponentType<P>) {
+							return (props: P) => (
+								<div id='app'>
+									<Header/>
+									<WrappedComponent {...props}/>
+									<Footer/>
+								</div>
+							);
+						}
+
+
+
+
+
+ + + + + + + \ No newline at end of file