Type systems are associated with most programmers with something really hard, strongly academic and difficult to understand, and not useful in the daily life of the developer. I will try to change that, at least partly. While I do not believe that a great knowledge of type systems will make you much more productive, I will try to dispel the myth that it is something difficult and incomprehensible. In an accessible and interactive way, I will introduce a little "Computer Science" which can help us understand why some of the languages we use are designed in a way that's different. First of all, we will answer the truth - how much "Typed" TypeScript really is?

1. Ten Typ tak ma
O systemach typów na przykładzie TypeScript’a
Artur Skowroński
#3

2. T E N TY P TA K M A
O S Y S T E M A C H T Y P Ó W N A P R Z Y K Ł A D Z I E
T Y P E S C R I P T ’ A
A R T U R S KO W R O Ń S K I

3. T H E R E A R E T W O H A R D T H I N G S
I N C O M P U T E R S C I E N C E :
P H I L K A R LT O N
C A C H E I N VA L I D AT I O N
N A M I N G T H I N G S

4. J E F F AT W O O D
T H E R E A R E T W O H A R D T H I N G S
I N C O M P U T E R S C I E N C E :
C A C H E I N VA L I D AT I O N
O F F - B Y- O N E E R R O R S
N A M I N G T H I N G S

5. J E F F AT W O O D
T H E R E A R E T W O H A R D T H I N G S
I N C O M P U T E R S C I E N C E :
C A C H E I N VA L I D AT I O N
O F F - B Y- O N E E R R O R S
N A M I N G T H I N G S

6. N A M I N G T H I N G S

7. O N T O L O G Y

8. O N T O L O G Y
" O N T O " O Z N A C Z A „ T O , C O J E S T ” , „ C O K O LW I E K ”

9. W H AT A R E T H E M E A N I N G S O F B E I N G ?

10. W H AT I S A T H I N G ?
W H AT A R E T H E VA R I O U S M O D E S O F B E I N G O F
E N T I T I E S ?
I N T O W H AT C AT E G O R I E S , I F A N Y, C A N W E S O R T
E X I S T I N G T H I N G S ?

12. I N T O W H AT C AT E G O R I E S , I F A N Y, C A N W E S O R T
E X I S T I N G T H I N G S ?

13. C AT E G O R I E S B Y A R I S T O T L E

14. C AT E G O R I E S T H E O RY

16. T Y P E S T H E O RY

17. T Y P E S Y S T E M S

18. W E A K & S T R O N G T Y P I N G

19. L I G H T W E I G H T T E C H N O L O G Y

20. ASSEMBLER

21. HOW CAN WE BE SURE THAT THIS PROGRAM WORKS?

22. TYPES
SET OF
VALUES
SET OF
OPERATIONS

23. NO IMPOSSIBLE VALUES
SET OF
VALUES
SET OF
OPERATIONS
INTEGER

24. TYPES
SET OF
VALUES
SET OF
OPERATIONS
INTEGER
1, 2, 3, 4, 5,
6, 7, 8, 9, 10…

25. TYPES
SET OF
VALUES
SET OF
OPERATIONS
INTEGER

26. NO IMPOSSIBLE OPERATIONS
SET OF
VALUES
SET OF
OPERATIONS
INTEGER
+, -, /, *

27. DIVISION ON INTEGER?
SET OF
VALUES
SET OF
OPERATIONS
INTEGER
+, -, /, *

28. S TAT I C & D Y N A M I C T Y P I N G

29. S TAT I C T Y P I N G

30. F O R T R A N ( 1 9 5 7 )

31. D ATA A R E A N N O TAT E D W I T H T Y P E I N F O

32. S E L F - D O C U M E N TAT I O N

33. F O R H U M A N S

34. F O R M A C H I N E S

35. A N Y F O O L C A N W R I T E C O D E
T H AT A C O M P U T E R C A N
U N D E R S TA N D . G O O D
P R O G R A M M E R S W R I T E C O D E
T H AT H U M A N S C A N
U N D E R S TA N D .
M A R T I N F O W L E R

36. HOW CAN WE BE SURE THAT THIS PROGRAM WORKS?

37. RICE’S THEOREM (1957)

38. S E T O F R U L E S

39. S TAT I C F I L E C H E C K I N G D O N E O N C O M P I L AT I O N T I M E
Compiler &
Type Checker
SOURCE
CODE

