The document discusses using static types to validate function arguments and return values in JavaScript. It begins by showing an example of a sum function that validates its elements argument is an array of numbers, throwing errors otherwise. It notes benefits like preventing improper usage, but also drawbacks like problems only showing at runtime. The document then recommends employing type systems like TypeScript as a "body guard" to validate at compile time instead of runtime. It provides examples of TypeScript code validating function arguments and return types to catch errors early.

1. LET THE TYPE SYSTEM
BE YOUR FRIEND

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

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

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

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

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

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

8. HOW TO DEAL WITH IT?

9. HOW TO DEAL WITH IT?
1. TRUST DEVELOPERS

10. HOW TO DEAL WITH IT?
1. TRUST DEVELOPERS
2. TRY TO DEFEND

11. function sum(elements) {
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'
}
return elements.reduce((a, b) => a + b, 0)
}

12. function sum(elements) {
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'
}
return elements.reduce((a, b) => a + b, 0)
}

13. function sum(elements) {
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'
}
return elements.reduce((a, b) => a + b, 0)
}
✅ Function won’t be used improperly

14. function sum(elements) {
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'
}
return elements.reduce((a, b) => a + b, 0)
}
✅ Function won’t be used improperly
✅ Exception will hint a dev

15. function sum(elements) {
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'
}
return elements.reduce((a, b) => a + b, 0)
}
✅ Function won’t be used improperly
✅ Exception will hint a dev
👎 Problem won’t show until runtime

16. function sum(elements) {
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'
}
return elements.reduce((a, b) => a + b, 0)
}
✅ Function won’t be used improperly
✅ Exception will hint a dev
👎 Problem won’t show until runtime
👎 Extra code obfuscates the essence

17. function sum(elements) {
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'
}
return elements.reduce((a, b) => a + b, 0)
}
✅ Function won’t be used improperly
✅ Exception will hint a dev
👎 Problem won’t show until runtime
👎 Extra code obfuscates the essence
👎 Many edge-cases to consider

18. function sum(elements) {
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'
}
return elements.reduce((a, b) => a + b, 0)
}
✅ Function won’t be used improperly
✅ Exception will hint a dev
👎 Problem won’t show until runtime
👎 Extra code obfuscates the essence
👎 Many edge-cases to consider
👎 More tests to write

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

20. function avg(elements) {
if (elements.length === 0) {
throw 'Cannot calculate average for empty array'
}
return sum(elements) / elements.length
}

21. function avg(elements) {
if (!Array.isArray(elements)) {
throw 'Elements argument should be an array'
}
if (elements.length === 0) {
throw 'Cannot calculate average for empty array'
}
return sum(elements) / elements.length
}

22. function avg(elements) {
if (!Array.isArray(elements)) {
throw 'Elements argument should be an array'
}
if (elements.length === 0) {
throw 'Cannot calculate average for empty array'
}
return sum(elements) / elements.length
}
👎 Redundant validation

23. HOW TO DEAL WITH IT?

24. HOW TO DEAL WITH IT?
1. TRUST DEVELOPERS

25. HOW TO DEAL WITH IT?
1. TRUST DEVELOPERS
2. TRY TO DEFEND

26. HOW TO DEAL WITH IT?
1. TRUST DEVELOPERS
2. TRY TO DEFEND
3. EMPLOY A BODY GUARD

