Let the type system be your friend

LET THE TYPE SYSTEM
BE YOUR FRIEND

ABOUT ME
👤 Wiktor Toporek
💼 PHP → Frontend → Node.js
👍 Functional programming
❤ Elm
🐦 Twitter: @vViktorPL

function sum(elements) {
return elements.reduce((a, b) => a + b, 0)
}

HOW TO DEAL WITH IT?
1. TRUST DEVELOPERS

1. TRUST DEVELOPERS
2. TRY TO DEFEND

  if (!Array.isArray(elements)) {
    throw 'Elements argument should be an array'
  }
  if (elements.some(
    element => typeof element !== 'number'
  )) {
    throw 'All elements should be a number'
  }
}

  }
  if (elements.some(
  )) {
  }
}
✅ Function won’t be used improperly

  }
  if (elements.some(
  )) {
  }
}
✅ Exception will hint a dev

  }
  if (elements.some(
  )) {
  }
}
👎 Problem won’t show until runtime

  }
  if (elements.some(
  )) {
  }
}
👎 Extra code obfuscates the essence

  }
  if (elements.some(
  )) {
  }
}
👎 Many edge-cases to consider

  }
  if (elements.some(
  )) {
  }
}
👎 Many edge-cases to consider
👎 More tests to write

function avg(elements) {
return sum(elements) / elements.length
}

  if (elements.length === 0) {
    throw 'Cannot calculate average for empty array'
  }
}

  }
  }
}

  }
  }
}
👎 Redundant validation

1. TRUST DEVELOPERS
2. TRY TO DEFEND
3. EMPLOY A BODY GUARD

function sum(elements: number[]) {
  return elements.reduce((a, b) => a + b, 0);
}
function avg(elements: number[]) {
    throw Error('Cannot calculate average for empty array');
  }
  return sum(elements) / elements.length;
}
avg(['x', 'y']); // compile error
sum(['x', 'y']); // compile error
avg([1, 2]); // ok
sum([1, 2]); // ok

}
function avg(elements: [number, ...number[]]) {
}
avg([]);     // compile error
avg([1]);    // ok
avg([1, 2]); // ok

}
}
avg([1]);    // ok
avg([1, 2]); // ok
type NonEmptyArray<T> = [T, ...T[]]

}
}
avg([1]);    // ok
avg([1, 2]); // ok
type NonEmptyArray<T> = [T, ...T[]]
function avg(elements: NonEmptyArray<number>) {
}
avg([1]);    // ok
avg([1, 2]); // ok

HOWEVER…
let x: any = 'foo'
console.log(x.anythingIsPossible())

HOWEVER…
ANY
let x: any = 'foo'
console.log(x.anythingIsPossible())