40. S TAT I C F I L E C H E C K I N G D O N E O N C O M P I L AT I O N T I M E
Compiler &
Type Checker
SOURCE
CODE

41. S TAT I C F I L E C H E C K I N G D O N E O N C O M P I L AT I O N T I M E
Compiler &
Type Checker
SOURCE
CODE

42. S TAT I C F I L E C H E C K I N G D O N E O N C O M P I L AT I O N T I M E
Compiler &
Type Checker
COMPILED
CODE

43. S TAT I C F I L E C H E C K I N G D O N E O N C O M P I L AT I O N T I M E
Compiler &
Type Checker
SOURCE
CODE

44. S TAT I C F I L E C H E C K I N G D O N E O N C O M P I L AT I O N T I M E
Compiler &
Type Checker
SOURCE
CODE

45. S TAT I C F I L E C H E C K I N G D O N E O N C O M P I L AT I O N T I M E
Compiler &
Type Checker
SOURCE
CODE

46. L O W E R B O N D O F C O R R E C T N E S S

47. T Y P E C H E C K E R P R O V E S C H O S E N P R O P E R T I E S
“PROVEN”
CODE

48. D O N ’ T N E E D T O B E I N C O R R E C T
Compiler &
Type Checker
?

49. T R A D E O F F : E A S Y T O U S E / C O R R E C T
E A S Y T O W R I T E / M A I N TA I N

50. PERFECTLY VALID PROGRAM…
let stringValue: unknown = "Value";
stringValue.trim();

51. …STILL WILL FAIL
let stringValue: unknown = "Value";
stringValue.trim();

52. …STILL WILL FAIL
let stringValue: unknown = "Value";
stringValue.trim();

53. DIVISION ON INTEGER?
SET OF
VALUES
SET OF
OPERATIONS
SUPER-STRICT-INTEGER
+, -, /, *

54. S O LV E S I N G L E P R O B L E M - N O T Y P E S I N R U N T I M E

55. S TAT I C & D Y N A M I C T Y P I N G

56. D Y N A M I C T Y P I N G

57. HOW CAN WE BE SURE THAT THIS PROGRAM WORKS?

58. P R O B L E M - N O I N F O A B O U T T Y P E S I N R U N T I M E

59. VA R I A B L E I N C O D E
int variable = 1
RUNTIME

60. D E C O R AT E D W I T H T Y P E O N R U N T I M E
RUNTIME
value = 1
type = int
variable

61. P R O P E R M E T H O D U S E D
RUNTIME
value = 1
type = int
variable
Math.abs()

62. E V E RY T H I N G I S C O R R E C T
RUNTIME
Math.abs()
value = 1
type = int
variable

63. W R O N G M E T H O D U S E D
RUNTIME
value = 1
type = int
variable
String.trim()

64. R U N T I M E E X C E P T I O N
RUNTIME
String.trim()
value = 1
type = int
variable

65. P E R F O R M A N C E

66. S TAT I C / D Y N A M I C
RUNTIME
String.trim()
value = 1
type = int
variable
Compiler &
Type Checker
SOURCE
CODE

67. S M A L L F L E X I B I L I T Y / R U N T I M E E R R O R S
RUNTIME
String.trim()
value = 1
type = int
variable
Compiler &
Type Checker
SOURCE
CODE

68. G R A D U A L T Y P I N G

69. S TAT I C C O R E

70. D Y N A M I C N E W C O D E ( W I T H A N Y )

71. I N T E R O P E R A B I L I T Y W I T H J AVA S C R I P T

72. T Y P E E R A S U R E

73. S T R U C T U R A L T Y P I N G

74. N O M I N A L T Y P I N G
class Foo {
method(input: string): number { ... }
}
class Bar {
method(input: string): number { ... }
}
let foo: Foo = new Bar();

75. N O M I N A L T Y P I N G
class Foo {
method(input: string): number { ... }
}
class Bar {
method(input: string): number { ... }
}
let foo: Foo = new Bar();

76. N O M I N A L T Y P I N G
class Foo {
method(input: string): number { ... }
}
class Bar {
method(input: string): number { ... }
}
let foo: Foo = new Bar();

