Save 37% off PRO during our Black Friday Sale! »

TypeScript for C++ Programmers

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.

89b8f4a7429270308ac301bf7605f974?s=128

Ólafur Waage

October 21, 2021
Tweet

Transcript

  1. TYPESCRIPT FOR C++ PROGRAMMERS Ólafur Waage

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

    Twitter 1 2
  3. 3

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

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

  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

  148. 148

  149. 149

  150. 150

  151. 151

  152. 152

  153. 153

  154. 154

  155. 155

  156. 156

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

  160. 160

  161. 161

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

  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