BACKEND
[{
  "_id": {
    "$oid": "5968dd23fc13ae04d9000001"
  },
  "product_name": "sildenafil citrate",
  "supplier": "Wisozk Inc",
  "quantity": 261,
  "unit_cost": "$10.47"
}, {
  "_id": {
    "$oid": "5968dd23fc13ae04d9000002"
  },
  "product_name": "Mountain Juniperus ashei",
  "supplier": "Keebler-Hilpert",
  "quantity": 292,
  "unit_cost": "$8.74"
}, {
  "_id": {
    "$oid": "5968dd23fc13ae04d9000003"
  },
  "product_name": "Dextromathorphan HBr",
  "supplier": "Schmitt-Weissnat",
  "quantity": 211,

let value: any;
let value1: unknown = value;   // OK
let value2: any = value;       // OK
let value3: boolean = value;   // OK
let value4: number = value;    // OK
let value5: string = value;    // OK
let value6: object = value;    // OK
let value7: any[] = value;     // OK
let value8: Function = value;  // OK
ANY vs UNKNOWN

let value: any;
let value3: boolean = value;   // OK
let value4: number = value;    // OK
let value5: string = value;    // OK
let value6: object = value;    // OK
let value7: any[] = value;     // OK
let value8: Function = value;  // OK
let value: unknown;
let value3: boolean = value;   // Error
let value4: number = value;    // Error
let value5: string = value;    // Error
let value6: object = value;    // Error
let value7: any[] = value;     // Error
let value8: Function = value;  // Error
ANY vs UNKNOWN

const value = JSON.parse('123')
console.log(value.toUpperCase())
ANY vs UNKNOWN

const value: unknown = JSON.parse('123')
ANY vs UNKNOWN

const value: unknown = JSON.parse('123')
if (typeof value === 'string') {
}
ANY vs UNKNOWN

DECODERS
VALIDATION
OPTIMAL
STRUCTURE
EXTRACTION
+

ARCHITECTURE
🗿 
STATICALLY TYPED APPLICATION

ARCHITECTURE
🗿 
😈 BACKEND

ARCHITECTURE
🗿 
😈 BACKEND
😈 USER INPUT

ARCHITECTURE
🗿 
😈 BACKEND
😈 USER INPUT
🛂 
VALIDATE

ARCHITECTURE
🗿 
😈 BACKEND
😈 USER INPUT
🛂 
VALIDATE
🏷 
TAG TYPE

ARCHITECTURE
🗿 
😈 BACKEND
😈 USER INPUT
🛂 
VALIDATE
🏷 
TAG TYPE
{

ARCHITECTURE
🗿 
😈 BACKEND
😈 USER INPUT
🛂 
VALIDATE
🏷 
TAG TYPE
{Decoder

ARRAY | UNDEFINED
type Author = {
  name: string,
  books?: Book[],
}
type Book = {
  title: string,
}
render() {
  const author = this.props.author
  return (
    <div>
      <p>{author.name}</p>
      <ul>
        {author.books && author.books.map(
({ title }) => <li>{title}</li>
)}
      </ul>
    </div>
  )
}

ARRAY | UNDEFINED
type Author = {
  name: string,
  books: Book[],
}
type Book = {
  title: string,
}
render() {
  const author = this.props.author
  return (
    <div>
      <p>{author.name}</p>
      <ul>
        {author.books.map(
({ title }) => <li>{title}</li>
)}
      </ul>
    </div>
  )
}

type Survey = {
  questions: Question[],
}
type Question = {
  prompt: string,
  response?: string,
}

type Survey = {
  currentIndex: number,
}
type Question = {
  prompt: string,
  response?: string,
}
REQUIREMENT: QUESTIONS NAVIGATION (FORWARD/BACK)

{
  questions: [
    { prompt: 'Lubisz Uszanowanko?' },
    { prompt: 'Czym się zajmujesz?' },
    { prompt: 'Nutella z masłem czy bez?' },
  ],
  currentIndex: 0,
}

{
  questions: [
  ],
  currentIndex: 0,
}
✅

{
  questions: [
    { prompt: 'Lubisz Uszanowanko?', response: 'Tak' },
  ],
  currentIndex: 1,
}

{
  questions: [
  ],
  currentIndex: 1,
}
✅

{
  questions: [
    { prompt: 'Czym się zajmujesz?', response: 'Frontend' },
  ],
  currentIndex: 1,
}

{
  questions: [
  ],
  currentIndex: 1,
}
✅

{
  questions: [
  ],
  currentIndex: 999,
}

{
  questions: [
  ],
  currentIndex: 999,
}
❌

{
  questions: [
  ],
  currentIndex: -1,
}

{
  questions: [
  ],
  currentIndex: -1,
}
❌

type Survey = {
  currentQuestion: Question,
}
type Question = {
  prompt: string,
  response?: string,
}

{
  questions: [
  ],
  currentQuestion: this.questions[0],
}

{
  questions: [
  ],
  currentQuestion: this.questions[0],
}
✅

{
  questions: [
  ],
  currentQuestion: { prompt: 'No elo' },
}

{
  questions: [
  ],
}
❌

{
questions: [],
}

NEW REQUIREMENT: AT LEAST ONE QUESTION
{
questions: [],
}

type Survey = {
  previous: Question[],
  currentQuestion: Question,
  remaining: Question[]
}
type Question = {
  prompt: string,
  response?: string,
}

{
  previous: [],
  currentQuestion: { prompt: 'Lubisz Uszanowanko?' },
  remaining: [
  ],
}

{
  previous: [],
  currentQuestion: { prompt: 'Lubisz Uszanowanko?' },
  remaining: [
  ],
}
✅

{
  previous: [
    { prompt: 'Lubisz Uszanowanko?', response: 'Tak' }
  ],
  currentQuestion: { prompt: 'Czym się zajmujesz?' },
  remaining: [
  ],
}

{
  previous: [
    { prompt: 'Lubisz Uszanowanko?', response: 'Tak' }
  ],
  currentQuestion: { prompt: 'Czym się zajmujesz?' },
  remaining: [
  ],
}
✅

{
  previous: [
  ],
  currentQuestion: { prompt: 'Nutella z masłem czy bez?' },
  remaining: [],
}

{
  previous: [
  ],
  currentQuestion: { prompt: 'Nutella z masłem czy bez?' },
  remaining: [],
}
✅

„
„
— Richard Feldman
MAKE IMPOSSIBLE STATES
IMPOSSIBLE

https://www.youtube.com/watch?v=IcgmSRJHu_8

YOUR EFFORT
SUMMARY
🗿 Static types 1st, edge-cases 2nd

YOUR EFFORT
SUMMARY
🛂 Validate data before you let it in

YOUR EFFORT
SUMMARY
👌 Turn the validated data to optimal type

YOUR EFFORT
SUMMARY
❓ Try "unknown" instead of "any"

YOUR EFFORT
SUMMARY
❌ Avoid undefined/null if you can

YOUR EFFORT
SUMMARY
❌ Avoid undefined/null if you can
💡 Take some inspiration from statically typed languages like Elm or Haskell

SUMMARY
WHAT YOU GET IN RETURN?
LESS TEST TO WRITE

SUMMARY
APP WILL IDENTIFY PROBLEMS NOT ON IT’S SIDE

SUMMARY
MORE CONFIDENCE

LINKS
• https://fsharpforfunandprofit.com/posts/designing-with-types-making-illegal-states-unrepresentable/
• https://guide.elm-lang.org/effects/json.html#json-decoders
• https://www.youtube.com/watch?v=IcgmSRJHu_8
• https://stackoverflow.com/questions/40794368/what-is-an-opaque-type-in-elm-and-why-is-it-valuable
• https://basarat.gitbooks.io/typescript/docs/tips/nominalTyping.html
• https://www.youtube.com/watch?v=WnTw0z7rD3E
🔗

Let the type system be your friend

More Related Content

What's hot

More from The Software House

Recently uploaded

Let the type system be your friend