TypeScript for C++ Programmers

First appearing in 2012, TypeScript has grown a lot in the past 9 years and looking at how the language operates is a great exercise for C++ programmers. We will go over basic usage and compare it to similar functionality in C++, explore the type system the language offers, look at the environment the language lives in and it's relation to JavaScript and then we will look at the development tooling that is available. This talk will hopefully teach you a few new things about the language and maybe it will open some doors in the future regarding language choices or how you approach problem-solving.

Transcript

1. TYPESCRIPT FOR C++ PROGRAMMERS Ólafur Waage
2. Ólafur Waage Senior Software Developer - TurtleSec AS @olafurw on Twitter 1 2
4. “ 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
5. “ 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
6. 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
7. 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
8. 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 benefit from this talk
10. THE HISTORY OF EVERYTHING 10
11. THE HISTORY OF EVERYTHING Mostly everything 11
12. THE HISTORY OF EVERYTHING Mostly everything, mostly just JavaScript 12
13. IT ALL STARTED WITH THE WORLD WIDE WEB 13
14. IT ALL STARTED WITH THE WORLD WIDE WEB 14 BROWSERS It started with Netscape adding JavaScript in 1995
15. IT ALL STARTED WITH THE WORLD WIDE WEB 15 BROWSERS It started with Netscape adding JavaScript in 1995 (we almost got Java or Scheme)
16. 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
17. IT’S ALL GOOGLE’S FAULT 17
18. IT’S ALL GOOGLE’S FAULT 18 CHROME Then in 2008 the Chromium project introduces V8 as a JavaScript engine.
19. 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
20. WAIT WE CAN DO THIS OFFLINE? 20
21. 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.
22. 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.
23. THE LIBRARY OF JAVASCRIPTIA 23
24. 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.
25. 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 fingertips
26. A GOOD FOUNDATION These projects then formed the basis of the JavaScript development environment. 26
27. 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
28. JAVASCRIPT IS NOT PERFECT Now we have this environment. And a lot of people start building all sorts of applications with only JavaScript 28
29. 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 flaws (WAT), and as far back as 2002 there existed static analysis tools to catch common errors
30. 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 flaws (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.
31. IT’S ALL ABOUT JAVASCRIPT Before we go into TypeScript, we need to have a short chat about JavaScript. 31
32. 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 first place. 32
33. 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 first place. This will give you some context going forwards in the talk. 33
34. JavaScript code examples 34
35. JavaScript code examples 35
36. JavaScript code examples 36
37. JavaScript code examples 37
38. JavaScript code examples 38
39. JavaScript code examples 39
40. JavaScript code examples 40
41. JavaScript code examples 41
42. JavaScript code examples 42
43. JavaScript code examples 43
44. JavaScript code examples 44
45. JavaScript code examples 45
46. JavaScript code examples 46
47. JavaScript code examples 47
48. JavaScript code examples 48
49. JavaScript code examples 49
50. JavaScript code examples 50
51. TYPESCRIPT FROM A DISTANCE Many had looked at “The JavaScript Problem” and tried to solve it by creating a new programming language 51
52. 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
53. 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
55. 55 bash
56. 56 bash
57. 57 package.json bash
58. 58 package.json bash tsconfig.json
59. 59 VSCode
60. 60 bash VSCode
61. 61 bash VSCode
62. 62 bash bash VSCode
63. 63 index.ts
64. 64 index.ts bash
65. 65 index.ts bash
66. 66 bash
67. 67 index.js bash
68. TYPESCRIPT BASICS Now let’s shift the focus to TypeScript the language itself. 68
69. 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
70. TYPESCRIPT HISTORY Released in 2012 and developed by Microsoft. 70
71. 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. 71
72. 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 files and the language also has a language server for syntax highlighting and error checking. 72
73. 73 FUNCTIONS
74. 74 FUNCTIONS
75. 75 FUNCTIONS
76. 76 FUNCTIONS
77. 77 FUNCTIONS
78. 78 CLASSES AND INTERFACES
79. 79 CLASSES AND INTERFACES
80. 80 CLASSES AND INTERFACES
81. 81 CLASSES AND INTERFACES
82. 82 CLASSES AND INTERFACES
83. 83 CLASSES AND INTERFACES
84. 84 CLASSES AND INTERFACES
85. 85 CLASSES AND INTERFACES
86. 86 CLASSES AND INTERFACES
87. 87 GENERICS
88. 88 GENERICS
89. 89 GENERICS
90. 90 GENERICS
91. 91 GENERICS
92. 92 IMPORTS AND MODULES animal.ts
93. 93 IMPORTS AND MODULES animal.ts main.ts
94. 94 IMPORTS AND MODULES animal.ts main.ts
95. THE TYPES OF TYPESCRIPT One thing to note here, because JavaScript is TypeScript and TypeScript does not exist at runtime, there are no TypeScript specific containers* 95
96. THE TYPES OF TYPESCRIPT One thing to note here, because JavaScript is TypeScript and TypeScript does not exist at runtime, there are no TypeScript specific containers* They are all JavaScript containers (array, map, set, etc) 96
97. THE TYPES OF TYPESCRIPT One thing to note here, because JavaScript is TypeScript and TypeScript does not exist at runtime, there are no TypeScript specific containers* They are all JavaScript containers (array, map, set, etc) Many of the algorithms we know exist within the containers themselves. 97
98. “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
99. “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
100. STRUCTURAL TYPE SYSTEM TypeScript uses a structural type system, or “type compatibility” as they call it. 100
101. 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. 101
102. 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 sacrifice a bit of what is called “soundness”. 102
103. 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 sacrifice a bit of what is called “soundness”. It’s best to see this system with examples. 103
104. 104 STRUCTURAL TYPE SYSTEM
105. 105 STRUCTURAL TYPE SYSTEM
106. 106 STRUCTURAL TYPE SYSTEM
107. 107 STRUCTURAL TYPE SYSTEM
108. 108 STRUCTURAL TYPE SYSTEM
109. 109 STRUCTURAL TYPE SYSTEM
110. 110 STRUCTURAL TYPE SYSTEM
111. 111 STRUCTURAL TYPE SYSTEM
112. 112 STRUCTURAL TYPE SYSTEM
113. 113 STRUCTURAL TYPE SYSTEM
114. 114 STRUCTURAL TYPE SYSTEM
115. 115 STRUCTURAL TYPE SYSTEM
116. 116 STRUCTURAL TYPE SYSTEM
117. 117 STRUCTURAL TYPE SYSTEM
118. 118 STRUCTURAL TYPE SYSTEM
119. 119 STRUCTURAL TYPE SYSTEM
120. 120 STRUCTURAL TYPE SYSTEM
121. 121 STRUCTURAL TYPE SYSTEM
122. 122 STRUCTURAL TYPE SYSTEM
123. 123 STRUCTURAL TYPE SYSTEM
124. 124 STRUCTURAL TYPE SYSTEM
125. 125 STRUCTURAL TYPE SYSTEM
126. CONST Let’s talk about const real quick, because how it functions in TypeScript and JavaScript is different from C++ 126
127. 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
128. 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
129. 129 CONST
130. 130 CONST
131. 131 CONST
132. 132 CONST
133. 133 CONST
134. 134 CONST
135. 135 CONST
136. 136 CONST
137. 137 CONST
138. 138 CONST
139. UTILITY TYPES TypeScript has a collection of Utility Types. These are generic classes that provide specific features. 139
140. UTILITY TYPES TypeScript has a collection of Utility Types. These are generic classes that provide specific 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
141. 141 READONLY
142. 142 READONLY
143. 143 READONLY
144. 144 EXTRACT
145. 145 EXTRACT
146. 146 EXTRACT
147. 147 EXTRACT
157. 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
158. 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 file (.d.ts) describes the exported interface of the JavaScript library, but (possibly) with a safer definition. 158
162. SUMMARY In this talk we have gone over a history of JavaScript. 162
163. SUMMARY In this talk we have gone over a history of JavaScript. What environment it uses and the problems exist within the language. 163
164. 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
165. SUMMARY We have seen TypeScript features, like Classes and Functions. 165
166. SUMMARY We have seen TypeScript features, like Classes and Functions. We have gone over how const works and some Utility Types 166
167. 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 files 167
168. SUMMARY 168
169. SUMMARY So let’s think about this for a minute. 169
170. SUMMARY So let’s think about this for a minute. We have: 170
171. SUMMARY So let’s think about this for a minute. We have: - An old standards driven language that has perceived complexity and quirks 171
172. 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 fix it with other languages or static analysis 172
173. 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 fix it with other languages or static analysis - An immense backlog of libraries and backwards compatibility concerns 173
174. 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 fix 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 174
175. 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 fix 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
177. SUMMARY C++ can learn a lot from what is happening here. 177
178. SUMMARY C++ can learn a lot from what is happening here. Not only with regards to its relationship with C, but going forwards. 178
179. 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
180. 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
181. 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
182. 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++. 182
183. 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
184. Ólafur Waage Senior Software Developer - TurtleSec AS @olafurw on Twitter 1 184