77. S T R U C T U R A L T Y P I N G
class Foo {
method(input: string): number { ... }
}
class Bar {
method(input: string): number { ... }
}
let foo: Foo = new Bar();

78. S T R U C T U R A L T Y P I N G
class Foo {
method(input: string): number { ... }
}
class Bar {
method(input: string): number { ... }
}
let foo: Foo = new Bar();

79. T Y P E W I D E N I N G

80. E X P L I C I T T Y P I N G
let foo: Foo = new Foo();let foo: Foo = new Foo();

81. M L & H I N D L E Y – M I L N E R M E T H O D
T Y P E I N F E R E N C E

82. M L & H I N D L E Y – M I L N E R M E T H O D
T Y P E I N F E R E N C E

83. IMPLICIT TYPING
let foo = new Foo();

84. WHAT-A-TYPE?
let a = 'x'
let b = true
let c = 3

85. WHAT-A-TYPE?
let a = 'x' //string
let b = true //boolean
let c = 3 //number

86. WHAT-A-TYPE?
const a = 'x'
const b = true
const c = 3

87. WHAT-A-TYPE?
const a = 'x' // x
const b = true // true
const c = 3 // 3

88. TYPE OF GUARD
function withTypeGuards(value: any) {
if (typeof value === "string") {
return value.trim();
}
}

89. TYPE OF GUARD
function withTypeGuards(value: any) {
if (typeof value === "string") {
return value.trim();
}
}

90. TYPE OF GUARD
function withTypeGuards(value: any) {
if (typeof value === "string") {
return value.trim();
}
}

91. TYPE OF GUARD
function withTypeGuards(value: any) {
if (typeof value === "string") {
return value.trim(); // string
}
}

92. U N I O N S & I N T E R S E C T I O N S

93. UNIONS
interface Square {
size: number;
}
interface Rectangle {
width: number;
height: number;
}
type Shape = Square | Rectangle

94. UNIONS
interface Square {
size: number;
}
interface Rectangle {
width: number;
height: number;
}
type Shape = Square | Rectangle

95. NULLABLE TYPES
type MaybeShape = Square | null

96. INTERSECTIONS
interface Person {
age: number;
}
interface RecruitmentProcess {
recruitmentId: string;
}
type interfaceGuest = Person & RecruitmentProcess
let paul: interviewGuest
paul.recruitmentId = 'ID3241'
paul.age = 24

97. INTERSECTIONS
interface Person {
age: number;
}
interface RecruitmentProcess {
processId: string;
}
type interfaceGuest = Person & RecruitmentProcess
let paul: interviewGuest
paul.recruitmentId = 'ID3241'
paul.age = 24

98. INTERSECTIONS
interface Person {
age: number;
}
interface RecruitmentProcess {
processId: string;
}
type interfaceGuest = Person & RecruitmentProcess
let paul: interviewGuest
paul.recruitmentId = 'ID3241'
paul.age = 24

99. INTERSECTIONS
interface Person {
age: number;
}
interface RecruitmentProcess {
processId: string;
}
type interfaceGuest = Person & RecruitmentProcess
let paul: interviewGuest
paul.processId = 'ID3241'
paul.age = 24

100. PA R A M E T R I Z E D P O LY M O R P H I S M

101. E X . A R R AY S
let message: Array<String> = []
message.push("test");
message.push(2);

102. E X . A R R AY S
let message: Array<String> = []
message.push("test");
message.push(2);

103. E X . A R R AY S
let message: Array<String> = []
message.push("test");
message.push(2);

104. E X . A R R AY S
let message: Array<String> = []
message.push("test");
message.push(2);

105. E X . A R R AY S
let message: Array<String> = []
message.push("test");
message.push(2);

106. E X . A R R AY S
function unsafeAdd(arr: Array<string | number>): void {
arr.push(3)
}
let message: Array<String> = [ 'first' ]
unsafeAdd(message)
const el: string = message[1]
console.log(el.toLowerCase())

107. U N S O U N D T Y P E S
function unsafeAdd(arr: Array<string | number>): void {
arr.push(3)
}
let message: Array<String> = [ 'first' ]
unsafeAdd(message)
const el: string = message[1]
console.log(el.toLowerCase())

108. U N S O U N D T Y P E S
function unsafeAdd(arr: Array<string | number>): void {
arr.push(3)
}
let message: Array<String> = [ 'first' ]
unsafeAdd(message)
const el: string = message[1]
console.log(el.toLowerCase())