29. function sum(elements: number[]) {
return elements.reduce((a, b) => a + b, 0);
}
function avg(elements: number[]) {
if (elements.length === 0) {
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

30. function sum(elements: number[]) {
return elements.reduce((a, b) => a + b, 0);
}
function avg(elements: [number, ...number[]]) {
return sum(elements) / elements.length;
}
avg([]); // compile error
avg([1]); // ok
avg([1, 2]); // ok

31. function sum(elements: number[]) {
return elements.reduce((a, b) => a + b, 0);
}
function avg(elements: [number, ...number[]]) {
return sum(elements) / elements.length;
}
avg([]); // compile error
avg([1]); // ok
avg([1, 2]); // ok
type NonEmptyArray<T> = [T, ...T[]]

32. function sum(elements: number[]) {
return elements.reduce((a, b) => a + b, 0);
}
function avg(elements: [number, ...number[]]) {
return sum(elements) / elements.length;
}
avg([]); // compile error
avg([1]); // ok
avg([1, 2]); // ok
type NonEmptyArray<T> = [T, ...T[]]
function avg(elements: NonEmptyArray<number>) {
return sum(elements) / elements.length;
}
avg([]); // compile error
avg([1]); // ok
avg([1, 2]); // ok

33. HOWEVER…

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

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

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

39. ANY

40. BACKEND

41. 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,

42. 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,

43. ANY

44. ANY
UNKNOWN

45. ANY vs UNKNOWN

46. 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

47. 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
let value: unknown;
let value1: unknown = value; // OK
let value2: any = value; // OK
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

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

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

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

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

52. VALIDATION

53. VALIDATION

54. VALIDATION - DECODERS

55. DECODERS

56. DECODERS
VALIDATION

57. DECODERS
VALIDATION +

58. DECODERS
VALIDATION
OPTIMAL
STRUCTURE
EXTRACTION
+

59. VALIDATION - DECODERS

60. VALIDATION - DECODERS

61. VALIDATION - DECODERS

62. ARCHITECTURE

63. ARCHITECTURE
🗿
STATICALLY TYPED APPLICATION

64. ARCHITECTURE
🗿
STATICALLY TYPED APPLICATION
😈 BACKEND

65. ARCHITECTURE
🗿
STATICALLY TYPED APPLICATION
😈 BACKEND
😈 USER INPUT

66. ARCHITECTURE
🗿
STATICALLY TYPED APPLICATION
😈 BACKEND
😈 USER INPUT
🛂
VALIDATE

67. ARCHITECTURE
🗿
STATICALLY TYPED APPLICATION
😈 BACKEND
😈 USER INPUT
🛂
VALIDATE
🏷
TAG TYPE

68. ARCHITECTURE
🗿
STATICALLY TYPED APPLICATION
😈 BACKEND
😈 USER INPUT
🛂
VALIDATE
🏷
TAG TYPE

69. ARCHITECTURE
🗿
STATICALLY TYPED APPLICATION
😈 BACKEND
😈 USER INPUT
🛂
VALIDATE
🏷
TAG TYPE
{

70. ARCHITECTURE
🗿
STATICALLY TYPED APPLICATION
😈 BACKEND
😈 USER INPUT
🛂
VALIDATE
🏷
TAG TYPE
{Decoder

71. STATE OPTIMISATION

72. EXAMPLE 1

73. 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>
)
}

74. 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>
)
}

75. EXAMPLE 2
SURVEY

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

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

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

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

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

81. {
questions: [
{ prompt: 'Lubisz Uszanowanko?', response: 'Tak' },
{ prompt: 'Czym się zajmujesz?' },
{ prompt: 'Nutella z masłem czy bez?' },
],
currentIndex: 1,
}
✅

82. {
questions: [
{ prompt: 'Lubisz Uszanowanko?', response: 'Tak' },
{ prompt: 'Czym się zajmujesz?', response: 'Frontend' },
{ prompt: 'Nutella z masłem czy bez?' },
],
currentIndex: 1,
}

83. {
questions: [
{ prompt: 'Lubisz Uszanowanko?', response: 'Tak' },
{ prompt: 'Czym się zajmujesz?', response: 'Frontend' },
{ prompt: 'Nutella z masłem czy bez?' },
],
currentIndex: 1,
}
✅

84. {
questions: [
{ prompt: 'Lubisz Uszanowanko?', response: 'Tak' },
{ prompt: 'Czym się zajmujesz?', response: 'Frontend' },
{ prompt: 'Nutella z masłem czy bez?' },
],
currentIndex: 999,
}

85. {
questions: [
{ prompt: 'Lubisz Uszanowanko?', response: 'Tak' },
{ prompt: 'Czym się zajmujesz?', response: 'Frontend' },
{ prompt: 'Nutella z masłem czy bez?' },
],
currentIndex: 999,
}
❌

86. {
questions: [
{ prompt: 'Lubisz Uszanowanko?', response: 'Tak' },
{ prompt: 'Czym się zajmujesz?', response: 'Frontend' },
{ prompt: 'Nutella z masłem czy bez?' },
],
currentIndex: -1,
}

87. {
questions: [
{ prompt: 'Lubisz Uszanowanko?', response: 'Tak' },
{ prompt: 'Czym się zajmujesz?', response: 'Frontend' },
{ prompt: 'Nutella z masłem czy bez?' },
],
currentIndex: -1,
}
❌

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

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

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

91. {
questions: [
{ prompt: 'Lubisz Uszanowanko?' },
{ prompt: 'Czym się zajmujesz?' },
{ prompt: 'Nutella z masłem czy bez?' },
],
currentQuestion: { prompt: 'No elo' },
}

