The talk starts from very basic concepts, but evolves to an advanced topic: a codebase free of runtime exception. It gives the programmer a good perspective of all the resources available to fill the language gaps to create a bullet-proof code.

1. why you should care
Types in
JavaScript

2. Jean Emer
@jcemer
jcemer.com

5. Porto Alegre
Rio Grande do Sul

8. Work&Co
Digital Products

9. ***

10. 01What is
a type?

11. 4 "JS"
2.1
893
"is"
"Cool"

12. 4 "JS"
2.1
893
"is"
"Cool"

13. A type helps group
similar values on
which common
operations can be
performed

14. 4
2.1
893
12
2.3
5.3 *
56
1
3
4
6
9.4

15. Objectstring
number
undefined
null
boolean
symbol
Literal
Array
Function
Date
String
Number
Boolean
…
primitives

16. undefined?

17. Types are a
significant part to
understand how a
language work

18. 1. Primitives are immutable
and don't have properties
2. Object are mutable
3. String, Number, Boolean,
and Symbol are wrapper
objects

19. 02What is the
relation between
types and errors?

20. class Product {
constructor (name, cost, tax){
this.name = name
this.cost = cost
this.tax = tax
}
price() {
return this.cost *
(1 + this.tax)
}
}
Product
Name
Cost
Tax
Price()
String
Number
Number
Number

21. There is a typo here!
const item = new Product("Banana", 2, .3)
item.prices()
this.name = name
this.cost = cost
this.tax = tax
}
price() {
return this.cost *
(1 + this.tax)
}
}

22. Modern
errors

23. Types in
JavaScript have
always been a
headache

24. The new
keyword is
missing

25. Common Mistake #1:
Incorrect references
to this
The 10 Most Common Mistakes
JavaScript Developers Make
by Ryan J. Peterson

26. function Product(name, cost, tax) {
if (!(this instanceof Product)) {
throw new Error("Constructor called as a function")
}
this.name = name
this.cost = cost
this.tax = tax
}
Product("Banana", 2, "%30")

28. const item = new Product("Banana", 2, "%30")
item.price()
this.name = name
this.cost = cost
this.tax = tax
}
price() {
return this.cost *
(1 + this.tax)
}
}
This is Not
a Number™

31. 1. undefined is not a function
2. incorrect this reference
3. wrong use of classes/
constructors
4. cannot read/set any
property of undefined/null
5. silent errors

32. JavaScript is a high-
level, dynamic, weakly
typed, object-based,
multi-paradigm, and
interpreted language
According Wikipedia

33. Those are all typical
examples of runtime
errors from a
dynamic language

34. 03Why not
type check?

35. 1 * 'foo'
'foo' * 2
'foo' + 1
[] + {}
({}) + {}
null + 1
5 % undefined
null.prop
undefined()
It’s easy to
predict that all
these will fail

36. tax * 2
price + 1
product.price
calculate()
But what
about that?

37. flow.org

38. Static type checking
is performed before
running code

39. eslint.org

40. Product
Name
Cost
Tax
Price()
String
Number
Number
Number

41. /* @flow */
class Product {
name: string
cost: number
tax: number
constructor (name, cost, tax) {
this.name = name
this.cost = cost
this.tax = tax
}
price() {
return this.cost * (1 + this.tax)
}
}
const item = new Product("Banana", 2, "%30")
Type annotations
Type incompatible!

43. typescript
lang.org

45. primitives
objects (arrays, classes, …)
literal
+
Types

46. any
nullable or maybe
union and intersection
+
Advanced Types
Any value
null or Product
Product or FreeProduct

47. new types (aliases)
interfaces
generics
+
Fancy Types
Cost is a number
Any value with price method
“a way of abstracting a type away”

48. The new types
helps define the
business entities

49. /* @flow */
type Product = {
name: string,
cost: number,
tax: number
}
const item : Product = {
name: "Banana",
cost: 2,
tax: "%30"
}

50. Type Signature
allows you to
foresee problems
Types as Design Tools
by Kris Jenkins

51. /* @flow */
function crazy() : number | string | Array<null> {
const rand = Math.random()
if (rand > .5) {
return 0
}
if (rand < .5) {
return []
}
return rand.toString()
}
const ops : number | string | Array<null> = crazy()
Type smells!

52. A Type System is,
first and foremost,
a communication
mechanism
Tweet by Sarah Mei

53. A Type System replaces
direct communication
with other humans, when
such communication isn't
practical - large teams,
open source, etc
Tweet by Sarah Mei

55. 04What about
external
values?

56. interface ItemsResponse {
results: string[]
}
http.get<ItemsResponse>('/api/items')
.subscribe(data => {
this.results = data.results
})
It should return a
result property
with an array of
strings
from Angular documentation

57. interface ItemsResponse {
results: string[]
}
{
"results": [
"Item 1",
"Item 2",
]
}
Code
API Responses
{
"results": [
8,
4,
]
}
Oops!

58. Trust me,
I'm an
engineer

59. The static analyzer
works if the contract
is respected

60. /* @flow */
const someValue: any = null
const strLength: number = someValue.length
any is a
bad guy!

61. Using any is
completely unsafe,
and should be avoided
whenever possible
from Flow documentation

62. The any is the type
of all JavaScript API
that return data
from abroad

63. Runtime exception:
the case of broken
data not being
handled

64. Elm is a statically
typed language
for webapps with
no runtime
exceptions

66. elm-lang.org

67. type alias Product =
{ name : String
, cost : Float
, tax : Float
}
price : Product -> Float
price {cost,tax} =
cost * (tax + 1)
Almost only
type annotation

68. item : Product
item = { name = "Banana", cost = 2, tax = 0.3 }
itemPrice : Float
itemPrice = price item
-- 2.6 : Float
type alias Product =
{ name : String
, cost : Float
, tax : Float
}
price : Product -> Float
price {cost,tax} =
cost * (tax + 1)

69. > import Json.Decode exposing (..)
> resultsDecoder = field "results" (list string)
> decodeString resultsDecoder "bla"
Err "Given an invalid JSON: Unexpected token b in JSON…"
: Result.Result String (List String)
> decodeString resultsDecoder "{ "results": ["1", "2"] }"
Ok ["1","2"] : Result.Result String (List String)

70. Request
Response
Ok
Render results
Show an error
message
Err

71. A Result wraps any
computation that may
fail, this is a great way
to manage errors
Elm documentation

72. There is no
exception in Elm,
the code must cover
all edge cases

73. https://jcemer.com/types-in-
javascript-what-you-should-
care.html

74. Relax, you don’t
need to move away
from JavaScript!

75. var t = require("tcomb")
const Results = t.interface({
results: t.list(t.String)
}, "Results")
Results({
results: ["1", "2"]
})
Results({
results: [2]
})
// TypeError: [tcomb] Invalid
value 2 supplied to Results/
results: Array<String>/0:
String
Check the
types values
at runtime
github.com/
gcanti/tcomb

76. +
github.com/
gcanti/
babel-plugin-
tcomb

77. bit.ly/
runtime-type-
validation
+

78. ***

79. We should focus our
efforts on either avoiding
—or fixing!—the corner
case value coercions
Fixing Coercion, Not
The Symptoms by Kyle Simpson

80. The code needs
to cover all the
possible cases to
avoid runtime
errors

81. Type annotation
and runtime type
checking are great
allies that help with
that task

82. I hope it inspires you
@jcemer
Thank you!

83. Special
thanks
Hugo Bessa
Rafael Rinaldi
Rodrigo Willrich
Zeh Fernandes
Marcelo Boeira
Felipe Fialho
Rachel Mason
Ira Santiago