TypeScript for C++ Programmers

Slide 1

Slide 1 text

TYPESCRIPT FOR C++ PROGRAMMERS Ólafur Waage

Slide 2

Slide 2 text

Ólafur Waage Senior Software Developer - TurtleSec AS @olafurw on Twitter 1 2

Slide 3

Slide 3 text

Slide 4

Slide 4 text

“ You can’t always stay in your corner waiting for others to come to you. You sometimes have to go to them. - Winnie the Pooh 4

Slide 5

Slide 5 text

“ You can’t always stay in your corner waiting for others to come to you. You sometimes have to go to them. - Winnie the Pooh 5

Slide 6

Slide 6 text

WHAT THIS TALK IS AND ISN’T Going over a language requires a lot of items to be covered. There are always things you can miss or not cover in detail 6

Slide 7

Slide 7 text

WHAT THIS TALK IS AND ISN’T Going over a language requires a lot of items to be covered. There are always things you can miss or not cover in detail 7 This is not a comprehensive overview of the language, but more a curious look into this world

Slide 8

Slide 8 text

WHAT THIS TALK IS AND ISN’T Going over a language requires a lot of items to be covered. There are always things you can miss or not cover in detail 8 This is not a comprehensive overview of the language, but more a curious look into this world The point of view is from a C++ programmer but anyone not familiar with this world can beneﬁt from this talk

Slide 9

Slide 9 text

Slide 10

Slide 10 text

THE HISTORY OF EVERYTHING 10

Slide 11

Slide 11 text

THE HISTORY OF EVERYTHING Mostly everything 11

Slide 12

Slide 12 text

THE HISTORY OF EVERYTHING Mostly everything, mostly just JavaScript 12

Slide 13

Slide 13 text

IT ALL STARTED WITH THE WORLD WIDE WEB 13

Slide 14

Slide 14 text

IT ALL STARTED WITH THE WORLD WIDE WEB 14 BROWSERS It started with Netscape adding JavaScript in 1995

Slide 15

Slide 15 text

IT ALL STARTED WITH THE WORLD WIDE WEB 15 BROWSERS It started with Netscape adding JavaScript in 1995 (we almost got Java or Scheme)

Slide 16

Slide 16 text

IT ALL STARTED WITH THE WORLD WIDE WEB 16 BROWSERS It started with Netscape adding JavaScript in 1995 (we almost got Java or Scheme) Then we get ECMAScript in 1997 which serves as the JavaScript standard

Slide 17

Slide 17 text

IT’S ALL GOOGLE’S FAULT 17

Slide 18

Slide 18 text

IT’S ALL GOOGLE’S FAULT 18 CHROME Then in 2008 the Chromium project introduces V8 as a JavaScript engine.

Slide 19

Slide 19 text

IT’S ALL GOOGLE’S FAULT 19 CHROME Then in 2008 the Chromium project introduces V8 as a JavaScript engine. This made the language much more performant

Slide 20

Slide 20 text

WAIT WE CAN DO THIS OFFLINE? 20

Slide 21

Slide 21 text

WAIT WE CAN DO THIS OFFLINE? 21 NODE.JS Then in 2009 Node.js arrived which used this V8 engine to run JavaScript code without a browser.

Slide 22

Slide 22 text

WAIT WE CAN DO THIS OFFLINE? 22 NODE.JS Then in 2009 Node.js arrived which used this V8 engine to run JavaScript code without a browser. The stack is becoming full.

Slide 23

Slide 23 text

THE LIBRARY OF JAVASCRIPTIA 23

Slide 24

Slide 24 text

THE LIBRARY OF JAVASCRIPTIA 24 NPM And then in 2010 we get npm as package manager for libraries that are designed to run within the Node.js ecosystem.

Slide 25

Slide 25 text

THE LIBRARY OF JAVASCRIPTIA 25 NPM And then in 2010 we get npm as package manager for libraries that are designed to run within the Node.js ecosystem. The world at your ﬁngertips

Slide 26

Slide 26 text