109. U N S O U N D T Y P E S
function unsafeAdd(arr: Array<string | number>): void {
arr.push(3)
}
let message: Array<String> = [ 'first' ]
unsafeAdd(message)
const el: string = message[1]
console.log(el.toLowerCase())

110. U N S O U N D T Y P E S
function unsafeAdd(arr: Array<string | number>): void {
arr.push(3)
}
let message: Array<String> = [ 'first' ]
unsafeAdd(message)
const el: string = message[1]
console.log(el.toLowerCase())

111. U N S O U N D T Y P E S
function unsafeAdd(arr: Array<string | number>): void {
arr.push(3)
}
let message: Array<String> = [ 'first' ]
unsafeAdd(message)
const el: string = message[1]
console.log(el.toLowerCase())

112. U N S O U N D T Y P E S
function unsafeAdd(arr: Array<string | number>): void {
arr.push(3)
}
let message: Array<String> = [ 'first' ]
unsafeAdd(message)
const el: string = message[1]
console.log(el.toLowerCase())

113. U N S O U N D T Y P E S
function unsafeAdd(arr: Array<string | number>): void {
arr.push(3)
}
let message: Array<String> = [ 'first' ]
unsafeAdd(message)
const el: string = message[1]
console.log(el.toLowerCase())

114. U N S O U N D T Y P E S
function unsafeAdd(arr: Array<string | number>): void {
arr.push(3)
}
let message: Array<String> = [ 'first' ]
unsafeAdd(message)
const el: string = message[1]
console.log(el.toLowerCase())

115. U N S O U N D T Y P E S
function unsafeAdd(arr: Array<string | number>): void {
arr.push(3)
}
let message: Array<String> = [ 'first' ]
unsafeAdd(message)
const el: string = message[1]
console.log(el.toLowerCase())

116. VA L I D J S C O D E
function unsafeAdd(arr) {
arr.push(3)
}
var message: Array<String> = [ 'first' ]
unsafeAdd(message)
var el = message[1]
console.log(el.toLowerCase())

117. S O U N D ?

118. H O W T O M A K E I T S O U N D
function checkIfTypeOk(el, type) {
if(!el instanceof type) throw new ClassCastException()
}
var message: Array<String> = [ 'first' ]
unsafeAdd(message)
var el = message[1]
checkIfTypeOk(el, string)
console.log(el.toLowerCase())

119. H O W T O M A K E I T S O U N D
function checkIfTypeOk(el, type) {
if(!el instanceof type) throw new ClassCastException()
}
var message: Array<String> = [ 'first' ]
unsafeAdd(message)
var el = message[1]
checkIfTypeOk(el, string)
console.log(el.toLowerCase())

120. H O W T O M A K E I T S O U N D
function checkIfTypeOk(el, type) {
if(!el instanceof type) throw new ClassCastException()
}
var message: Array<String> = [ 'first' ]
unsafeAdd(message)
var el = message[1]
checkIfTypeOk(el, string)
console.log(el.toLowerCase())

121. H O W T O M A K E I T S O U N D
function checkIfTypeOk(el, type) {
if(!el instanceof type) throw new ClassCastException()
}
var message: Array<String> = [ 'first' ]
unsafeAdd(message)
var el = message[1]
checkIfTypeOk(el, string)
console.log(el.toLowerCase())

122. T R A D E O F F : E A S Y T O U S E / C O R R E C T
C O M PAT I B L E W I T H J S

123. GRADUAL (STATIC WITH TYPE ERASURE)
STRUCTURALLY TYPED WITH TYPE WIDENING UNSOUND

124. S O U R C E S
https://www2.ccs.neu.edu/racket/pubs/ecoop2015-takikawa-et-al.pdf
https://users.soe.ucsc.edu/~abadi/Papers/FTS-submitted.pdf
UNDERSTANDING TYPESCRIPT
https://blog.steveklabnik.com/posts/2010-07-17-what-to-know-before-debating-type-systems
WHAT TO KNOW BEFORE DEBATING TYPE SYSTEMS
TOWARDS PRACTICAL GRADUAL TYPING
https://papl.cs.brown.edu/2014/safety-soundness.html
SAFETY AND SOUNDNESS