92. {
questions: [
{ prompt: 'Lubisz Uszanowanko?' },
{ prompt: 'Czym się zajmujesz?' },
{ prompt: 'Nutella z masłem czy bez?' },
],
currentQuestion: { prompt: 'No elo' },
}
❌

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

94. NEW REQUIREMENT: AT LEAST ONE QUESTION
{
questions: [],
currentQuestion: { prompt: 'No elo' },
}

95. ZIP LIST

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

97. {
previous: [],
currentQuestion: { prompt: 'Lubisz Uszanowanko?' },
remaining: [
{ prompt: 'Czym się zajmujesz?' },
{ prompt: 'Nutella z masłem czy bez?' },
],
}

98. {
previous: [],
currentQuestion: { prompt: 'Lubisz Uszanowanko?' },
remaining: [
{ prompt: 'Czym się zajmujesz?' },
{ prompt: 'Nutella z masłem czy bez?' },
],
}
✅

99. {
previous: [
{ prompt: 'Lubisz Uszanowanko?', response: 'Tak' }
],
currentQuestion: { prompt: 'Czym się zajmujesz?' },
remaining: [
{ prompt: 'Nutella z masłem czy bez?' },
],
}

100. {
previous: [
{ prompt: 'Lubisz Uszanowanko?', response: 'Tak' }
],
currentQuestion: { prompt: 'Czym się zajmujesz?' },
remaining: [
{ prompt: 'Nutella z masłem czy bez?' },
],
}
✅

101. {
previous: [
{ prompt: 'Lubisz Uszanowanko?', response: 'Tak' },
{ prompt: 'Czym się zajmujesz?', response: 'Frontend' },
],
currentQuestion: { prompt: 'Nutella z masłem czy bez?' },
remaining: [],
}

102. {
previous: [
{ prompt: 'Lubisz Uszanowanko?', response: 'Tak' },
{ prompt: 'Czym się zajmujesz?', response: 'Frontend' },
],
currentQuestion: { prompt: 'Nutella z masłem czy bez?' },
remaining: [],
}
✅

103. „
„
— Richard Feldman
MAKE IMPOSSIBLE STATES
IMPOSSIBLE

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

105. SUMMARY

106. SUMMARY

107. YOUR EFFORT
SUMMARY

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

109. YOUR EFFORT
SUMMARY
🗿 Static types 1st, edge-cases 2nd
🛂 Validate data before you let it in

110. YOUR EFFORT
SUMMARY
🗿 Static types 1st, edge-cases 2nd
🛂 Validate data before you let it in
👌 Turn the validated data to optimal type

111. YOUR EFFORT
SUMMARY
🗿 Static types 1st, edge-cases 2nd
🛂 Validate data before you let it in
👌 Turn the validated data to optimal type
❓ Try "unknown" instead of "any"

112. YOUR EFFORT
SUMMARY
🗿 Static types 1st, edge-cases 2nd
🛂 Validate data before you let it in
👌 Turn the validated data to optimal type
❓ Try "unknown" instead of "any"
❌ Avoid undefined/null if you can

113. YOUR EFFORT
SUMMARY
🗿 Static types 1st, edge-cases 2nd
🛂 Validate data before you let it in
👌 Turn the validated data to optimal type
❓ Try "unknown" instead of "any"
❌ Avoid undefined/null if you can
💡 Take some inspiration from statically typed languages like Elm or Haskell

114. WHAT YOU GET IN
RETURN?

115. SUMMARY
WHAT YOU GET IN RETURN?
LESS TEST TO WRITE

116. SUMMARY
WHAT YOU GET IN RETURN?
LESS TEST TO WRITE

117. SUMMARY
WHAT YOU GET IN RETURN?
APP WILL IDENTIFY PROBLEMS NOT ON IT’S SIDE

118. SUMMARY
WHAT YOU GET IN RETURN?
APP WILL IDENTIFY PROBLEMS NOT ON IT’S SIDE

119. SUMMARY
WHAT YOU GET IN RETURN?
MORE CONFIDENCE

120. SUMMARY
WHAT YOU GET IN RETURN?
MORE CONFIDENCE

121. 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
🔗

122. BOOK RECOMMENDATIONS
📚

123. BOOK RECOMMENDATIONS
📚

124. BOOK RECOMMENDATIONS
📚

125. BOOK RECOMMENDATIONS
📚

126. THANK YOU