A GOOD FOUNDATION These projects then formed the basis of the JavaScript development environment. 26

Slide 27

Slide 27 text

A GOOD FOUNDATION These projects then formed the basis of the JavaScript development environment. (there are other tools but the ideas are the same) 27

Slide 28

Slide 28 text

JAVASCRIPT IS NOT PERFECT Now we have this environment. And a lot of people start building all sorts of applications with only JavaScript 28

Slide 29

Slide 29 text

JAVASCRIPT IS NOT PERFECT Now we have this environment. And a lot of people start building all sorts of applications with only JavaScript 29 The language has its ﬂaws (WAT), and as far back as 2002 there existed static analysis tools to catch common errors

Slide 30

Slide 30 text

JAVASCRIPT IS NOT PERFECT Now we have this environment. And a lot of people start building all sorts of applications with only JavaScript 30 The language has its ﬂaws (WAT), and as far back as 2002 there existed static analysis tools to catch common errors JavaScript’s type system is dynamic. There are underlying primitives but also the all mighty (JSON) object.

Slide 31

Slide 31 text

IT’S ALL ABOUT JAVASCRIPT Before we go into TypeScript, we need to have a short chat about JavaScript. 31

Slide 32

Slide 32 text

IT’S ALL ABOUT JAVASCRIPT Before we go into TypeScript, we need to have a short chat about JavaScript. Let’s look at a few simple examples of the language, enough to get a sense of why TypeScript exists in the ﬁrst place. 32

Slide 33

Slide 33 text

Slide 34

Slide 34 text

JavaScript code examples 34

Slide 35

Slide 35 text

JavaScript code examples 35

Slide 36

Slide 36 text

JavaScript code examples 36

Slide 37

Slide 37 text

JavaScript code examples 37

Slide 38

Slide 38 text

JavaScript code examples 38

Slide 39

Slide 39 text

JavaScript code examples 39

Slide 40

Slide 40 text

JavaScript code examples 40

Slide 41

Slide 41 text

JavaScript code examples 41

Slide 42

Slide 42 text

JavaScript code examples 42

Slide 43

Slide 43 text

JavaScript code examples 43

Slide 44

Slide 44 text

JavaScript code examples 44

Slide 45

Slide 45 text

JavaScript code examples 45

Slide 46

Slide 46 text

JavaScript code examples 46

Slide 47

Slide 47 text

JavaScript code examples 47

Slide 48

Slide 48 text

JavaScript code examples 48

Slide 49

Slide 49 text

JavaScript code examples 49

Slide 50

Slide 50 text

JavaScript code examples 50

Slide 51

Slide 51 text

TYPESCRIPT FROM A DISTANCE Many had looked at “The JavaScript Problem” and tried to solve it by creating a new programming language 51

Slide 52

Slide 52 text

TYPESCRIPT FROM A DISTANCE Many had looked at “The JavaScript Problem” and tried to solve it by creating a new programming language 52 TypeScript looked at this problem by becoming a strict superset of JavaScript All JavaScript is legal TypeScript

Slide 53

Slide 53 text

TYPESCRIPT FROM A DISTANCE Many had looked at “The JavaScript Problem” and tried to solve it by creating a new programming language 53 TypeScript looked at this problem by becoming a strict superset of JavaScript All JavaScript is legal TypeScript TypeScript is then compiled into JavaScript At runtime TypeScript does not exist

Slide 54

Slide 54 text

Slide 55

Slide 55 text

55 bash

Slide 56

Slide 56 text

56 bash

Slide 57

Slide 57 text

57 package.json bash

Slide 58

Slide 58 text

58 package.json bash tsconﬁg.json

Slide 59

Slide 59 text

59 VSCode

Slide 60

Slide 60 text

60 bash VSCode

Slide 61

Slide 61 text

61 bash VSCode

Slide 62

Slide 62 text

62 bash bash VSCode

Slide 63

Slide 63 text

63 index.ts

Slide 64

Slide 64 text

64 index.ts bash

Slide 65

Slide 65 text

65 index.ts bash

Slide 66

Slide 66 text

66 bash

Slide 67

Slide 67 text

67 index.js bash

Slide 68

Slide 68 text

TYPESCRIPT BASICS Now let’s shift the focus to TypeScript the language itself. 68

Slide 69

Slide 69 text

TYPESCRIPT BASICS Now let’s shift the focus to TypeScript the language itself. Some of these features come directly from or are based on JavaScript but it’s easier to think of TypeScript as a whole than to keep going back and forwards. 69

Slide 70

Slide 70 text

TYPESCRIPT HISTORY Released in 2012 and developed by Microsoft. 70

Slide 71

Slide 71 text

Slide 72

Slide 72 text

TYPESCRIPT HISTORY Released in 2012 and developed by Microsoft. The idea of TypeScript was to add type safety to JavaScript but also have existing JavaScript applications be valid TypeScript applications. Applications are compiled into JS ﬁles and the language also has a language server for syntax highlighting and error checking. 72

Slide 73

Slide 73 text

73 FUNCTIONS

Slide 74

Slide 74 text

74 FUNCTIONS

Slide 75

Slide 75 text

75 FUNCTIONS

Slide 76

Slide 76 text

76 FUNCTIONS

Slide 77

Slide 77 text

77 FUNCTIONS

Slide 78

Slide 78 text

78 CLASSES AND INTERFACES

Slide 79

Slide 79 text

79 CLASSES AND INTERFACES

Slide 80

Slide 80 text

80 CLASSES AND INTERFACES

Slide 81

Slide 81 text

81 CLASSES AND INTERFACES

Slide 82

Slide 82 text

82 CLASSES AND INTERFACES

Slide 83

Slide 83 text

83 CLASSES AND INTERFACES

Slide 84

Slide 84 text

84 CLASSES AND INTERFACES

Slide 85

Slide 85 text

85 CLASSES AND INTERFACES

Slide 86

Slide 86 text

86 CLASSES AND INTERFACES

Slide 87

Slide 87 text

87 GENERICS

Slide 88

Slide 88 text

88 GENERICS

Slide 89

Slide 89 text

89 GENERICS

Slide 90

Slide 90 text

90 GENERICS

Slide 91

Slide 91 text

91 GENERICS

Slide 92

Slide 92 text

92 IMPORTS AND MODULES animal.ts

Slide 93

Slide 93 text

93 IMPORTS AND MODULES animal.ts main.ts

Slide 94

Slide 94 text

94 IMPORTS AND MODULES animal.ts main.ts

Slide 95

Slide 95 text

THE TYPES OF TYPESCRIPT One thing to note here, because JavaScript is TypeScript and TypeScript does not exist at runtime, there are no TypeScript speciﬁc containers* 95

Slide 96

Slide 96 text

THE TYPES OF TYPESCRIPT One thing to note here, because JavaScript is TypeScript and TypeScript does not exist at runtime, there are no TypeScript speciﬁc containers* They are all JavaScript containers (array, map, set, etc) 96

Slide 97

Slide 97 text

Slide 98

Slide 98 text

“ADVANCED” TYPESCRIPT So now we have seen an overview of the basic features of the language, and most things are behaving as we would expect. 98

Slide 99

Slide 99 text

“ADVANCED” TYPESCRIPT So now we have seen an overview of the basic features of the language, and most things are behaving as we would expect. But now let’s take a tour into the the type system of TypeScript. 99

Slide 100

Slide 100 text

STRUCTURAL TYPE SYSTEM TypeScript uses a structural type system, or “type compatibility” as they call it. 100

Slide 101

Slide 101 text

Slide 102

Slide 102 text

STRUCTURAL TYPE SYSTEM TypeScript uses a structural type system, or “type compatibility” as they call it. Structural typing is taking the “looks like a duck, quacks like a duck” idea and taking it quite literally. But TypeScript does sacriﬁce a bit of what is called “soundness”. 102

Slide 103

Slide 103 text

Slide 104

Slide 104 text

104 STRUCTURAL TYPE SYSTEM

Slide 105

Slide 105 text

105 STRUCTURAL TYPE SYSTEM

Slide 106

Slide 106 text

106 STRUCTURAL TYPE SYSTEM

Slide 107

Slide 107 text

107 STRUCTURAL TYPE SYSTEM

Slide 108

Slide 108 text

108 STRUCTURAL TYPE SYSTEM

Slide 109

Slide 109 text

109 STRUCTURAL TYPE SYSTEM

Slide 110

Slide 110 text

110 STRUCTURAL TYPE SYSTEM

Slide 111

Slide 111 text

111 STRUCTURAL TYPE SYSTEM

Slide 112

Slide 112 text

112 STRUCTURAL TYPE SYSTEM

Slide 113

Slide 113 text

113 STRUCTURAL TYPE SYSTEM

Slide 114

Slide 114 text

114 STRUCTURAL TYPE SYSTEM

Slide 115

Slide 115 text

115 STRUCTURAL TYPE SYSTEM

Slide 116

Slide 116 text

116 STRUCTURAL TYPE SYSTEM

Slide 117

Slide 117 text

117 STRUCTURAL TYPE SYSTEM

Slide 118

Slide 118 text

118 STRUCTURAL TYPE SYSTEM

Slide 119

Slide 119 text

119 STRUCTURAL TYPE SYSTEM

Slide 120

Slide 120 text

120 STRUCTURAL TYPE SYSTEM

Slide 121

Slide 121 text

121 STRUCTURAL TYPE SYSTEM

Slide 122

Slide 122 text

122 STRUCTURAL TYPE SYSTEM

Slide 123

Slide 123 text

123 STRUCTURAL TYPE SYSTEM

Slide 124

Slide 124 text

124 STRUCTURAL TYPE SYSTEM

Slide 125

Slide 125 text

125 STRUCTURAL TYPE SYSTEM

Slide 126

Slide 126 text

CONST Let’s talk about const real quick, because how it functions in TypeScript and JavaScript is different from C++ 126

Slide 127

Slide 127 text

CONST Let’s talk about const real quick, because how it functions in TypeScript and JavaScript is different from C++ The language has features that will get us similar results though 127

Slide 128

Slide 128 text

CONST Let’s talk about const real quick, because how it functions in TypeScript and JavaScript is different from C++ The language has features that will get us similar results though But those results might behave a bit differently 128

Slide 129

Slide 129 text

129 CONST

Slide 130

Slide 130 text

130 CONST

Slide 131

Slide 131 text

131 CONST

Slide 132

Slide 132 text

132 CONST

Slide 133

Slide 133 text

133 CONST

Slide 134

Slide 134 text

134 CONST

Slide 135

Slide 135 text

135 CONST

Slide 136

Slide 136 text

136 CONST

Slide 137

Slide 137 text

137 CONST

Slide 138

Slide 138 text

138 CONST

Slide 139

Slide 139 text

UTILITY TYPES TypeScript has a collection of Utility Types. These are generic classes that provide speciﬁc features. 139

Slide 140

Slide 140 text

UTILITY TYPES TypeScript has a collection of Utility Types. These are generic classes that provide speciﬁc features. Most of these types will take your type as T and transform it into a new type with some new feature or functionality. 140

Slide 141

Slide 141 text

141 READONLY

Slide 142

Slide 142 text

142 READONLY

Slide 143

Slide 143 text

143 READONLY

Slide 144

Slide 144 text

144 EXTRACT

Slide 145

Slide 145 text

145 EXTRACT

Slide 146

Slide 146 text

146 EXTRACT

Slide 147

Slide 147 text

147 EXTRACT

Slide 148

Slide 148 text

148

Slide 149

Slide 149 text

149

Slide 150

Slide 150 text

150

Slide 151

Slide 151 text

151

Slide 152

Slide 152 text

152

Slide 153

Slide 153 text

153

Slide 154

Slide 154 text

154

Slide 155

Slide 155 text

155

Slide 156

Slide 156 text

156

Slide 157

Slide 157 text

DECLARATION FILES There are a lot of JavaScript libraries out there, and they can be installed using npm and used within TypeScript. But TypeScript also wants you to use those libraries safely. 157

Slide 158

Slide 158 text

DECLARATION FILES There are a lot of JavaScript libraries out there, and they can be installed using npm and used within TypeScript. But TypeScript also wants you to use those libraries safely. A TypeScript declaration ﬁle (.d.ts) describes the exported interface of the JavaScript library, but (possibly) with a safer deﬁnition. 158

Slide 159

Slide 159 text

159

Slide 160

Slide 160 text

160

Slide 161

Slide 161 text

161

Slide 162

Slide 162 text

SUMMARY In this talk we have gone over a history of JavaScript. 162

Slide 163

Slide 163 text

SUMMARY In this talk we have gone over a history of JavaScript. What environment it uses and the problems exist within the language. 163

Slide 164

Slide 164 text

SUMMARY In this talk we have gone over a history of JavaScript. What environment it uses and the problems exist within the language. We have seen what problems TypeScript is trying to solve and its relationship with JS 164

Slide 165

Slide 165 text

SUMMARY We have seen TypeScript features, like Classes and Functions. 165

Slide 166

Slide 166 text

SUMMARY We have seen TypeScript features, like Classes and Functions. We have gone over how const works and some Utility Types 166

Slide 167

Slide 167 text

SUMMARY We have seen TypeScript features, like Classes and Functions. We have gone over how const works and some Utility Types And we have looked at the structural type system and declaration ﬁles 167

Slide 168

Slide 168 text

SUMMARY 168

Slide 169

Slide 169 text

SUMMARY So let’s think about this for a minute. 169

Slide 170

Slide 170 text

SUMMARY So let’s think about this for a minute. We have: 170

Slide 171

Slide 171 text

SUMMARY So let’s think about this for a minute. We have: - An old standards driven language that has perceived complexity and quirks 171

Slide 172

Slide 172 text

Slide 173

Slide 173 text

Slide 174

Slide 174 text

Slide 175

Slide 175 text

SUMMARY So let’s think about this for a minute. We have: - An old standards driven language that has perceived complexity and quirks - Attempts to ﬁx it with other languages or static analysis - An immense backlog of libraries and backwards compatibility concerns - “Headers” towards the old language to increase safety and to allow usage of libraries from the old language - Old language has features that are not desired in new language, so methods exist to replace them with other features or options to turn them off (or warn for them) 175

Slide 176

Slide 176 text

176

Slide 177

Slide 177 text

SUMMARY C++ can learn a lot from what is happening here. 177

Slide 178

Slide 178 text

SUMMARY C++ can learn a lot from what is happening here. Not only with regards to its relationship with C, but going forwards. 178

Slide 179

Slide 179 text

SUMMARY C++ can learn a lot from what is happening here. Not only with regards to its relationship with C, but going forwards. We have changed the language a lot in the past decade or so. 179

Slide 180

Slide 180 text

SUMMARY C++ can learn a lot from what is happening here. Not only with regards to its relationship with C, but going forwards. We have changed the language a lot in the past decade or so. We even have improved our tooling a lot to help deal with many of the quirks of the language. 180

Slide 181

Slide 181 text

SUMMARY But some of the things we have in C++ are probably never going away, or we’re probably never going to stop having certain quirks. 181

Slide 182

Slide 182 text

Slide 183

Slide 183 text

SUMMARY But some of the things we have in C++ are probably never going away, or we’re probably never going to stop having certain quirks. Could you imagine a language that was on top of C++, let’s call it C+=2 or something. Where you write in a language that is then turned into C++. But you could then turn off certain language features or structure the language where older (previously idiomatic code) would no longer be allowed. Just an idea. 183

Slide 184

Slide 184 text

Ólafur Waage Senior Software Developer - TurtleSec AS @olafurw on Twitter 1 184