TypeScript Course for Beginners 2020 – Learn TypeScript from Scratch!

00:00:00 my name is Mexican Schwarz Villa and I
00:00:02 will be your instructor in this course
00:00:03 now this course is about typescript
00:00:07 superset to JavaScript so a programming
00:00:10 language which actually builds up on
00:00:12 JavaScript you could say it takes
00:00:14 JavaScript to the next level with
00:00:17 typescript you will see in this course
00:00:18 you can write less error-prone much
00:00:21 better and cleaner code and also use
00:00:23 some exciting new features which don't
00:00:25 exist like this in JavaScript now in
00:00:28 this course you will learn typescript
00:00:30 from scratch you don't need to know
00:00:32 anything about types good to get started
00:00:34 basic JavaScript knowledge absolutely
00:00:37 suffices you will learn all the basics
00:00:39 of typescript how it works why we use it
00:00:42 the different advantages it offers we'll
00:00:45 dive into the core types it provides and
00:00:47 will gradually build up knowledge and
00:00:50 dive into more and more advanced types
00:00:52 good features throughout this course now
00:00:55 this course is both a course that
00:00:57 focuses on the theory and showing a
00:01:00 broad variety of features as well as
00:01:03 showing all these features in action and
00:01:05 rail projects therefore in this course
00:01:07 we'll have a real project we'll also
00:01:10 have a module where we dive into
00:01:12 typescript with react we'll also have a
00:01:14 module where we dive into typescript
00:01:17 with node and express so that by the end
00:01:19 of this course you really feel
00:01:21 comfortable using types could in your
00:01:23 next projects and that you know why you
00:01:26 would use it and most importantly how
00:01:28 you would apply it to any JavaScript
00:01:31 project you're working on no matter by
00:01:34 the way if that is javascript in the
00:01:36 browser with or without any framework or
00:01:39 if it's on the server-side so that's all
00:01:41 in the course I'm super excited to start
00:01:44 this journey together with you and with
00:01:46 that I'd say let's not waste any time
00:01:48 and let's find out what exactly types
00:01:50 code is and which advantages it has to
00:01:52 offer
00:01:59 so what is typescript what is it all
00:02:02 about why would we use it typescript is
00:02:05 a JavaScript superset now what does this
00:02:08 mean it means that typescript is in the
00:02:11 end a language a programming language
00:02:13 building up on JavaScript it's not a
00:02:16 brand new language instead it takes the
00:02:20 JavaScript language and adds new
00:02:22 features and advantages to it it makes
00:02:25 writing JavaScript code easier and more
00:02:28 powerful you could say but we have one
00:02:31 huge disadvantage typescript can't be
00:02:34 executed by JavaScript environments like
00:02:37 the browser browsers can't execute
00:02:40 typescript and for example node.js also
00:02:44 can't execute typescript so the
00:02:46 environments where we can execute
00:02:48 JavaScript don't support typescript
00:02:51 what's the idea behind typescript then
00:02:53 it's a better version of JavaScript and
00:02:56 we can't use it well not quite
00:02:59 typescript is a programming language but
00:03:01 it's also a tool it's a powerful
00:03:04 compiler which you run over your code to
00:03:08 compile your typescript code to
00:03:10 JavaScript so what you get as a result
00:03:13 when writing code in typescript is
00:03:16 JavaScript but you didn't write that
00:03:18 JavaScript code you wrote typescript
00:03:21 code with all the new features and all
00:03:23 the advantages and you get normal
00:03:26 JavaScript code well that of course
00:03:28 brings up one important question how can
00:03:31 types could add new features if what you
00:03:34 get in the end is regular JavaScript and
00:03:37 the answer is the typescript compiler
00:03:40 compiles these new features to
00:03:43 JavaScript workarounds so in the end it
00:03:45 might give you a nicer syntax an easier
00:03:48 way of doing something and it will then
00:03:51 compile that nicer easier way to a more
00:03:55 complex JavaScript snippet which you
00:03:57 would have to write otherwise so it's
00:03:59 not magic of course it can't add what's
00:04:02 not possible at all in the JavaScript
00:04:05 language but it can add new features
00:04:08 that simply are easier to use nicer
00:04:10 syntax things like this in
00:04:12 dition types of course that's one
00:04:15 important thing which the name already
00:04:17 implies it adds types it adds a feature

00:04:21 to D JavaScript language ed which will
00:04:24 have a close look in a second which will
00:04:26 actually give you as a developer an
00:04:29 opportunity of identifying errors in
00:04:32 your code earlier before your script
00:04:35 runs and the error occurs at runtime in
00:04:37 the browser so it does not only give you
00:04:40 some new features and nicer ways of
00:04:42 doing something it also gives you extra
00:04:46 error checking where errors which you
00:04:49 would otherwise get as runtime errors
00:04:51 can be caught and fixed early during
00:04:54 development so why would we use
00:04:56 typescript consider this example a
00:04:59 fairly simple JavaScript function which
00:05:02 adds two numbers now when I call it
00:05:05 please notice that I'm passing in two
00:05:07 strings instead of two numbers and I'll
00:05:09 show you a real example where something
00:05:11 like this could happen realistically in
00:05:13 just a second so we're calling this
00:05:16 function with two strings and as a
00:05:17 result what you would actually get here
00:05:19 is probably an unwanted behavior because
00:05:23 if you add two strings javascript will
00:05:25 concatenate the strings instead of doing
00:05:28 a mathematical calculation here so the
00:05:30 result would not be five but 23 a
00:05:33 concatenated string of the two numbers
00:05:35 this is an error you could have in
00:05:38 JavaScript it's not a technical error
00:05:40 you probably won't get a runtime error
00:05:43 but you have a logical mistake in your
00:05:46 code and that of course can lead to huge
00:05:49 problems in the web applications you're
00:05:51 writing with JavaScript now of course in
00:05:54 JavaScript we have mitigation strategies
00:05:56 we could add an if check in the function
00:05:58 to check the types of the inputs at
00:06:01 runtime we could also validate and
00:06:04 sanitize user input and whilst we might
00:06:06 want to do all of that it would also be
00:06:09 nice if we could catch errors like this
00:06:10 during development already and
00:06:13 thankfully this is possible with
00:06:15 typescript because developers can write
00:06:17 invalid code here in introduced box like
00:06:20 this in JavaScript and with typescript
00:06:22 we have a tool that helps us write
00:06:24 better
00:06:25 and avoid such problems so let's have a
00:06:28 closer look at this
00:06:32 here is this same example basically in a
00:06:36 real project you find this simple
00:06:39 project the index.html file in this
00:06:41 javascript file attached to this video
00:06:43 in a zip file you can simply open this
00:06:45 and then open the index.html file you
00:06:48 can also open the code in any text
00:06:50 editor of your choice
00:06:51 here I'm using Visual Studio code and it
00:06:54 will come back to my exact setup later
00:06:56 in this module for now you can just open
00:06:58 these two text files with any text
00:07:01 editor now what you'll find in there is
00:07:03 this JavaScript file which interacts
00:07:06 with this index.html file and in that
00:07:08 index.html file you'll find two inputs
00:07:11 and a button and any JavaScript file
00:07:13 which gets imported here we basically
00:07:15 reach out to these elements then we have
00:07:17 a function here and an event listener on
00:07:19 the button that triggers the function
00:07:21 and locks the result of the function
00:07:23 here in the console now if we simply
00:07:26 open that index.html file by double
00:07:28 clicking on it in the Windows Explorer
00:07:30 or the Mac finder so that it opens up in
00:07:33 a browser what you'll see is this the
00:07:36 two inputs and the add button and here I
00:07:38 opened the browser developer tools as
00:07:41 well now if you enter ten and five here
00:07:44 for example you might expect to see
00:07:46 fifteen as a result here on the right
00:07:48 but instead you see 105 and this shows
00:07:52 us a weakness of JavaScript here this is
00:07:55 not a technical error it's not an error
00:07:58 which is thrown but it's a logical error
00:08:00 in our application now where is this
00:08:03 error coming from though well here in
00:08:06 JavaScript I reach out to these two
00:08:09 inputs and when the button is clicked in
00:08:11 the end I get the values of the two
00:08:13 input elements and a pastor here to add
00:08:16 and here it's important to know that in
00:08:18 JavaScript when you access the value of
00:08:21 an input element it's always a string
00:08:24 always no matter which type of input
00:08:26 disease if this is of type number or not
00:08:28 it's always a string so I'm passing in

00:08:32 two strings to this function the end and
00:08:34 if you add two strings in JavaScript
00:08:36 they get concatenated instead of added
00:08:39 mathematically which is why we see one
00:08:41 hundred and five ten and five
00:08:43 concatenated this is the issue with
00:08:46 javascript here and this is something
00:08:49 where typescript can help us now without
00:08:51 typescript we could of course add a if
00:08:54 check here and check if the type of num1
00:08:56 is equal to number and if the type of
00:09:01 num2 is equal to number and if that is
00:09:06 the case then I return my calculation
00:09:08 like this else I might throw an error or
00:09:12 I at least convert both to numbers by
00:09:15 adding a plus in front of each parameter
00:09:18 here now this is some code we could
00:09:21 write maybe a bit more refined than this
00:09:23 in JavaScript and with that we would
00:09:26 ensure that we convert numbers or the
00:09:28 inputs to numbers if they're not numbers
00:09:31 yet so with that if I reload this and I
00:09:34 repeat this now we get 15 because of our
00:09:37 changed code so of course you can do
00:09:39 this in JavaScript and this is vanilla
00:09:41 JavaScript nothing typescript is about
00:09:43 it but we wrote some extra code for an
00:09:47 error which I actually would like to
00:09:49 prevent in the first place I don't want
00:09:52 that this happens I want to make sure
00:09:54 that we can't even pass strings here to
00:09:57 add because add should be a function
00:10:00 that only operates on numbers so that in
00:10:02 there we don't need to check whether we
00:10:04 get a number or not so I want to keep
00:10:07 this function in this state it was
00:10:09 before I want this function here just
00:10:12 like this and that is where typescript
00:10:14 can help us so typescript can help us in
00:10:17 such situations as I just showed now in
00:10:20 order to see how it helps us let's
00:10:22 install it so on typescript Lang org you
00:10:26 can click on download' and there you'll
00:10:28 learn how to install it
00:10:29 and we will actually install it with
00:10:31 this command which uses the NPM tool and
00:10:34 the NPM tool is part of the note Rhea's
00:10:36 package so even though we're not going
00:10:39 to write no trayers code here we still
00:10:41 need to install node.js simply because
00:10:44 behind the scenes that will also be used
00:10:47 by some tools we use and when we install
00:10:50 node.js we also install NPM the node
00:10:53 package manager a tool which we then can
00:10:55 use to install typescript globally on
00:10:58 our machine
00:11:00 so simply visit note reyes org and there
00:11:03 install the latest version you find here
00:11:05 simply click on this button it will then
00:11:07 download an installer you can walk
00:11:09 through that installer it is supported
00:11:11 for all operating systems and once you
00:11:14 have noches installed you will be able
00:11:17 to run this command simply open up your
00:11:21 normal terminal or command prompt and
00:11:23 then copy in that command important on
00:11:26 Mac and Linux you might need to add sudo
00:11:29 in front of this to get the right
00:11:30 permissions on Windows this will not be
00:11:33 required so simply make sure you then
00:11:35 install typescript with this command
00:11:37 enter your password in case you should
00:11:39 be prompted for it and with that you got
00:11:42 typescript installed globally on your
00:11:44 machine now what does this mean
00:11:46 typescript
00:11:47 installed well remember that typescript
00:11:50 is a programming language but it's only
00:11:52 a programming language that works
00:11:54 because we also have this compiler this
00:11:57 tool which compiles it to JavaScript so
00:12:00 in the end what we installed here is the
00:12:02 compiler and everything it needs to know
00:12:05 to understand typescript code to convert
00:12:08 it to JavaScript so with this we have
00:12:11 the compiler installed and we can run
00:12:13 the TSC command now which invokes this
00:12:16 types of compiler to compile a types
00:12:19 good file to JavaScript so to see this
00:12:22 in this project we worked on let's
00:12:25 simply add a new file using TS dot ts
00:12:29 for example any name you want but the
00:12:31 extension should be dot TS which stands
00:12:34 for typescript now let's copy that
00:12:37 JavaScript code into that types could
00:12:40 file here in visual studio code I
00:12:42 immediately get some errors which we now
00:12:44 will fix and this is one great advantage
00:12:47 of typescript if you're using the right
00:12:49 IDE and my strong recommendation really

00:12:52 is visuals to your code and I will come
00:12:54 back to it later then you already get
00:12:56 great support in the IDE when working
00:12:59 inside of typescript files here already
00:13:02 it basically lets types could analyze my
00:13:05 code and identifies some weaknesses
00:13:08 which is great because that's exactly
00:13:09 what I want
00:13:10 so here in this example let me delete
00:13:13 the jobs could only
00:13:14 J's file and with death some of the
00:13:18 errors are gone because it identified
00:13:20 that some constants and so on were used
00:13:23 in multiple files but it still gives me
00:13:25 an error down there and what you see for
00:13:28 example is that it's not sure if there
00:13:30 really is a value property now that's a
00:13:32 mistake I didn't even consider before in
00:13:34 JavaScript but it's true I'm selecting
00:13:37 an element by ID here now
00:13:40 typescript can't know if this will
00:13:41 really work maybe I have a typo in here
00:13:44 in this case I wouldn't be able to
00:13:45 select an element this element simply
00:13:48 wouldn't exist on the page so we might
00:13:50 have a typo in typescript does not
00:13:51 analyze your HTML code to find out if
00:13:54 this works so for one this might fail
00:13:56 but even if it succeeds and we select an
00:13:58 element there it doesn't have to be an
00:14:01 input element it could be any other
00:14:03 element and most HTML elements don't
00:14:06 have a value property you can access and
00:14:08 this already is great typescript forces
00:14:11 us to be more explicit to be clearer
00:14:13 about our intentions and to double check
00:14:16 our code and for example here and you
00:14:18 don't need to understand all that syntax
00:14:20 we will learn it step by step throughout
00:14:22 the course but for example here we could
00:14:25 let type know that we are sure that we
00:14:28 will get an element by adding an
00:14:30 exclamation mark this basically tells
00:14:32 typescript this will never yield null
00:14:35 this will always find an element and as
00:14:37 a developer I of course know that this
00:14:39 will always find an element because I
00:14:41 double check that ID and I see yeah I
00:14:44 have that ID here now in addition I also
00:14:47 know it will always be an input element
00:14:50 so we can use as HTML input element a
00:14:53 syntax called typecasting which I will
00:14:56 also explain in greater detail later to
00:14:59 let typescript know which type of
00:15:00 element this will be we can apply this
00:15:02 to the second element as well so just to
00:15:05 be really clear here this is typescript
00:15:08 syntax I can use this exclamation mark
00:15:10 here and I can use this typecasting here
00:15:12 because we are in a dot ts file we are
00:15:15 in a types could file we will compile
00:15:18 this to JavaScript this would not work
00:15:20 in vanilla JavaScript this is not
00:15:22 available there
00:15:24 with this we are forced to be clearer
00:15:27 about our intentions and to really think
00:15:29 about our code and double-check it which
00:15:31 is great but that's not even the biggest
00:15:33 advantage the biggest advantage is the
00:15:36 addition of types that is what gives
00:15:39 typescript its name after all and here
00:15:42 I'm not saying anything about the types
00:15:44 of data this function operates on if we
00:15:47 hover over one of these parameters we
00:15:49 see this anything here and in the end
00:15:52 this is typescript saying to us I don't
00:15:55 know what's in there it could be any
00:15:56 type of value now we can add a more
00:16:00 explicit type in typescript files so not
00:16:03 in JavaScript files but in typescript
00:16:05 files by adding a colon here and then
00:16:08 specifying the type for example number
00:16:11 doing this here and doing this here with
00:16:14 this extra syntax which typescript which
00:16:17 this compiler understands we're telling
00:16:20 typescript that this year will be of
00:16:22 type number and this will be of type
00:16:24 number and therefore now we get an error
00:16:26 here again
00:16:27 and we don't just get this error in the
00:16:29 IDE by the way we also get it if we try
00:16:32 to compile this code because that is
00:16:34 ultimately what we need to do right now
00:16:37 to compile this I will open a terminal
00:16:39 and here I'm just opening my terminal or
00:16:42 command prompt which is integrated into
00:16:44 this IDE it's the regular system command
00:16:47 from the regular system terminal I was
00:16:49 using here as well just already
00:16:52 navigated into this folder so if you are

00:16:55 not using some built-in IDE terminal you
00:16:58 can use your regular one but CD navigate
00:17:02 into that extracted starting folder
00:17:04 where you added your type script file
00:17:06 and once you are in that folder you can
00:17:10 run TS c that will invoke this
00:17:12 typescript compiler we installed earlier
00:17:14 on using – TS TS and if you run this you
00:17:20 will actually get an error you will
00:17:23 still get a JavaScript file because by
00:17:25 default
00:17:26 typescript will still compile it to
00:17:28 JavaScript you will also learn how to
00:17:31 suppress this later in the course but it
00:17:34 gives you a compiler error while doing
00:17:37 so it tells you
00:17:38 that argument of type string is not
00:17:41 assignable to parameter of type number
00:17:43 so the problem here is that typescript
00:17:46 understands that what we get on the
00:17:48 value property of our input element will
00:17:52 be a string we also see this here in the
00:17:55 IDE and we can't pass this to add
00:17:59 because there we don't want a string we
00:18:01 want a number so we have to fix this by
00:18:04 for example converting this to a number
00:18:05 here by adding a plus and as soon as we
00:18:08 do this we can compile this code again
00:18:12 by repeating that command and now it
00:18:14 compiles without errors it gives us this
00:18:17 using typescript our javascript file and
00:18:19 now it shows some errors again because
00:18:22 it doesn't understand that I will never
00:18:23 use both files at the same time here
00:18:25 again this is also something which will
00:18:27 get better later in the course once we
00:18:29 configure this we can ignore this for
00:18:31 now so it gives me this file and if we
00:18:34 open this we see something interesting
00:18:35 in here we see that there of course our
00:18:39 types are gone this casting here is gone
00:18:42 we have vanilla JavaScript again so if
00:18:45 we have a look at our types code file
00:18:46 here
00:18:47 we see that there we have all these nice
00:18:49 additions but as I mentioned these are
00:18:51 just types with features when you
00:18:53 compile to JavaScript they are used to
00:18:57 evaluate your code and to find potential
00:18:59 errors but then they are stripped out
00:19:01 and we get regular JavaScript as output
00:19:04 so now we can go to our index.html file
00:19:07 and import using T SJS and that's
00:19:11 important always import JavaScript files
00:19:14 because the browser can't run typescript
00:19:17 we need to import the result of our
00:19:19 compilation and now with that if we
00:19:22 reload this we have our working code
00:19:26 because now we have proper JavaScript
00:19:28 code where we fixed this issue by
00:19:31 casting our inputs before we pass them
00:19:33 to the function but we were able to fix
00:19:35 these issues because of our type
00:19:37 annotations here and as you saw we had
00:19:40 to write some other parts of the code in
00:19:42 a cleaner way as well and dad is white
00:19:45 typescript is amazing it forces us to
00:19:47 write better cleaner and less
00:19:49 error-prone code
00:19:54 so you saw typescript in action and it
00:19:57 offers great advantages it makes writing
00:20:01 clean code really easier typescript adds
00:20:04 types and data is super important
00:20:07 with types we have to be way more
00:20:09 explicit about how things work and we
00:20:12 can avoid many unexpected and
00:20:14 unnecessary errors by using types in
00:20:17 addition to that we also can use IDE s
00:20:20 modern IDE s which have built-in types
00:20:23 of support which can pick up on these
00:20:25 types and give us better order
00:20:27 completion and built-in errors which
00:20:30 show before we even compile the code
00:20:32 because they also understand typescript
00:20:35 but besides the types and the huge
00:20:38 advantages we get alone by using types
00:20:40 we also get our features added by
00:20:43 typescript we can use certain
00:20:45 next-generation JavaScript features
00:20:47 which you can write and use in our
00:20:50 typescript files and then they will get
00:20:52 compiled down to JavaScript code to
00:20:55 workarounds that even work in older
00:20:57 browsers if you know Babel which is a
00:21:00 tool that allows us to do that with
00:21:02 vanilla JavaScript as well it's a bit
00:21:04 like that just already built into
00:21:07 typescript we can use modern JavaScript
00:21:09 features and still produce and ship code
00:21:12 that works in older browsers as well

00:21:15 types could also add certain features
00:21:18 which only times could understands like
00:21:20 interfaces and generics these are
00:21:22 features which can't be compiled to
00:21:24 JavaScript but they don't have to
00:21:26 because they are features that help us
00:21:29 during development that give us clearer
00:21:31 errors and help us avoid even more
00:21:34 errors so it even adds more features on
00:21:37 that front
00:21:38 besides the types we already learn about
00:21:40 it also gives us certain meta
00:21:42 programming features like decorators on
00:21:45 which I have a whole module in this
00:21:47 course where you will understand what
00:21:49 exactly decorators are why they are so
00:21:52 meta and why they are amazing
00:21:54 typescript also is highly configurable
00:21:57 we didn't configure it thus far but I
00:21:59 have a whole module in the course where
00:22:02 we talk only about the compiler and how
00:22:04 to configure it and you can really find
00:22:07 unit to your
00:22:08 Harmons to make it stricter or looser
00:22:11 and to ensure that it behaves in exactly
00:22:13 the way you want it to behave and with
00:22:17 modern tooling with modern itës you even
00:22:20 get support in non types good projects
00:22:23 the IDE you just saw Visual Studio code
00:22:26 that even gives you better support in
00:22:29 plain JavaScript files because it is
00:22:31 able to use some types good features
00:22:33 under the hood without you explicitly
00:22:36 using typescript so that's a free gain
00:22:39 you get out of the box when being aware
00:22:41 of typescript and when using modern
00:22:44 tools so there are many reasons for
00:22:46 using typescript and that's probably why
00:22:49 you took this course in this course we
00:22:51 will now learn it step by step and we
00:22:53 will learn all about the amazing
00:22:55 features it adds
00:23:00 this course is packed with content we're
00:23:04 almost done getting started and
00:23:06 thereafter we'll dive her right into
00:23:07 typescript and into all its exciting
00:23:10 features and learn them step by step
00:23:12 we'll start with the typescript basics
00:23:14 of course the core types how it
00:23:16 generally works some of the new features
00:23:19 it adds and all you need to know to get
00:23:21 a good understanding of typescript
00:23:23 thereafter will already dive deeper into
00:23:26 the typescript compiler and the
00:23:28 configuration of it because it's super
00:23:30 important for you to understand what you
00:23:33 can configure there and what all these
00:23:35 different settings do is it will have a
00:23:37 closer look at that in this module
00:23:39 thereafter we'll explore next-generation
00:23:42 JavaScript features supported in
00:23:44 typescript how are they work and how you
00:23:46 can use them in typescript
00:23:47 will continue with classes and
00:23:49 interfaces a super important concept
00:23:52 partly also in vanilla javascript in the
00:23:55 case of classes but with interfaces we
00:23:57 also get a brand new typescript feature
00:23:59 and you will understand what they are
00:24:01 what they do and why we might want to
00:24:04 use them there after it's time to dive
00:24:06 deeper we'll have a look at some
00:24:08 advanced types and advanced types good
00:24:10 features in general taking it to the
00:24:13 next level there and building up on the
00:24:15 basics we already learned about up to
00:24:17 this point also an advanced feature
00:24:20 which definitely deserves its own
00:24:22 section is the generics feature you will
00:24:26 learn what that is and why it's really
00:24:29 really helpful in this module followed
00:24:32 by decorators decorators are a pretty
00:24:35 cool feature also added by typescript
00:24:38 and we'll have a closer look at
00:24:39 decorators and also build some really
00:24:42 useful decorators in that module and
00:24:45 thereafter we will have learned a lot
00:24:47 about typescript now the course is
00:24:50 organized such that I show all these
00:24:52 individual features in relatively small
00:24:55 simple demos now to also give you a
00:24:59 bigger picture and to see how you would
00:25:02 apply all these features in a real
00:25:04 project
00:25:05 we'll build just that we'll have a whole
00:25:07 module where we built an entire project
00:25:10 entirely with typescript
00:25:13 from scratch so that you see many of
00:25:15 these features most of these features
00:25:17 you learned about up to that point in

00:25:20 action and you see how they work
00:25:22 together and why they simplify the
00:25:24 process of building such a project once
00:25:27 we're done building this project we'll
00:25:29 identify a new problem and we'll learn
00:25:31 how to solve it by working with
00:25:33 namespaces and modules which will help
00:25:36 us make our code more manageable and
00:25:38 readable building up on that we'll also
00:25:41 explore webpack with typescript webpack
00:25:43 is a build tool we use in modern
00:25:45 front-end web development and you can
00:25:48 use it combined with typescript to get a
00:25:50 better project setup which simply make
00:25:52 certain things easier and allows you to
00:25:55 get the best of both worlds a great
00:25:57 development experience and all the code
00:25:59 that works really well for your
00:26:01 end-users once we're done with that we
00:26:04 have a very solid picture of typescript
00:26:07 and how to work with it in project now
00:26:09 what you will need in a lot of real
00:26:11 projects are third-party libraries so we
00:26:14 will take a closer look at that because
00:26:16 there are certain third-party libraries
00:26:19 which really embrace typescript and have
00:26:21 built in typescript support but there
00:26:24 also are many libraries which don't and
00:26:26 we'll have a look at how we can work
00:26:27 with both types of libraries in a great
00:26:30 way in typescript project well and then
00:26:34 there are some specific scenarios which
00:26:36 deserve their own modules we'll have a
00:26:39 whole module about react with typescript
00:26:42 how you can build an entire react
00:26:44 application with typescript only and
00:26:46 also an entire module about node.js and
00:26:50 Express and typescript so that you also
00:26:53 have great examples for these very
00:26:55 popular and specific use cases of
00:26:58 typescript where you can suddenly create
00:27:00 react or node applications in a
00:27:02 brand-new way with a brand new language
00:27:05 so lots of exciting content in the
00:27:07 course let's not waste any time let's
00:27:10 see how you can get the most out of the
00:27:12 course and thereafter let's dive in
00:27:18 your success matters to me and I want to
00:27:21 ensure that you get the most out of this
00:27:23 course now of course that starts with
00:27:25 watching the videos this is a video on
00:27:28 the Monde course self course watch the
00:27:30 videos you can go through this course
00:27:32 step by step it's built in such a way
00:27:35 that all the modules and lectures build
00:27:37 up on each other you can also skip
00:27:40 certain modules of course because all
00:27:42 the modules all do work on their own if
00:27:44 you already know a concept for example
00:27:46 now when watching the videos of course
00:27:48 do that at your speed you got speed
00:27:51 controls here in the video player and
00:27:53 you can slow me down if I'm going too
00:27:55 fast or speed me up if I'm going too
00:27:57 slow for your taste I also recommend
00:28:00 that you code along it's not a must-do
00:28:03 but you typically learn better if you
00:28:05 write code on your own and you have to
00:28:08 find and fix your own mistakes all the
00:28:10 pause and rewinds the videos for that
00:28:13 because the videos are of course
00:28:14 recorded in a way that also makes sense
00:28:17 to people who are not coding along so if
00:28:19 you do you might need to pause
00:28:21 occasionally try out the next steps on
00:28:24 your own or go back to an earlier point
00:28:26 in a video to see how exactly I
00:28:28 implemented something there and in
00:28:31 general practicing is important in this
00:28:34 course we work on real projects and we
00:28:36 have many smaller demos and I can only
00:28:39 encourage you that you sometimes pause
00:28:41 and try out the next steps on your own
00:28:43 or that you deviate from what I do and
00:28:46 try out your own things so definitely
00:28:48 also advance on your own of course
00:28:51 only to a certain extent because if you
00:28:53 haven't learned about a certain feature
00:28:54 it might be hard to implement it on your
00:28:56 own but whenever possible whenever you
00:28:59 feel like it definitely try out things
00:29:01 on your own now when you do that or when
00:29:05 you just code along as well
00:29:07 you will also face some errors things
00:29:10 don't always go as planned you
00:29:12 introduced a mistake in your code and
00:29:14 you get an error now debug these errors
00:29:17 and search on your own use the attached
00:29:20 code which you find attached to many
00:29:22 lectures in the course always to the

00:29:24 last lecture of each module so that you
00:29:26 can compare your code to mine and find
00:29:28 out where it deviates but also if you
00:29:31 get air
00:29:31 messages google them or use the search
00:29:34 here on udemy to also search the Q&A
00:29:36 section because chances are someone else
00:29:39 had a similar error and you can quickly
00:29:41 fix it by looking at their solution now
00:29:44 of course if you're really stuck or if
00:29:46 some concept is unclear you can also ask
00:29:48 but also answer here in the Q&A section
00:29:52 I do my best to provide quick support
00:29:54 there but also try to help others there
00:29:57 on your own because besides fixing your
00:30:00 own errors if you also help others and
00:30:03 work with our students you get a lot out
00:30:06 of this course as well so that's
00:30:08 definitely all the recommendation I have
00:30:10 and with all these steps or all these
00:30:13 building blocks you have everything you
00:30:15 need to get the most out of this course
00:30:18 now in the next lecture I will show you
00:30:20 the the setup the ide i will be using
00:30:23 throughout this course and thereafter we
00:30:25 can already dive into typescript
00:30:31 typescript is amazing but in order to
00:30:34 work with it efficiently I strongly
00:30:36 recommend that you also have a powerful
00:30:38 code editor a powerful IDE and here my
00:30:42 clear recommendation is Visual Studio
00:30:44 code it's free to use and it has amazing
00:30:47 typescript support built-in now you
00:30:50 still need to install the types of
00:30:51 compiler and we already did this but
00:30:54 this has the built-in support which
00:30:56 shows you a lot of errors directly in
00:30:58 the IDE before you even compile the
00:31:01 project so you can simply visit code
00:31:03 Visual Studio com and there you can
00:31:06 download it for any operating system and
00:31:08 simply walk through the Installer there
00:31:10 to get this modern IDE now it is the IDE
00:31:13 I will be using throughout this course
00:31:15 and you can fine tune and configure it
00:31:17 to your requirements and needs here are
00:31:20 just some settings I'm using under code
00:31:23 references you can change the color
00:31:25 theme and there I am using the dark plus
00:31:28 theme so if you want the exact same look
00:31:31 that's the theme I'm using but of course
00:31:32 you can also play around with any era
00:31:34 theme here I also installed certain
00:31:37 extensions so third-party plugins so to
00:31:40 say which change the appearance or
00:31:42 behavior of the editor you can click on
00:31:45 View and then extensions to be taken to
00:31:48 the extensions menu or the marketplace
00:31:51 and it's all free no worries nothing
00:31:53 here costs you money now I got tons of
00:31:56 extensions installed but the extensions
00:31:58 I would recommend that you definitely
00:32:00 have a look at is es lint that you
00:32:03 install this to get linting to get code
00:32:06 quality check support in your projects
00:32:08 and that you install the material I can
00:32:11 seem if you like these file icons I have
00:32:13 in my projects that's a pure visual
00:32:16 thing of course it doesn't change any
00:32:18 behaviors and I can all recommend path
00:32:21 intellisense so that later in the course
00:32:24 once we work with imports you get better
00:32:26 support there and prettier which helps
00:32:30 you format your code so that it always
00:32:32 looks nice and is readable prettier
00:32:35 works together we'll insert the shortcut
00:32:37 which you should be aware of under
00:32:39 preferences keyboard shortcuts dear if
00:32:43 you search for format
00:32:44 document this shortcut here is a
00:32:46 shortcut you can always press in your
00:32:48 code to auto format it to add missing
00:32:51 semicolons to make sure you use the
00:32:54 right indentation everywhere things like
00:32:56 that it makes your code more readable in
00:32:58 your life as a developer easier and
00:33:00 that's it
00:33:01 you can also install TS lint but that
00:33:04 will be merged with es lint in the
00:33:06 future so es lint should be all you
00:33:08 really need with that we can go back to
00:33:11 view Explorer and you should have the
00:33:14 same settings I have here but also dive
00:33:17 into the settings in general and explore
00:33:19 them and find you everything to your
00:33:22 needs and to your likings and with that
00:33:24 you have a great editor which allows you
00:33:26 to write great code powerful code with a
00:33:29 lot of built-in types of support and
00:33:31 you're well-prepared to get the most out

00:33:33 of this course
00:33:38 so we set up d ide which is important
00:33:41 now let's also set up a starting project
00:33:44 which we'll use throughout this course
00:33:45 in the different course modules so
00:33:47 basically a project setup with which we
00:33:50 can start every course module to then
00:33:52 write our code there now as you will see
00:33:56 throughout this course writing code
00:33:57 doesn't require a complex setup in
00:33:59 general but here I want a project where
00:34:03 we can write code compile it and then
00:34:06 immediately see the output of that code
00:34:08 in the browser and for that I'll first
00:34:11 of all add a new index.html file and you
00:34:13 can add this in any empty folder the two
00:34:16 other files or folders you see here are
00:34:18 just config files for git in case you're
00:34:22 using version control and for my editor
00:34:24 which sets the zoom level so that's all
00:34:27 I have here but in that index.html file
00:34:29 I will now initialize it with a base
00:34:31 skeleton and for that and visual studio
00:34:34 code you can just type HTML choose that
00:34:37 html5 option if you're not getting this
00:34:40 menu just press ctrl in space choose the
00:34:43 html5 option and hit enter and we'll get
00:34:46 this skeleton there we could enter
00:34:49 understanding typescript here as a title
00:34:51 but that does not matter too much more
00:34:53 important is that here you add a script
00:34:56 tag in your head section and add a
00:34:59 source and point at app J s here and add
00:35:03 the defer attribute this tries to import
00:35:07 a app.js file which of course right now
00:35:09 doesn't exist and it will then of course
00:35:11 also execute it if it finds it this
00:35:14 allows us to view our changes our code
00:35:18 changes directly on the screen in the
00:35:20 browser or if we're just logging
00:35:22 something to the console in the browser
00:35:24 dev tools next I will add an app dot ts
00:35:28 file that's the file a typescript file
00:35:30 where we will write some code and there
00:35:32 for example you could console.log your
00:35:35 code goes here or whatever you want you
00:35:38 can console.log whatever you want here
00:35:39 and if you do that you can compile this
00:35:42 file with typescript which we installed
00:35:44 earlier for dad you can open the
00:35:46 terminal integrate it into the editor
00:35:48 here and simply write TSC
00:35:52 ts this compels this types would file
00:35:54 and generates a app.js file now which is
00:35:57 the file we're importing here and if you
00:35:59 now open this index.html file you see
00:36:02 whatever happens in here you kick off
00:36:04 the logic you wrote in here and either
00:36:06 that's logic that manipulates something
00:36:08 on the Dom or like in this case it's
00:36:10 logic which simply gets locked to the
00:36:13 console so here in this case I opened
00:36:15 this HTML file in the browser you can
00:36:18 simply double click on it outside of the
00:36:20 IDE so in the normal Windows Explorer or
00:36:23 the Mac finder and then maybe open your
00:36:25 developer tools if you're just logging
00:36:27 something to the console and you'll see
00:36:28 your log here now that's nice but
00:36:31 whenever we change something here in our
00:36:33 code we have to manually recompile well
00:36:37 that is what it is for now it will
00:36:39 change later in the course but we also
00:36:41 have to manually reload this page here
00:36:43 and to speed this up and make sure that
00:36:46 you don't have to do this whenever you
00:36:48 change something we'll actually also add
00:36:51 another tool here to this dummy's setup
00:36:54 which we'll use throughout this course
00:36:55 so that this happens automatically now
00:36:58 to install such a tool
00:37:00 let's run NPM in it here in this project
00:37:03 folder the NPM command is available if
00:37:06 you install node.js make sure that for
00:37:10 that you visit no trace org and download
00:37:13 and install the latest version you find
00:37:15 here for the moment we're not going to
00:37:17 write any node.js code but no trace
00:37:20 comes together with the npm tool which
00:37:22 we can use to install third-party
00:37:23 dependencies or useful tools that speed
00:37:26 up our development and for that reason
00:37:28 we need it here so with that installed
00:37:31 you can run npm init in this project
00:37:33 folder simply it enter and you can
00:37:35 answer all these questions here with the
00:37:37 defaults by simply hitting enter all the
00:37:39 time and once this completes it gives
00:37:41 you a package.json file which looks
00:37:43 something like this and now you can run

00:37:45 npm install to install a dependency
00:37:48 which is exclusive to this project so to
00:37:51 install a tool you could say which you
00:37:52 can use in this project – – save – death
00:37:56 – mark it as a development only
00:37:58 dependency so a tool that helps us
00:38:00 during development and does not contain
00:38:02 any code which will execute as part of
00:38:04 our
00:38:05 main code and the tool name is light –
00:38:08 server if you hit enter here this
00:38:11 installs this extra tool and once this
00:38:15 finishes just go into your package of
00:38:17 JSON file and in the scripts part add a
00:38:19 comma and add a new script which you
00:38:22 name start and then as a value between
00:38:24 double quotes enter light – server so
00:38:28 that name of the package which was added
00:38:29 here if you now it enter you can run NPM
00:38:33 start here to start this start script
00:38:35 and Lite server is a simple development
00:38:38 server which always serves the
00:38:40 index.html file next to the package.json
00:38:43 file so this file and it serves your
00:38:45 application on this URL you see here
00:38:49 localhost 3000 by default and you can
00:38:54 then just visit this location simply
00:38:56 enter localhost colon 3000 in the
00:38:58 browser and now your code runs here and
00:39:01 why is this better
00:39:02 well this will now automatically reload
00:39:04 the page whenever another file in this
00:39:06 directory changes so if I for example
00:39:09 add an exclamation mark here and I save
00:39:12 this and I then compile this again with
00:39:14 TSC app dot TS and you go back to the
00:39:19 browser you see the latest output
00:39:21 immediately because it automatically
00:39:22 reloaded and that simply saves us the
00:39:25 extra work of reloading manually now
00:39:28 important about this NPM start process
00:39:30 definitely keep it running as long as
00:39:33 you are working on your project as long
00:39:35 as you are writing code which you want
00:39:37 to see execute in the browser once
00:39:39 you're done you can always quit this
00:39:40 process with ctrl C but once you do so
00:39:43 your project is no longer getting served
00:39:46 under localhost 3000 so keep it up and
00:39:48 running as long as you are writing code
00:39:50 and making changes with that I'll change
00:39:53 it back but this is totally up to you
00:39:55 and this is the project setup I will use
00:39:57 throughout this course you also find it
00:39:59 attached of course in the finished form
00:40:01 just one important note if you download
00:40:04 the attached starting project or any
00:40:07 other course snapshot any other code
00:40:09 snapshot you find anywhere in the course
00:40:11 then you will get a download that does
00:40:14 not include this node modules folder
00:40:16 this is a huge full
00:40:19 which Indian stores all third party
00:40:20 packages and their dependencies and
00:40:23 since it is so huge I typically delete
00:40:25 it because you can easily recreate it by
00:40:28 running NPM install so if you download
00:40:31 one of my attachments navigate into the
00:40:34 extracted folder and in that folder run
00:40:36 npm install and this will install all
00:40:38 the penances and recreate this node
00:40:41 modules folder and once you did this you
00:40:43 can run NPM start or do whatever you
00:40:45 want to do in this project and was dead
00:40:48 we got this project set up we'll use
00:40:50 throughout the course now let's not
00:40:51 waste any more time and let's just get
00:40:54 started
00:40:58 now with the core basics or with the
00:41:01 getting started section out of the way
00:41:03 let's dive into the core type script
00:41:06 syntax the core features and that of
00:41:08 course means we'll dive into the types
00:41:11 which types types with offers and
00:41:13 supports and how we work with these
00:41:15 types how we assign types how we can
00:41:17 reap the benefits of using types and all
00:41:19 that fun stuff
00:41:24 typescript provides many types to
00:41:28 JavaScript
00:41:29 now javascript itself also knows some
00:41:32 datatypes and I'll come back to that in
00:41:34 this module as well but typescript adds
00:41:36 many more types and as you will all
00:41:39 learn in this course
00:41:40 typescript also enables you to write
00:41:42 your own types now let's start with some
00:41:46 of the core types which javascript
00:41:48 already knows and which typescript all
00:41:50 the supports and we'll also have a look

00:41:52 at what the difference between
00:41:54 javascript knowing the type and
00:41:56 typescript using that type means one of
00:42:00 the core types we work with and
00:42:01 JavaScript and typescript is the number
00:42:04 type now in JavaScript and the same is
00:42:07 true for a typescript there is only one
00:42:09 number type there is no special type for
00:42:12 integers or floats instead these values
00:42:16 here would all be numbers one would be a
00:42:19 number without a decimal place 5.3
00:42:22 obviously is one with a decimal place
00:42:24 and all these values are of type number
00:42:27 other programming languages have special
00:42:30 integer types and float or double types
00:42:33 javascript doesn't have that and types
00:42:35 good doesn't have it either so we have
00:42:38 the number type which we know from
00:42:39 JavaScript also as a type in typescript
00:42:42 we also have two string datatype and
00:42:45 that would be text which you can define
00:42:48 in one of these freeways with single
00:42:50 quotes with double quotes or also with
00:42:52 backticks
00:42:53 the last notation with backticks is a
00:42:56 special syntax provided in modern
00:42:59 JavaScript and also in typescript which
00:43:02 allows us to write so-called template
00:43:04 literals that are normal strings where
00:43:07 you can dynamically inject some data
00:43:09 into them and so strings are simply text
00:43:12 and JavaScript knows about string value
00:43:14 types typescript does so as well last
00:43:18 but not least one of the core data types
00:43:20 javascript knows and typescript also
00:43:22 supports is the boolean data type that
00:43:25 would be true or false and that's super
00:43:28 important in programming obviously
00:43:29 especially when working with if
00:43:31 statements here we got these two values
00:43:34 and that's important because in
00:43:35 JavaScript you also might know this idea
00:43:38 truthy and falsy values for example debt
00:43:41 zero the number zero is a falsie value
00:43:45 if you use it an if condition it is
00:43:47 treated as false the boolean data type
00:43:49 really just knows these two values
00:43:51 though true or false and that's not just
00:43:53 a case for typescript but all of our
00:43:55 javascript this truth the false ii
00:43:57 concept which you should know that is
00:43:59 not related to data types that some
00:44:02 behind the scenes work javascript as at
00:44:05 runtime when it sees certain values in
00:44:08 if conditions so with numbers strings
00:44:10 and boolean z' we get a couple of core
00:44:12 data types of course not all we got
00:44:14 objects and so on as well but let's
00:44:16 focus on these types and see what
00:44:18 typescript does with them or what we can
00:44:21 do with them with the help of typescript
00:44:23 for this i'm back to the project we saw
00:44:26 in the first course module and there I
00:44:28 showed you that all you need to do now
00:44:30 is run NPM start in a terminal navigated
00:44:34 into this project folder to spin up this
00:44:36 live development server which will
00:44:38 reload whenever we change something and
00:44:40 here I opened up this localhost 3,000
00:44:44 address in a new tab off my browser
00:44:47 right now I'm getting an error because I
00:44:49 have no app trace file yet of course you
00:44:51 find this starting project all that
00:44:53 hatched to this lecture will get such a
00:44:56 app.js file which we're trying to import
00:44:58 here in our index.html file as soon as
00:45:01 we compile apt yes from typescript to
00:45:04 JavaScript and we can do that in a new
00:45:07 tab of the terminal so did we keep this
00:45:09 process running and open a new tab
00:45:10 instead by simply running TSC app dot TS
00:45:16 and what this does is it compiles the
00:45:19 type good file and spits out a
00:45:20 javascript file and once that happens we
00:45:23 can reload this page and we get the time
00:45:26 to get started
00:45:27 output here so now we have this setup
00:45:30 here where we can ride some typescript
00:45:33 code and then compile it to JavaScript
00:45:34 code to see what it does now with that
00:45:38 in the types good file I'll actually get
00:45:40 rid of the content there because now I
00:45:42 want to dive into these core data types
00:45:44 which I just showed you on the slide so
00:45:47 that you understand how to work with
00:45:48 them in typescript now let's start very
00:45:51 very
00:45:52 let's say we have a new function add and
00:45:55 there we expect two numbers and one and
00:45:57 add two and I returned and one plus and

00:46:00 you just like that very simple function
00:46:03 nothing typescript ish about it now we
00:46:05 have two numbers with which we want to
00:46:08 work that could be number one here which
00:46:11 is say five and all the number two which
00:46:16 is maybe 2.8 whatever you want two
00:46:18 numbers here now obviously and not very
00:46:21 surprisingly we can add or call the add
00:46:25 function and pass in number one and
00:46:27 number two as arguments to this function
00:46:29 store the result in a new constant maybe
00:46:33 and then to see something on the screen
00:46:35 we can console lock the result if we do
00:46:38 that and I recompile this file with TSC
00:46:42 apt yes then this page should
00:46:44 automatically reload already if not you
00:46:46 can manually reload of course and you
00:46:48 should see 7.8 now you might think
00:46:51 that's not too special right this is a
00:46:53 pretty straightforward JavaScript
00:46:56 snippet and indeed there is nothing
00:46:58 typescript ish about it well let's do
00:47:01 something which will break that snippet
00:47:03 in normal JavaScript let's say this
00:47:05 input here is actually not a number
00:47:07 but some text a 5 in text and if we now
00:47:12 save that and rerun our compilation
00:47:14 command here you'll see that once this
00:47:17 page reloads here I get 52.8 as output
00:47:21 and that's obviously not the correct
00:47:23 result of this addition now do you know
00:47:25 why we're getting this output in normal
00:47:28 JavaScript which we in the end are
00:47:30 executing here well we're getting this
00:47:32 output because this is not the result of
00:47:35 the mathematical addition but instead
00:47:38 this concatenates this as a string
00:47:40 because this input here 5 is a string
00:47:44 and then javascript sees okay I got a
00:47:46 string I'm adding something to the
00:47:48 string well certainly this something
00:47:51 should also be converted to a string so
00:47:53 that overall I got a string because the
00:47:56 first value was a string and hence what
00:47:58 JavaScript does is it converts 2.8 from
00:48:00 a number to a string concatenates a
00:48:03 longer string from 5 and 2.8 hen
00:48:06 yielding 52.8 as a string and return
00:48:09 stat so it's not treating this in a
00:48:11 mathematical way but instead as a string
00:48:13 and with JavaScript as can happen now of
00:48:16 course you might think why would I write
00:48:17 such code
00:48:18 I am the developer why would I make this
00:48:20 mistake well maybe you're not the one
00:48:23 making this mistake maybe this is
00:48:25 getting fetched from some user input and
00:48:27 you introduced a little bug in your code
00:48:29 where you forgot to transform this or
00:48:32 you're working in a team and you're
00:48:34 having a couple of script files working
00:48:37 together and some other developer
00:48:39 introduced such an error it's not
00:48:41 impossible to make such errors but it
00:48:43 can be hard to track them down here of
00:48:46 course it's pretty obvious that
00:48:47 something went wrong because we have a
00:48:48 basic script but in a bigger script you
00:48:50 might not even immediately recognize
00:48:52 that something went wrong here and
00:48:54 that's where typescript can help us we
00:48:57 can add type assignments in this
00:49:00 function to our parameters we can tell
00:49:02 typescript that these two parameters
00:49:04 should be of type number and not be of
00:49:07 type I don't care which is the default
00:49:10 so we do that by adding a colon here
00:49:13 after the value to which we want to
00:49:15 assign a type so in this case after the
00:49:17 parameter name and then the name of the
00:49:19 type for example number would be one of
00:49:22 the supported names
00:49:23 besides number you also got string or a
00:49:26 boolean but we'll come back to those for
00:49:29 the moment we need number and we don't
00:49:31 just need it on the first parameter here
00:49:33 but all is on the second one so here
00:49:35 also we can add a colon and then number
00:49:38 and now what we're saying to typescript
00:49:41 is hey both parameters here should be of
00:49:44 type number passing in values of a
00:49:46 different type is not allowed and indeed
00:49:49 my IDE already complains here because
00:49:52 Visual Studio code has built in
00:49:54 typescript support but even if we would
00:49:56 overlook this as soon as I recompile
00:50:00 this by rerunning TS c ab TS you will
00:50:03 see we get an error we get an error that
00:50:05 argument of type string 5 is not
00:50:08 assignable to parameter of type number

00:50:11 and it even shows us where this happened
00:50:13 and gives us the line number line 8 and
00:50:16 it's basically showing us the same the
00:50:19 IDE shows here
00:50:20 so in case we overlooked it in the IDE
00:50:21 compiling it now fro is an error and
00:50:24 that's the important thing about
00:50:25 typescript it only helps us during
00:50:28 compilation
00:50:29 it doesn't change JavaScript to work
00:50:31 differently at runtime because browsers
00:50:34 have no built in typescript support it
00:50:36 can only help us during development
00:50:38 before we compile our typescript code to
00:50:41 JavaScript but there it's extremely
00:50:44 useful because it adds an extra step an
00:50:46 extra sanity check we're here we find
00:50:49 out oh we made a mistake here this
00:50:52 shouldn't be a string this should be a
00:50:54 number we can fix this and we're good
00:50:57 this is what typescript does it helps
00:50:59 you during development it does not
00:51:01 change your runtime code indeed here
00:51:04 even with the default settings it
00:51:05 compiled our error here even though it
00:51:08 detected it during compilation and
00:51:10 created a file which causes the
00:51:12 incorrect result because by default
00:51:14 types coop does not step in here later
00:51:17 you'll learn how you can make sure that
00:51:18 it does but by default it doesn't even
00:51:20 block compilation still it yells at you
00:51:24 and points at this mistake so that you
00:51:27 can fix it and so that you can avoid
00:51:29 such mistakes here by the way make sure
00:51:31 you don't have a PS and app tears open
00:51:33 at the same time you could get errors
00:51:36 here in the IDE regarding duplicate
00:51:37 function implementations closing two
00:51:39 jars could file fixes this
00:51:45 so we already see how typescript can
00:51:48 help us during development now we also
00:51:50 know that there is a number type in
00:51:52 JavaScript and we can see it with the
00:51:55 built in type of operator this is now
00:51:58 not typescript specific this is a
00:51:59 built-in operator and keyword supported
00:52:02 by JavaScript we can use it to get the
00:52:05 type of a certain value so here we could
00:52:07 console.log type of number one and what
00:52:11 we'll see if we do that is that as soon
00:52:13 as we compile this so that we run the
00:52:15 updated code here we print number to the
00:52:19 console now we do that thanks to this
00:52:22 output here and thanks to the type of
00:52:23 operator and in vanilla JavaScript
00:52:26 without typescript we could use that to
00:52:28 all's improve our function here we could
00:52:30 check if type of number is equal to
00:52:34 number excuse me
00:52:35 type of and one I mean if that is equal
00:52:38 to number and we could also check if
00:52:41 type of n2 is equal to number and only
00:52:44 perform our operation here if it is and
00:52:47 otherwise throw an error or do the
00:52:49 opposite and check if it's not equal or
00:52:51 if and two is not equal and if either of
00:52:55 the two is not a number then we could
00:52:57 throw a new error where we say incorrect
00:53:00 input this actually would be a non
00:53:03 typescript way of ensuring that we can't
00:53:06 call this function with a string here if
00:53:09 I do this now and I recompile we get our
00:53:11 typescript error but let's ignore that
00:53:13 for now if we rerun this we get the
00:53:15 incorrect input which we're throwing
00:53:17 ourselves so now we hardened this
00:53:20 function in JavaScript it fails at
00:53:22 runtime but failing might here be better
00:53:25 than showing an incorrect output which
00:53:27 we had before so this would be a way of
00:53:29 checking the inputs in just JavaScript
00:53:32 you don't need typescript for that
00:53:34 that's regular JavaScript code but of
00:53:37 course this approach has downsides
00:53:38 sometimes it's the right thing to do
00:53:40 sometimes you only can validate certain
00:53:43 inputs at runtime but the downside is
00:53:46 here we're checking something which we
00:53:48 actually can avoid during development
00:53:50 with typescript so yes we're throwing an
00:53:54 error and in our application we might
00:53:56 have built-in measures that can then
00:53:58 fall back to some other behavior to save
00:54:01 the running application but still we're
00:54:03 throwing an error which is really not
00:54:05 necessary to occur in the first place we
00:54:07 could have prevented it with typescript
00:54:10 and here we really see the difference
00:54:12 between JavaScript and typescript when

00:54:14 it comes to types javascript is
00:54:15 dynamically typed which means it's
00:54:18 perfectly fine that we have a variable
00:54:20 which initially might hold a number
00:54:22 where we later assign a string to it and
00:54:25 that's why we have the type of operator
00:54:27 so that we can check the current type of
00:54:30 something at runtime if we have some
00:54:33 code that depends on a certain type
00:54:35 typescript on the other end
00:54:37 is statically typed which means we
00:54:39 define the types of variables and
00:54:42 parameters ends on during development
00:54:45 they don't suddenly change during
00:54:47 runtime now of course since typescript
00:54:50 is compiled to JavaScript they
00:54:52 theoretically could but if we use
00:54:55 typescript and we write code where we
00:54:57 suddenly assign a new type of data into
00:55:00 a variable where we previously set that
00:55:02 this should be a number for example and
00:55:04 now we're assigning a string then we get
00:55:07 an error during development so that we
00:55:09 are forced to be clear regarding the
00:55:12 types something can or cannot hold
00:55:15 that's the difference here so we don't
00:55:17 really want to use implementations or
00:55:20 solutions like that if we can avoid it
00:55:23 with typescript still it's important to
00:55:25 know that javascript of course knows
00:55:27 about the concept of types it knows
00:55:30 about some types like numbers string and
00:55:33 boolean but using that always means that
00:55:36 we can only fail at runtime instead of
00:55:38 during development which is a better
00:55:40 place for us as a developer it allows us
00:55:42 to fix bugs earlier and in addition
00:55:46 javascript only knows about a couple of
00:55:48 types as you will learn throughout this
00:55:50 course typescript knows about way more
00:55:52 types than JavaScript so this runtime
00:55:55 checking is really not as flexible or
00:55:58 not as powerful as what we can do with
00:56:00 typescript
00:56:01 and for all these reasons this approach
00:56:03 is actually not the approach we want to
00:56:05 use here sometimes it can be useful to
00:56:07 get the type at runtime but sometimes
00:56:11 like in this example
00:56:12 it's way better to get it during
00:56:14 development the only important thing to
00:56:16 recognize of course justice that with
00:56:18 typescript you only get to support
00:56:21 during development not at run time
00:56:23 because these typescript features and
00:56:25 checks are not built into the JavaScript
00:56:27 engine so that logic can't execute in
00:56:30 the browser it can only execute during
00:56:32 development when you compile your code
00:56:39 so now that we know about typescript
00:56:41 fundamentals and how it differs and also
00:56:45 is related to JavaScript let's dig a bit
00:56:48 deeper into the different core types
00:56:50 typescript knows the number is the type
00:56:53 we see here and as I explained there is
00:56:55 no difference between integers like the
00:56:57 5 here and floats or doubles as it would
00:56:59 be called in other programming languages
00:57:01 like the 2.8 here indeed in JavaScript
00:57:04 and the same is true in typescript all
00:57:05 numbers are floats by default so for
00:57:08 JavaScript and therefore all for
00:57:09 typescript there is no difference
00:57:11 between 5 like this and 5 like this it's
00:57:14 the same number essentially now besides
00:57:17 numbers we also have other core type and
00:57:19 that would be strings so text and
00:57:22 boolean let's also have a look at those
00:57:24 we actually saw all of those in action
00:57:27 here in this if statement already which
00:57:29 we learned is a bit redundant
00:57:30 nonetheless this here would be a string
00:57:33 also of course 5 with quotes would be a
00:57:36 string because it's text and the result
00:57:39 for example of this comparison here that
00:57:41 would be a boolean this operator the
00:57:44 triple equal sign or the negated
00:57:46 equality operator here that produces
00:57:49 true or false and of course we can
00:57:52 either produce it dynamically in AF
00:57:54 check which will often do or we
00:57:56 initialize a variable with a true or
00:57:58 false value so let's do both here here
00:58:01 we could add a new constant print result
00:58:04 and set this to true for example and
00:58:07 just to make it really clear this could
00:58:09 be a variable as well it doesn't have to
00:58:10 be constant variable which you would
00:58:13 create with let in JavaScript but since
00:58:15 I don't plan on changing it here I'll go

00:58:17 with a constant and we could pass this
00:58:19 as a third parameter let's say we pass
00:58:21 in print result which holds true here
00:58:24 now we immediately get an error of
00:58:26 course because our add function does not
00:58:28 support a third argument we see expect
00:58:31 the two arguments but got free so
00:58:33 therefore we have to make sure we
00:58:34 support a third argument and there we
00:58:37 could add a show result parameter you
00:58:41 could name it print result here as well
00:58:43 I'm going with show result to a white
00:58:45 confusion regarding the naming but
00:58:47 technically these two names would not
00:58:49 clash so here I'll name it show result
00:58:52 and I want to make sure that this is of
00:58:54 type boolean by setting this to boolean
00:58:56 again by adding a colon after the
00:58:58 parameter here and then by adding the
00:59:01 name of the type now this function
00:59:04 accepts this it now what we can do is we
00:59:06 can add a if check here and check if
00:59:09 show result if this is true we can of
00:59:12 course compare it to true but as you
00:59:14 know in JavaScript you can also just
00:59:16 pass in the truth or false value here
00:59:19 and JavaScript will evaluated and if
00:59:21 this yields true somehow or a truth D
00:59:23 value in general then we'll make it into
00:59:25 the if block otherwise we won't and
00:59:28 let's say we do make it in here and then
00:59:29 I want to console.log + 1 + + Q
00:59:32 otherwise in the else case if we don't
00:59:35 make it in there then I want to return
00:59:37 this so now this is a function which
00:59:39 sometimes returns a value and sometimes
00:59:43 does not return a value but output it
00:59:45 immediately now you could argue if you
00:59:47 want to write such a function which is
00:59:49 kind of unpredictable or which might
00:59:52 behave unexpectedly if you're passing
00:59:55 and true here but here we're doing it so
00:59:57 this function only sometimes returns
00:59:59 sometimes it also does not return but
01:00:01 instead just lock something to the
01:00:03 console now here we can actually call
01:00:06 add just like this and don't need to
01:00:09 store it in result and don't need to
01:00:11 console.log result because with print
01:00:13 result set to true add itself so the
01:00:17 function itself will print a result
01:00:19 hence if we now save that and we
01:00:21 recompile our app ts file here with the
01:00:24 TSC command once this is done the page
01:00:27 will reload and we still see our output
01:00:29 here but now it's coming from line 6 and
01:00:32 if we have a look line 6 is indeed
01:00:34 inside the function so this is a boolean
01:00:37 now let's say we want to customize the
01:00:39 output and therefore we have a result
01:00:41 phrase constant here where we say result
01:00:44 is : and then some white space and we
01:00:48 pass that in as hoo as well with result
01:00:50 phrase here well then we could expect
01:00:53 this as an argument here as well phrase
01:00:55 which should be of type string by adding
01:00:57 a colon and then string is the name of
01:00:59 the type and now we could use that
01:01:01 phrase to output it as part of our
01:01:04 result output if
01:01:06 we're printing the result right in the
01:01:07 function so then here we could have
01:01:09 phrase + + 1 + + 2 and if we do that and
01:01:13 we recompile by repeating that command
01:01:15 will see that this phrase is part of the
01:01:18 result but we also now reintroduce the
01:01:21 old back because I have a string which I
01:01:24 combined with two numbers everything is
01:01:26 converted cue a string here and that's
01:01:29 not what I want to avoid this in this
01:01:32 function we could add a result variable
01:01:34 here or a result constant and store our
01:01:38 result here this will now be treated in
01:01:40 a mathematical way because only numbers
01:01:43 are involved and then here we could
01:01:45 combine that with phrase or just return
01:01:48 it and now since this is never directly
01:01:50 calculated together with a string this
01:01:53 will always be a number and yes then
01:01:55 here this number combined with a string
01:01:57 will be converted to a string
01:01:58 but since the mathematical calculation
01:02:00 finished before that will have the right
01:02:02 result so now if we repeat that and a
01:02:05 recompile we get the right output so now
01:02:08 these are the core data types in action
01:02:10 let's now make sure we fully understand
01:02:13 how types are assigned and also why we
01:02:16 don't explicitly assign types down there
01:02:22 so we're using the core types of number

01:02:25 boolean and string and here in the list
01:02:29 of parameters of this function we're
01:02:31 always explicitly assigning the types
01:02:34 with a colon after the parameter name
01:02:36 and then the name of the type so here
01:02:39 the names are number boolean and string
01:02:41 and in case you were wondering these are
01:02:44 now special identifiers this overall
01:02:46 here is a special syntax which is added
01:02:49 by typescript it's not part of the
01:02:51 compiled JavaScript code if we check
01:02:54 that code here
01:02:55 these type assignments are gone because
01:02:58 javascript does not support them this
01:03:00 colon thing after a variable or after a
01:03:03 parameter and then number and boolean
01:03:06 and string these special keywords this
01:03:09 is introduced by typescript the
01:03:11 typescript compiler understands it the
01:03:14 IDE here supports typescript and
01:03:16 therefore doesn't complain about these
01:03:17 special keywords javascript does not
01:03:20 understand this syntax it doesn't
01:03:22 understand a colon after a parameter
01:03:24 where a colon after a variable and then
01:03:27 the special number or string keyword
01:03:29 javascript doesn't understand this and
01:03:31 therefore this is not part of the
01:03:33 JavaScript output it's really just used
01:03:35 by the types of compiler and then well
01:03:37 it is a compiler because it converts
01:03:39 this code to JavaScript code sidenote
01:03:42 you also see it switches Const
01:03:44 but that's something I'll come back to
01:03:46 later so we have our explicit type
01:03:50 assignments here and it's only
01:03:51 understood by typescript great why don't
01:03:54 we have them down there I don't have
01:03:58 explicit type of assignments here and by
01:04:00 the way also not here when we calculate
01:04:02 the result for example because
01:04:04 typescript has a built-in feature which
01:04:06 is called type inference
01:04:08 this means that tile script does its
01:04:10 best and it does a pretty good job there
01:04:12 to understand which type you have in a
01:04:17 certain variable or a constant and here
01:04:20 for example it understands that number
01:04:22 one will always be of type number in the
01:04:25 end because you initialize it with a
01:04:27 number now this actually is a constant
01:04:30 so it's even more specific than that and
01:04:32 the type it identifies here is not just
01:04:34 any number
01:04:36 it's the number five because you'll not
01:04:38 be able to assign a new number or a new
01:04:41 value to a Const value anyways if you
01:04:44 would change this to a variable so if
01:04:46 you would use let instead then of course
01:04:49 this would not break anything we can use
01:04:51 a variable there it might not be best
01:04:53 practice because this value never
01:04:54 changes but it's also not horrible but
01:04:56 now if we hover over this we see
01:04:58 typescript doesn't say okay this has to
01:05:00 be a five but still it detects that the
01:05:03 type here is a number now we absolutely
01:05:06 could write this code here on our own we
01:05:09 can add a colon after the variable name
01:05:12 on the left side of the equal sign and
01:05:14 then the name of the type so basically
01:05:16 the same we did in the parameters of
01:05:18 this function but this is redundant and
01:05:21 it actually is also not considered to be
01:05:23 a good practice because typescript is
01:05:26 able to perfectly infer this type from
01:05:29 there so assigning this is not a good
01:05:33 idea
01:05:33 this only changes if you would create
01:05:36 this variable in an unassigned way like
01:05:39 this if you don't initialize it
01:05:41 immediately then it's a good practice to
01:05:44 tell typescript which value will
01:05:47 eventually be stored in there so that
01:05:49 when you later assign a value to it and
01:05:52 of course it's a bit redundant here to
01:05:54 split this in two lines I'm just doing
01:05:56 this for demo purposes but now if I
01:05:59 assign this here this works because I
01:06:00 told typescript in advance that this
01:06:03 will be of type number you don't have to
01:06:05 do that it also works if you don't do
01:06:07 that but now you could also add this
01:06:10 five and you wouldn't get an error
01:06:11 because you're not telling typescript
01:06:14 anything about the type which will be
01:06:16 stored in this variable and therefore
01:06:17 types could allows any type if you
01:06:20 instead add : number here you're telling
01:06:23 typescript hey eventually a number will

01:06:26 be stored in there and hence if you
01:06:28 later store something else in there like
01:06:30 in this case where we store a string
01:06:32 you'll get an error here in the IDE and
01:06:35 of course also if you compile your code
01:06:37 you will get the error we already saw
01:06:39 before
01:06:42 so this is how you can assign types now
01:06:45 even if types could just infer the type
01:06:48 and let me fix this it will yell at you
01:06:51 if you break that inferred type actually
01:06:53 it's wrong to say even because of course
01:06:55 it does why would it not do that type
01:06:57 inference is there for you to save you
01:06:59 code to avoid that you manually have to
01:07:02 assign a type of course typescript yells
01:07:04 at you if you then use a wrong type a
01:07:07 type that it did not infer for example
01:07:09 here if result phrase is created with
01:07:12 let so that it's variable then type
01:07:15 could here and first that this will be
01:07:16 of type string because we initialize it
01:07:19 with a string so this is basically the
01:07:21 equivalent to not initializing it and
01:07:23 setting the type on our own and then
01:07:25 assigning a value later now if we change
01:07:28 result phrase queue let's say zero here
01:07:33 for whatever reason we might want to do
01:07:35 that well then we get an error here that
01:07:38 type 0 is not assignable of type string
01:07:41 and that makes sense right
01:07:43 typescript inferred that we wanted to
01:07:45 store a string we're now trying to store
01:07:47 a number we get an error
01:07:48 that's the job the core task of
01:07:52 typescript checking types and yelling at
01:07:55 us if we're using them incorrectly
01:08:01 let's take deeper into the core types
01:08:04 typescript supports the next type that's
01:08:07 interesting is the object type now you
01:08:09 note objects in JavaScript they look
01:08:11 like this you have curly braces and then
01:08:13 you have key value pairs in there and
01:08:15 such values would also be treated as
01:08:18 object types in typescript so any
01:08:20 JavaScript object is of type object
01:08:22 though I will already say there are more
01:08:25 specific versions of objects in
01:08:29 typescript so that you can say this is
01:08:30 not just any object this is an object
01:08:33 which has to has these properties or
01:08:35 which has to be based on this or that
01:08:37 constructor function but we'll get there
01:08:39 step by step to dive into objects I'll
01:08:42 first of all rename app TS here and I'll
01:08:44 rename this to basics TS here and add a
01:08:49 new app TS file which will then
01:08:53 overwrite the old app.js file once we
01:08:55 compile it where we can now type into
01:08:57 objects and let's start by creating a
01:08:59 basic object here let's say a person
01:09:01 with curly braces here and we give this
01:09:04 a name here I'll go with Maximilian
01:09:06 because it is my name and the age of 30
01:09:09 now of course we can console.log her
01:09:13 sneer and if we do so and we compile
01:09:17 this unsurprisingly we should see that
01:09:20 object being printed here in the console
01:09:23 now what we also can do in JavaScript is
01:09:27 we can try to access let's say nickname
01:09:30 a property which does not exist here now
01:09:33 you immediately see the typescript is
01:09:36 not too happy about that and hence my
01:09:37 IDE tells me it tells me that property
01:09:40 nickname does not exist on that type so
01:09:43 if we save that and I try to compile
01:09:46 that we indeed get that same error down
01:09:49 there the typescript compiler does not
01:09:51 like this and it tells me that we have
01:09:52 no nickname property on this object it
01:09:55 finds out that we don't have this
01:09:58 nickname property because if we hover
01:10:01 over person it inferred we can see there
01:10:03 is a colon after person so after the
01:10:05 variable or constant name it inferred
01:10:08 that this is the type of data which is
01:10:10 stored in there now that's not just
01:10:12 object as you can tell that is a
01:10:14 concrete
01:10:15 object it's an object with a name key
01:10:18 where then the type in turn has to be a
01:10:20 string and the H key where the type has
01:10:23 to be number and actually this can be
01:10:25 confusing here this here obviously looks
01:10:28 like a JavaScript object curly braces
01:10:31 key value pairs well the first important
01:10:34 thing to see here is that we have a
01:10:36 semicolon here after each line we don't
01:10:38 have that in a JavaScript object we have
01:10:40 a comma here and indeed this is not a

01:10:42 JavaScript object here which is created
01:10:44 somewhere this is the object type
01:10:48 inferred by typescript and object types
01:10:51 are written almost like objects but of
01:10:54 course we don't have key value pairs
01:10:56 there but key type pairs object types
01:11:00 are there to describe well the type of
01:11:02 object that is getting used somewhere we
01:11:06 could be more generic I could explicitly
01:11:08 assign a type here to the constant of
01:11:11 object object is one of the built-in
01:11:14 types just like number and string and
01:11:17 now if I hover over this we see persons
01:11:19 of type object and now typescript really
01:11:22 only cares about the fact that this is
01:11:24 our object type now still if we compile
01:11:27 this we get that error though because
01:11:31 typescript still analyzes our code and
01:11:33 sees that we try to access something
01:11:35 which doesn't exist there but it's
01:11:36 important to understand that it all
01:11:38 starts with this most generic object
01:11:41 type but often you want to be more
01:11:43 specific than that you don't just want
01:11:45 to work with that generic object type
01:11:47 you really want to get the full support
01:11:49 for example right now if I add a dot
01:11:52 here and I have a look at my auto
01:11:54 completion I get no help there at all
01:11:56 but my IDE reason for dat is that all we
01:11:59 tell the IDE is that we have a value
01:12:02 here in person which is of type object
01:12:04 indeed now we actually also get an error
01:12:07 if I try to access name name exists here
01:12:11 right but what we tell typescript here
01:12:13 is that we just have an object where we
01:12:16 don't give any our information to
01:12:18 typescript
01:12:18 so actually typescript doesn't support
01:12:20 any type of property because we don't
01:12:23 tell it anything about the object so we
01:12:26 should be more specific and we are more
01:12:28 specific
01:12:29 by setting a specific object type the
01:12:31 thing which types would also inferred
01:12:33 automatically we do this by adding curly
01:12:37 braces here after the : after our Const
01:12:41 or variable name so this year does not
01:12:44 create a new JavaScript object this will
01:12:46 actually be stripped out of the compiled
01:12:48 JavaScript code instead this is just
01:12:50 type scripts notation of a specialized
01:12:54 object type so to say so all the object
01:12:56 type where we provide some information
01:12:58 about the structure of the object now by
01:13:01 assigning just an empty pair of curly
01:13:03 braces as a type we essentially do the
01:13:05 same as with object we tell typescript
01:13:07 that this is some object now we can be
01:13:11 more specific though we can add key
01:13:13 value entries here however not key value
01:13:17 but key type instead so here we could
01:13:20 say the object which should be stored in
01:13:22 person should have a name property and
01:13:25 the value of that name property should
01:13:28 be of type string so here we described a
01:13:32 type of value which will eventually be
01:13:35 stored a name now by the way you see I'm
01:13:37 getting an error here because what I'm
01:13:39 telling typescript now is that my person
01:13:41 should have an object with exactly one
01:13:44 key value pair where the key is name and
01:13:46 the value of that key is string but we
01:13:48 then assign an object with two key value
01:13:51 pairs name which holds a string that is
01:13:53 fine but age which holds a number and
01:13:56 that would not be fine so here we have
01:13:58 to adjust this by adding a semicolon and
01:14:00 then adding an average key value pair
01:14:02 here where we say age should be of type
01:14:05 number so not 30 here that actually
01:14:08 would be supported in typescript that we
01:14:10 restrict it to one specific number but
01:14:12 then we'll run into issues as soon as we
01:14:14 changed that in steps here I just want
01:14:16 to say age should be some number and now
01:14:19 we basically are explicitly assigning
01:14:21 the same typescript inferred before as
01:14:24 you learned that's not a good practice
01:14:26 but to understand object types I wanted
01:14:28 to do it here still this is something
01:14:31 you can do it's better to let typescript
01:14:35 infer this as we did before like this
01:14:40 just to show something interesting if I
01:14:42 switch back to the SAP optimal code
01:14:44 where we explicitly assign a type
01:14:46 typescript would be able to in third if
01:14:49 we compile this code
01:14:52 of course it works we can access the
01:14:55 name property but if we then have a look

01:14:57 at apps yes we see this type assignment
01:15:00 is removed here and that of course
01:15:01 should be something expected as I
01:15:03 mentioned types and type assignments are
01:15:06 not part of JavaScript they're
01:15:07 typescript only I just wanted to show
01:15:09 this again to make it really clear that
01:15:11 this syntax here is not creating some
01:15:13 JavaScript object which is somewhere in
01:15:15 our code this is just type scripts
01:15:18 representation of an object type that
01:15:21 helps typescript understand the objects
01:15:24 you're working with the batterer syntax
01:15:26 of course is this syntax as you learned
01:15:33 now besides objects we also have arrays
01:15:36 in JavaScript very important type of
01:15:39 data arrays are created like this in
01:15:41 JavaScript as you know and you can store
01:15:43 any data in there numbers strings
01:15:45 boolean's objects over arrays you can
01:15:47 have nested arrays after all and you can
01:15:50 also mix data you can have an array with
01:15:51 strings and numbers mixed and types with
01:15:55 all the supports erase any JavaScript
01:15:58 array is supported and the types often
01:16:01 array can be flexible or is strict now
01:16:03 let's have a look at that in typescript
01:16:06 for that here in apt es let's say our
01:16:09 person also has a hobbies key but of
01:16:12 course we could also have a variable or
01:16:15 a constant hobbies outside of the object
01:16:17 so using arrays is exactly the same
01:16:19 inside of objects and outside of them so
01:16:23 here we have hobbies and hobbies could
01:16:26 be sports and cooking let's say so I
01:16:30 have two elements in there and these
01:16:32 elements as you can tell our strings now
01:16:35 if we hover over hobbies typescript
01:16:37 correctly detected the disks of type
01:16:40 string and rain now that's the syntax
01:16:42 you haven't seen before but this is how
01:16:44 typescript describes an array of data
01:16:47 you have two square brackets and in
01:16:49 front of that the type of data which is
01:16:51 stored in there now this is the type
01:16:53 typescript inferred it saw that here we
01:16:56 have an array in that we only have
01:16:57 strings in there so it inferred that
01:16:59 hobbies probably should be an array of
01:17:02 strings and indeed for hobbies that
01:17:05 makes a lot of sense of course you can
01:17:08 also explicitly set the type of a
01:17:11 variable if we would add a new variable
01:17:14 favorite activities and initially that
01:17:19 should be empty then we might want to
01:17:21 explicitly set the type of data stored
01:17:23 in there and now let's say that should
01:17:25 be an array of strings well then we
01:17:27 can't just repeat what we just saw type
01:17:29 string and then square brackets
01:17:31 thereafter and this tells typescript
01:17:33 what we store in here is not just a
01:17:35 single string it's an array of strings
01:17:37 and indeed if I try to store just sports
01:17:40 in there I get an error I get an error
01:17:43 because that here is a single string and
01:17:45 not an array of strings
01:17:47 I don't get an error of course if I
01:17:49 wrapped us in two square brackets and
01:17:51 therefore effectively I create an array
01:17:53 I again do you get an error though if I
01:17:56 add a number let's say because we
01:17:58 defined this to be an array of strings
01:18:00 now here we have a mixed array it's an
01:18:03 array of strings and numbers so that
01:18:06 does not work and is not supported here
01:18:08 if we would want to support such a mixed
01:18:11 array one solution would be to use any
01:18:13 here the any type is a special type in
01:18:16 type script which we'll have a closer
01:18:18 look later which basically means do
01:18:20 whatever you want it's of course a type
01:18:23 you don't want to use too often because
01:18:25 you'll lose the benefits typescript
01:18:26 gives you your back and JavaScript world
01:18:28 where you also can use any value
01:18:30 anywhere so any is really flexible but
01:18:33 the flexibility comes at the price of
01:18:36 basically giving up all benefits types
01:18:39 with offers so here I when I go back to
01:18:41 string because I really don't want to
01:18:42 have a number in there and hence we can
01:18:44 remove the number and we're good arrays
01:18:47 also give us a great example actually
01:18:50 just like objects and their properties
01:18:52 how dynamic type scripts type inference
01:18:56 is if we add a for loop here at the
01:18:59 bottom and we want to go through all the
01:19:01 hobbies of person we can of course use a
01:19:03 traditional for loop with for Const

01:19:06 hobby of person dot hobbies so accessing
01:19:11 the hobbies property and going through
01:19:12 all the hobbies they're storing each
01:19:15 hobby for each iteration in this
01:19:17 constant and then we can console.log
01:19:20 hobby here now that's not too fancy
01:19:22 that's something we know from JavaScript
01:19:24 right if I now compile this app TS file
01:19:28 down there we get the name from this
01:19:32 line and they're after the two hobbies
01:19:34 being printed but what's actually
01:19:36 interesting here is that on hobby we can
01:19:39 access anything we can access on any
01:19:42 string for example to uppercase I get
01:19:44 this Auto completion and typescript does
01:19:46 not complain why does it not complain
01:19:49 because it knows that hobbies is of type
01:19:52 string array so when I access person
01:19:55 that hobbies typescripts inference
01:19:57 detects that hobbies will be an array of
01:20:00 strings
01:20:00 so hobby on the other hand is correctly
01:20:04 identified as being a string because
01:20:06 since we go through an array of strings
01:20:08 well the individual values have to be
01:20:10 just strings and therefore types would
01:20:13 offers us great support down there and
01:20:15 allows us to do anything with hobby that
01:20:17 can be done with a string because it
01:20:19 knows with certainty that hobby will be
01:20:22 a string because of the types we setup
01:20:24 up there and that's really flexible and
01:20:27 of course a great feature which makes
01:20:29 writing code a lot easier and way more
01:20:31 flexible and secure for example we would
01:20:34 get an error here if it would try to
01:20:36 access hobby dot map if I thought this
01:20:39 would be an array the map method is
01:20:41 available on a race but not on strings
01:20:43 and here correctly I get an error that
01:20:45 map does not exist on type string
01:20:47 because it doesn't so here we get an
01:20:50 error and that's good that we get it
01:20:52 because this would be wrong and here we
01:20:55 see type scripts and Ferns really really
01:20:58 shine
01:21:03 so arrays are supported and with numbers
01:21:06 strings boolean objects and arrays we
01:21:09 got the core values or value types
01:21:12 javascript knows supported in typescript
01:21:16 as you will learn at the example of
01:21:18 objects and arrays typescript even
01:21:20 offers way more functional he's there
01:21:22 that's a bit more advanced which is why
01:21:24 we'll have a look at that later but even
01:21:26 these core types with what you learned
01:21:28 in the previous lectures are supported
01:21:31 now types could also add a couple of new
01:21:34 concepts new types which we don't know
01:21:37 from vanilla JavaScript for example the
01:21:40 tuple type now you might know to 'pls
01:21:43 from other programming languages
01:21:45 javascript does not have them this is a
01:21:48 tuple for example and you would say well
01:21:51 this is an array it is an array but it's
01:21:54 a fixed length array and actually not
01:21:56 just fixed length but also fixed type
01:21:59 and where could this be handy let's say
01:22:02 here on our person we actually have
01:22:05 another property role which is an array
01:22:10 with exactly two elements where the
01:22:12 first one is let's say a numeric
01:22:14 identifier like 2 and the second one is
01:22:18 a string identifier and a human readable
01:22:21 description like author now this should
01:22:25 always have exactly two elements because
01:22:28 a user or a person in this application
01:22:31 which we're writing let's say can only
01:22:33 have one role and a role is only made up
01:22:35 of two elements of course we could have
01:22:37 used an object here but for some reason
01:22:39 we want to have an array with exactly
01:22:41 two elements where the first element
01:22:43 always is the numeric identifier and the
01:22:45 second element always is the string
01:22:48 identifier or description or however you
01:22:50 want to call it now if we hover over
01:22:52 this typescript actually infers this
01:22:55 strange type which we haven't seen
01:22:56 before in fact of it this means
01:22:58 typescript understands that we have an
01:23:00 array which might hold eber strings or
01:23:02 numbers this is a union type and we'll
01:23:05 dive into those later
01:23:06 the key takeaway is the typescript
01:23:08 understands that this should be an array
01:23:11 with these types of values the downside
01:23:14 is that we could run this code though
01:23:16 purse
01:23:17 roll push admin now for our application

01:23:21 this might not make sense because we
01:23:23 know we only need two elements still
01:23:25 typescript doesn't know that we only
01:23:27 want two elements we would also be able
01:23:30 to switch person role the second element
01:23:33 with index one to be a number as well
01:23:36 this would work because typescript only
01:23:39 knows that role should be of type string
01:23:41 or number array and they are for
01:23:44 assigning a number here to the second
01:23:46 element and therefore replacing it with
01:23:48 a number would be allowed because we're
01:23:50 just saying something about the types we
01:23:52 generally can use in there we know we
01:23:54 want to have exactly that structure two
01:23:56 elements first element number second
01:23:59 element string but typescript doesn't
01:24:01 know that well for such a scenario a
01:24:03 tuple would be perfect we can tell
01:24:06 typescript what role should be by
01:24:09 explicitly setting the type of role so
01:24:12 here we also have an example where
01:24:14 typescript does infer a type but we
01:24:17 explicitly want to override it now here
01:24:20 we can therefore add an explicit object
01:24:22 type by adding a colon after person then
01:24:25 the curly braces and then name should be
01:24:28 a string age should be a number and
01:24:30 hobbies should be a string array so all
01:24:33 as inferred by typescript so for Dada we
01:24:36 wouldn't have required this explicit
01:24:37 assignment and as you learned it would
01:24:39 have been bad but now we have a scenario
01:24:42 where the inference does not work in the
01:24:43 way we want and we want to set role to
01:24:47 be a tuple now instead of setting a two
01:24:50 string array or a number array we're
01:24:52 using the same type that was inferred
01:24:53 here earlier we can now use a special
01:24:56 type we use square brackets again but
01:24:58 now inside of the square brackets we add
01:25:02 number and then a comma and then string
01:25:04 now this marks a tuple type here a tuple
01:25:09 is a special construct types could
01:25:11 understand in JavaScript it will be a
01:25:14 normal array but during development with
01:25:16 typescript we'll get errors with code
01:25:18 like this year and what do tuples do
01:25:22 this year tells typescript I want to
01:25:26 have a special array with exactly two
01:25:28 elements because I have exactly two
01:25:30 types in there and the first element
01:25:32 should be a number the second element
01:25:34 should be a string hence if we compile
01:25:39 this code here I get an error regarding
01:25:43 10 not being assignable as a type here
01:25:47 because we want to have a string as a
01:25:50 second value and if I then assign 10 as
01:25:52 a second value here then I obviously
01:25:55 don't follow this rule now if we comment
01:25:59 this out and we compile this works
01:26:03 that's a bit strange because why does
01:26:05 pushing Weirich here because we're also
01:26:08 saying that roll should have exactly two
01:26:11 elements so why can we push admin onto
01:26:13 the role array here Porsche actually is
01:26:17 an exception which is allowed on Hugh
01:26:20 bolts so unfortunately typescript can't
01:26:22 catch this error but at least it ensures
01:26:25 that we're not assigning a wrong value
01:26:27 here and outside of push we also get
01:26:30 some support regarding the length if we
01:26:33 set person to roll to a new value for
01:26:35 example an empty array is not allowed
01:26:37 one with exactly the structure we
01:26:40 defined up there is allowed if I added
01:26:43 an extra element here then we would
01:26:45 again get an error so the length is
01:26:48 enforced if we assign it like this but
01:26:51 not for a pushing and so on this is
01:26:52 something you have to be aware of but
01:26:54 still getting this support and this
01:26:56 support is pretty nice and if you have a
01:26:58 scenario where you need exactly X amount
01:27:02 of values in an array and you know the
01:27:04 type of each value in advance then you
01:27:07 might want to consider a tuple instead
01:27:09 of an array to get even more strictness
01:27:12 into your app to be even clearer about
01:27:14 the type of data you're working with the
01:27:17 type of data you're expecting
01:27:23 loosely related to the idea of a tuple
01:27:26 is the idea of having a couple of
01:27:28 specific identifiers global constants
01:27:32 you might be working with in your app
01:27:33 which you want to represent as numbers
01:27:36 but to which you want to assign a
01:27:37 human-readable label and for that you
01:27:40 have to enum type again that does exist
01:27:43 in some other programming languages

01:27:44 javascript doesn't know it though it
01:27:47 looks like this this is how you create
01:27:48 an enum you use the enum keyword which
01:27:51 only exists in typescript world not in
01:27:53 JavaScript then after you have curly
01:27:55 braces and then your identifier and this
01:27:58 type which is added by typescript gives
01:28:01 you an enumerated list so these labels
01:28:04 are in the end just translated to
01:28:05 numbers starting at 0 where you have
01:28:08 human readable labels you can work
01:28:10 within your code to show you an example
01:28:13 let's go back here to our person with
01:28:15 its role I'll copy that code and then
01:28:18 comment it out because I'm going to
01:28:19 change it a bit and then here I'll get
01:28:22 rid of that explicit type assignment and
01:28:24 instead go back to inference because
01:28:26 I'll now change role and now let's say
01:28:29 we want to have an admin and author and
01:28:31 maybe a read-only user the admin should
01:28:34 have an idea of SERO read-only user has
01:28:37 one author has two now of course we can
01:28:40 store that exactly like this with these
01:28:42 numbers one downside is that we can also
01:28:45 add a number for which we might not have
01:28:47 a role and if we then later in our code
01:28:49 try to extract a role and use an if
01:28:52 check this might lead to errors and in
01:28:55 addition we as a developer have a hard
01:28:57 time to understand which role this user
01:29:00 has was to the author or was addy read
01:29:03 on the user you might forget this
01:29:05 after making longer pauses when working
01:29:07 in bigger teams and so on so as a
01:29:10 developer you might want human readable
01:29:12 identifier something like admin and
01:29:16 read-only user something like that now
01:29:20 of course we could use that we could
01:29:21 work with such string values the problem
01:29:24 is if we then later needed an AF check
01:29:26 we check if person dot roll is equal to
01:29:30 was it read-only user or was it one word
01:29:34 was it with others
01:29:35 scores you see then we have to remember
01:29:38 how we wrote these strings which exact
01:29:40 text we have in there because this
01:29:43 string with the dashes between the words
01:29:45 is of course not the same as this string
01:29:48 so here we would never make it in there
01:29:50 is read only if we try to compile and
01:29:55 print that because well the check simply
01:29:59 doesn't yield true we don't have that as
01:30:01 a roll on person hence we don't get the
01:30:03 output here in a console so string
01:30:05 identifier is all to have downsides now
01:30:08 for such scenarios it's quite common in
01:30:10 JavaScript to define global constants
01:30:13 for example admin which can hold certain
01:30:15 values like numbers or strings both as
01:30:20 possible numbers of course can save us
01:30:22 some extra code and bits in memory and
01:30:24 there we might have admin read-only an
01:30:29 author like this and down there we then
01:30:32 just have to use that role now the
01:30:35 advantage of that is that we can use
01:30:36 this everywhere in our code and
01:30:39 therefore here for example if I run this
01:30:43 code if I compile it and then we let
01:30:47 this reload we see as admin here so this
01:30:50 works and this is a common pattern in
01:30:51 JavaScript downside is that now again
01:30:54 role is inferred to be just a number so
01:30:56 we could store any number in there even
01:30:58 a number which we don't support and in
01:31:01 addition we have to define all these
01:31:02 constants we have to manage them this is
01:31:05 where enum can save us work this is
01:31:07 totally fine but an enum makes it easier
01:31:09 we create an enum with the enum keyword
01:31:11 we can name it role convention is to
01:31:14 start with the uppercase character
01:31:16 because enum also is a custom type it's
01:31:20 your first custom type you're going to
01:31:22 write many more in this course this is
01:31:24 the first one and then after the name of
01:31:26 the type you want to assign to this enum
01:31:28 you add curly braces just like that no :
01:31:31 no equal sign just curly braces after
01:31:34 the name then a semicolon and now in
01:31:37 here you can assign your values like
01:31:39 admin read-only and author and
01:31:45 behind-the-scenes this year receives the
01:31:48 number 0
01:31:49 this year number one this year number
01:31:52 two and then here you can access role
01:31:54 dot admin like on an object you access
01:31:57 your identifier and you can use that
01:31:59 anywhere else in your code as well here
01:32:01 we can check if the role is author and

01:32:04 then print author and of course we
01:32:07 shouldn't see that if I run that now
01:32:08 because we assigned a role of admin here
01:32:11 but key takeaway is that we did all of
01:32:14 that with the help of the enum which
01:32:16 assigns labels to numbers if we have a
01:32:19 look at that in JavaScript so in the
01:32:20 compiled code we see this is how its
01:32:23 rebuilt in the end it's rebuilt with if
01:32:25 a year so a function which executes
01:32:27 itself and role here simply is managed
01:32:31 as an object in the end which has an
01:32:33 admin property a read-only property an
01:32:35 author property where we then store our
01:32:38 number values here you could say so it's
01:32:41 a bit more complex than that but that's
01:32:43 what typescript in the end does here to
01:32:44 replicate this enum construct in
01:32:46 JavaScript code when it compiles the
01:32:48 code here as a developer we simply have
01:32:51 these conveniently created numbers if
01:32:54 you hover over them you see the number
01:32:55 which was stored in there and you can
01:32:57 use these numbers here in a human
01:33:00 readable way now for enums you're also
01:33:03 not restricted to the default behavior
01:33:05 let's say for some reason you don't want
01:33:07 to start with zero as a starting number
01:33:09 then you can add an equal sign here
01:33:11 after your identifier and enter any
01:33:14 other number and now admin is assigned
01:33:16 to the number 5 and the other
01:33:18 identifiers after the identifier where
01:33:21 you assign a value pick up on that and
01:33:23 simply increment this starting value so
01:33:26 now we have 5 6 7 instead of 0 1 2 you
01:33:29 of course also can assign your own
01:33:31 values to all these identifiers so if
01:33:34 you need your own numbers
01:33:35 you're also not restricted to numbers
01:33:37 you can also go with text here or even
01:33:40 mix it like I'm doing it here anything
01:33:42 goes there but often the default of
01:33:44 incrementing numbers that start at 0 is
01:33:47 what you want but if you need a
01:33:49 different behavior if you wanna use a
01:33:52 string in here and then a number here
01:33:53 and you hear a number as well or maybe
01:33:56 another string then you can absolutely
01:33:59 do that the advantage is you define it
01:34:01 up there and then thereafter
01:34:03 you always just refer to your role type
01:34:05 to this custom type you create it to
01:34:07 discuss Tim enum you create it and you
01:34:10 use that and your F checks and your type
01:34:12 assignments and you're good that's the
01:34:14 power of the enum and it's a great
01:34:16 construct whenever you need identifiers
01:34:19 that are human readable and have some
01:34:21 mapped value behind the scenes
01:34:28 with that we're almost done with the
01:34:30 core types there is one more type which
01:34:33 we already saw and that's the any type
01:34:35 the any type is the most flexible type
01:34:37 you can assign in typescript this type
01:34:40 doesn't tell typescript anything
01:34:43 it basically means you can store any
01:34:45 kind of value in there
01:34:46 we got no specific type assignment
01:34:48 typescript will basically never yell at
01:34:51 you when you use any back in our code
01:34:54 here if I would set the type of favorite
01:34:56 activities to any would not get an error
01:34:58 if I sell it to any array I at least
01:35:01 tell typescript that favorite activities
01:35:04 is an array of something so if it would
01:35:06 store just a single value in there I
01:35:08 would get an error but as long as it is
01:35:10 an array I can store whatever I want in
01:35:12 there so any is really flexible and this
01:35:17 can sound great at first but actually
01:35:19 it's a big disadvantage and you
01:35:20 absolutely want to avoid any whenever
01:35:23 possible because any takes away
01:35:26 basically all advantages typescript
01:35:28 gives you it gives you the same
01:35:30 experience you have with vanilla
01:35:31 JavaScript where you also have the any
01:35:34 type on everything so to say any
01:35:36 basically make sure that the typescript
01:35:39 compiler can't check anything because if
01:35:43 any property or any variable can store
01:35:46 any value well then there is not much to
01:35:49 check right so you can use any as a
01:35:52 fallback if you have some value some
01:35:56 kind of data where you really can't know
01:35:58 which kind of data will be stored in
01:35:59 there and where you then maybe are using
01:36:02 some runtime checks like we did here at
01:36:04 runtime to narrow down what you want to

01:36:07 do for certain values then you could go
01:36:10 with any but in other cases you really
01:36:13 want to avoid any if you have a chance
01:36:15 of knowing which kind of data you're
01:36:17 working with be explicit about it let's
01:36:20 type scripts inference to its job or
01:36:23 explicitly set your own types don't fall
01:36:26 back to any if you don't need to
01:36:32 so we covered a couple two core types
01:36:34 type scoop nose now let's move on for
01:36:37 that I'll rename apt es here to object
01:36:40 arrays enums or whatever you want to
01:36:43 name it basically so that we still have
01:36:44 that file but I'll create a brand new
01:36:46 app T as file so that we have an empty
01:36:48 file again in which we can work now in
01:36:51 this file I want to dive into now very
01:36:53 interesting type which you find in
01:36:55 typescript and that's the Union type now
01:36:59 what's that let's come back to our add
01:37:02 function which we wrote earlier I'll
01:37:05 copy that and move that into apt es get
01:37:08 rid of that comment here and here on add
01:37:11 let's close basics yes so that we get
01:37:14 rid of that error here in add I now want
01:37:17 to be more flexible regarding what we
01:37:19 accept here I will also get rid of show
01:37:21 result and phrase it don't need that and
01:37:24 the only thing I want to do is I want to
01:37:27 calculate a result and return it but I
01:37:29 want to be more flexible regarding the
01:37:31 inputs previously we made sure that we
01:37:34 only work with numbers now let's say we
01:37:38 actually name this combined and it
01:37:40 should work with both numbers and
01:37:42 strings because it turns out we can
01:37:45 combine both numbers and strings with
01:37:47 this plus operator the only difference
01:37:50 is that in one scenario we get back a
01:37:53 number as a result in the other scenario
01:37:55 we get a concatenated string as we
01:37:58 actually already saw earlier in this
01:38:00 module but now I want to allow this
01:38:02 behavior because you could have an
01:38:03 application where you want to have a
01:38:05 flexible combination function that does
01:38:07 work with numbers and strings therefore
01:38:10 I will all this input one year and this
01:38:13 input two and combine these two now but
01:38:18 we will have one problem of course right
01:38:20 now we set both parameters to be numbers
01:38:23 this means that we can call this
01:38:26 function as long as we do want to work
01:38:28 with numbers let's say down there we're
01:38:30 creating a new constant combined ages
01:38:33 and there I call combine and pass in 30
01:38:36 and 26 here as ages in whatever
01:38:41 application we're building and
01:38:42 thereafter console.log combined ages
01:38:46 well it shouldn't be too surprising that
01:38:48 if we now compile this file here and we
01:38:50 then reload this page we get 56 so this
01:38:53 works we get this number
01:38:54 but of course we have a problem if we
01:38:57 try to create a string here combined
01:39:00 names for example if I try to combine
01:39:03 Max and Ana here then while we
01:39:09 immediately get an error here that max
01:39:10 is not assignable to type number because
01:39:13 this of course is a string now of course
01:39:15 we could change this to accept strings
01:39:17 instead of numbers but now the first
01:39:19 function call would fail and that is
01:39:21 where Union types can help us if we have
01:39:24 some place in our application B that a
01:39:27 parameter of a function or a constant or
01:39:30 a variable we're using somewhere where
01:39:32 we accept two different kinds of values
01:39:35 well then a union type can help us q
01:39:38 tell typescript that we are fine with
01:39:40 either a number or a string we use
01:39:43 number and then the pipe symbol here and
01:39:48 then the other type we all accept and
01:39:51 you can have more than two types you can
01:39:53 accept as many types here as you need so
01:39:56 here I only need two though and that's
01:39:58 there for the type assignment I'll go
01:39:59 with number or string now I get an error
01:40:04 here that the plus operator cannot be
01:40:06 applied to type string or number and
01:40:08 string or number that's actually not
01:40:10 entirely correct
01:40:11 this should work because we can use the
01:40:14 plus operator with both numbers and with
01:40:16 strings but typescript only sees that we
01:40:18 have a union type here and it doesn't
01:40:20 analyze what's in the Union type it just
01:40:23 sees okay you're expecting multiple
01:40:26 types maybe that includes types where I
01:40:28 can't use the plus operator

01:40:29 hence I will complain here now
01:40:32 thankfully we can work around that issue
01:40:34 though we can add our runtime type check
01:40:38 here and see if input one if the type of
01:40:41 that is equal to number and if the type
01:40:48 of input two is equal to number
01:40:54 and then move this calculation in there
01:40:56 now just one improvement let's create
01:40:59 result as a variable outside of that if
01:41:02 check because of block scoping so that
01:41:05 this is a variable available in the
01:41:07 entire function and then just assign a
01:41:10 new value in there so now here we check
01:41:11 if we do have two numbers and they offer
01:41:15 typescript now listed in here input one
01:41:17 and input 2 both will be numbers now
01:41:20 let's add a else check here and there we
01:41:25 can set result equal to input 1 dot
01:41:28 choose string explicitly converting this
01:41:30 to a string and input 2 to string and
01:41:33 this will then also be fine for
01:41:35 typescript and JavaScript because we
01:41:36 can't concatenate two strings so now we
01:41:39 have almost the same calculation but we
01:41:41 make clear that here will always work
01:41:43 with numbers here will always work with
01:41:45 strings and then we return the result
01:41:47 and now with that if we console locked
01:41:51 combined names down there and we compile
01:41:56 this file we'll see that once we revisit
01:41:59 our page we got the combined numbers
01:42:01 there which were simply added together
01:42:03 and hence we get a number as a result
01:42:05 and two combined names here so this is
01:42:07 how we can use Union types to be more
01:42:10 flexible regarding what we do in a
01:42:13 function for example or anywhere else in
01:42:15 our code this extra runtime type check
01:42:18 will not always be required when you
01:42:20 work with Union types but often will be
01:42:23 because with Union types you can be more
01:42:25 flexible in for example two parameters
01:42:27 you accept but then you might have
01:42:29 different logic in your function based
01:42:31 on which exact type you are getting so
01:42:34 that your function is able to work with
01:42:36 multiple types of values but that it
01:42:39 then does slightly different things
01:42:40 depending on the type you're getting so
01:42:43 off you might need such a runtime check
01:42:45 when working with Union types but you'll
01:42:47 not always need it you will certainly
01:42:49 also encounter situations in types could
01:42:52 programs where you can use a union type
01:42:54 without a runtime type check it really
01:42:57 depends on the logic you're writing
01:43:03 so now we got union types here let's
01:43:06 build up on that idea of union types and
01:43:09 all the introduced literal types literal
01:43:12 types are types where you don't just say
01:43:15 that a certain variable where a
01:43:17 parameter should hold that say a number
01:43:19 or a string but where you are very clear
01:43:22 about the exact value it should hold we
01:43:25 saw that early already here in basics
01:43:28 constitu for example there if I hover
01:43:31 over that you see the type which was
01:43:33 inferred is not number its 2.8 and
01:43:36 typescript did infer this concrete
01:43:39 number as a type here because it's a
01:43:41 constant it will never change in the
01:43:43 effort high scope knows the value I
01:43:45 assign here is the exact type I have so
01:43:49 of course this is a number you could say
01:43:51 2.8 is derived from the number type but
01:43:55 it's a specific number and this does not
01:43:58 just exist for numbers but also for
01:44:00 strings and so on and especially for
01:44:02 Strings it can be very useful let's say
01:44:05 here in our combined function we expect
01:44:08 numbers or strings and we combine them
01:44:10 differently based on what we get but we
01:44:12 also want to allow the caller of the
01:44:15 function to define how the result should
01:44:18 be returned so that we can basically
01:44:20 force a conversion from number to string
01:44:23 or the other way around we could do this
01:44:26 with a third parameter and we could name
01:44:28 that let's say result type or a result
01:44:31 conversion or however you want to name
01:44:33 it and I want to describe this with a
01:44:37 strings all set is to type string now my
01:44:40 idea is that I can call combined here
01:44:42 with two numbers and for example pass in
01:44:46 a string of as number and it's totally
01:44:51 up to you which identifier you use here
01:44:53 down there we might have as text but
01:44:57 then we might have another combination
01:45:00 here
01:45:04 bind string ages where a pass in two

01:45:07 strings but I still want to output this
01:45:10 as number and this would be a case where
01:45:12 the third parameter can be helpful to
01:45:15 force a conversion because if I pass in
01:45:17 two strings here normally we would make
01:45:19 it into this else branch and concatenate
01:45:22 it and I might want to return this as a
01:45:25 number instead so that I can also
01:45:28 console.log combined string ages here so
01:45:33 now we just have to take these
01:45:34 identifiers into account in our function
01:45:36 by including a result conversion in our
01:45:39 if checks now the question is what
01:45:42 exactly do we want to do do we want to
01:45:44 make sure that we can force these two
01:45:47 strings to be added as numbers or do we
01:45:50 want to force the result no matter if it
01:45:54 was a mathematical calculation or a
01:45:57 string concatenation to be converted to
01:45:59 a text or a number if we want to force a
01:46:04 conversion we could add the if check
01:46:05 here and check if result conversion is
01:46:08 equal to as number and if that's the
01:46:11 case I want to return result with a plus
01:46:15 in front of it which converts it to a
01:46:18 number the alternative would be parse
01:46:20 float for example but here I'll just go
01:46:25 for the plus since this is a bit shorter
01:46:27 and else I want to return result to
01:46:31 string to force an output as a string so
01:46:36 now we do the calculation based on the
01:46:39 real type we get but then we convert the
01:46:41 result that's one way of doing that and
01:46:43 if we save that and we then compile this
01:46:46 file we see this is the result I get and
01:46:50 we get dead output for example for our
01:46:52 string combination here because as I
01:46:56 said the combination itself the
01:46:58 calculation so to say is performed based
01:47:00 on the type we feed in which here is a
01:47:03 string so we concatenate it and then we
01:47:05 just convert to result the alternative
01:47:08 logic would be to check the type here
01:47:11 and do a different operation based on
01:47:14 the return type we're specifying here so
01:47:17 we could come
01:47:18 this out and instead here say if the
01:47:22 type of input one is number and the type
01:47:24 of input two is number or if result
01:47:30 conversion is equal to as number then I
01:47:35 want to combine values like this and now
01:47:37 to avoid this error here I've forced the
01:47:40 conversion Q numbers by adding a plus in
01:47:43 front of each input so that each input
01:47:45 is converted to a number and it's
01:47:46 guaranteed to be a number before I
01:47:48 combine them side note if you would pass
01:47:51 in strings that can't be converted to a
01:47:53 number so something like max for example
01:47:55 then you'll get na n not a number as a
01:47:58 result well in in the elds case so that
01:48:02 we don't have as number or that we
01:48:04 simply don't have number inputs then we
01:48:08 make it into this block here and now
01:48:11 with data fire return result again here
01:48:14 and we didn't save this and recompile
01:48:16 we'll see a different output on our page
01:48:19 now we get 56 in these two lines here
01:48:22 because now we're not converting the
01:48:24 result so we're not converting they're
01:48:26 concatenated string for this line but
01:48:28 instead we're doing the conversion
01:48:30 before we combine the two values so
01:48:32 that's up to you which logic you want to
01:48:34 implement I actually want to have a
01:48:36 closer look at the literal types concept
01:48:38 which I described at the beginning of
01:48:40 this lecture I'm passing in as number
01:48:42 and as text and the downside of this is
01:48:44 that right now we as a developer have to
01:48:47 memorize these values we have to make
01:48:49 sure that we don't miss type here now we
01:48:52 could use a enum to improve that but if
01:48:55 we only have Q values here as text or as
01:48:58 number then maybe also such a literal
01:49:00 type could be an option we could say
01:49:02 this shouldn't be any string it should
01:49:05 be as number or as text so we use a
01:49:11 union type combined with literal types
01:49:14 literal types are the types which are
01:49:17 based on your core types string number
01:49:19 and so on but you then have a specific
01:49:21 version of that type so here we allow
01:49:24 specifically these two strings not any
01:49:27 string just these two strings so we want
01:49:30 a string for result conversion
01:49:32 but it has to be one of these two values
01:49:34 any other string value will not be
01:49:36 allowed so that's the idea behind a
01:49:38 literal type and often you will use this

01:49:41 in the context of a union type because
01:49:43 you don't just want to allow one exact
01:49:44 value you could hard-coded into your
01:49:47 code if that would be the case but you
01:49:48 want to have two or more possible values
01:49:51 in this case we got two possible values
01:49:53 so now we are guaranteed to get result
01:49:56 conversion which is either as number or
01:49:58 as text and for example here if I now
01:50:02 try to compare this to as number because
01:50:04 I have a typo here typescript is able to
01:50:07 tell me here in the IDE and of course
01:50:09 also if we save it and compile it here
01:50:12 in the terminal because it knows that as
01:50:15 number without a are at the end will
01:50:18 never be a valid value for a result
01:50:20 conversion because I set this Union type
01:50:23 with these literal types so now we again
01:50:28 gain some extra type safety and ensure
01:50:30 that we can't use this incorrectly the
01:50:33 same of course for passing in a value if
01:50:35 we have a type here we get an error only
01:50:38 if we use either as number or as text
01:50:40 we're allowed to compile this as you see
01:50:43 if I now compile this this works and we
01:50:46 get the same output as before here so
01:50:48 these are literal types especially
01:50:50 useful when used in conjunction with
01:50:52 Union types
01:50:57 now when working with union types like
01:51:01 this and this it can be cumbersome to
01:51:04 always repeat the Union type you might
01:51:07 want to create a new type which en
01:51:09 stores this Union type and you can do
01:51:11 that with an average good feature the
01:51:14 feature of type aliases you create such
01:51:18 a alias typically before you use it so
01:51:21 here at the top of the file in this case
01:51:24 here with the type keyword now the type
01:51:27 keyword is not built into JavaScript
01:51:29 it's supported in typescript though and
01:51:31 after type you add the name of your
01:51:35 custom type or of your type alias I
01:51:37 should say for example combined able but
01:51:41 the name is really up to you you can
01:51:42 invent any name here which is not built
01:51:45 into JavaScript or typescript as a key
01:51:47 name so something like date would not be
01:51:49 allowed because that's built into
01:51:51 JavaScript but combined able is not
01:51:53 built into JavaScript not built into
01:51:55 typescript so we can use it and now with
01:51:57 an equal sign you assign the type you
01:52:01 want to encode in your alia so to say so
01:52:04 we could store a number here and now
01:52:06 whenever we want to make sure that
01:52:08 something should be a number we could
01:52:10 use combined able instead now that
01:52:13 doesn't make too much sense it arguably
01:52:15 would even make our code harder to read
01:52:17 if I use combine able down there for
01:52:20 example this would work technically but
01:52:23 if we just glanced over our code it's
01:52:25 not obvious that here we want a number
01:52:27 or a string well typically therefore you
01:52:30 use that in conjunction with Union types
01:52:32 so we can store a union type in our
01:52:35 custom type so to say in our type alias
01:52:37 and now just refer to combine able down
01:52:40 there instead of our Union type so we
01:52:44 have exactly the same setup as before we
01:52:47 just have our reusable type alias here
01:52:49 which we can use instead and that allows
01:52:52 us to save some extra code and make sure
01:52:54 we always refer to the same types or the
01:52:56 same type setup when we use combine able
01:52:59 and of course we cannot just use that
01:53:01 for number and string we can use that
01:53:03 for any type setup we might want to
01:53:05 store it in an alias including these two
01:53:08 literal types for example so
01:53:11 for these two types here for this Union
01:53:13 type we could also create a type alias
01:53:16 conversion descriptor or however you
01:53:18 want to name it and store exactly this
01:53:22 type in this type Elias and now we can
01:53:25 use this type alias down there
01:53:27 so type aliases are really really useful
01:53:30 you can encode more complex type
01:53:32 definitions into your own types into
01:53:34 your own type names so to say and reuse
01:53:37 that everywhere in your code where you
01:53:39 need exactly this type set up so that
01:53:42 you avoid typos down there and you can
01:53:44 simply save code write code quicker and
01:53:46 always be clearer about your intentions
01:53:49 for example by choosing descriptive type
01:53:52 alias names up there
01:53:57 time for an hour new file I'll rename
01:54:00 apt yes here to Union aliases TS and add

01:54:07 a new app ts file where we can start
01:54:09 from scratch again close the other file
01:54:11 and now in here I want to dive a bit
01:54:14 deeper into functions now of course we
01:54:17 already worked with functions for
01:54:18 example here in the Union aliases file
01:54:20 with the combined function and for
01:54:22 example you saw that for functions you
01:54:25 can't assign types to the parameters of
01:54:27 functions well turns out there is a bit
01:54:29 more you can do with functions and types
01:54:32 for that I'll recreate my add function
01:54:35 which simply accepts numbers not strings
01:54:39 which does one simple thing it returns
01:54:41 n1 + + 2 so not too tricky now as I
01:54:47 mentioned we can assign types to
01:54:48 parameters that's not new the function
01:54:51 overall however has one important other
01:54:53 type it has a return type and here the
01:54:57 return type is inferred by typescript we
01:54:59 can see it if we hover over add here at
01:55:02 the end the : after the parameter list
01:55:05 this year describes the return type of
01:55:08 the function so the type of the returned
01:55:11 value here I returned the addition of n1
01:55:14 and n2 and since both these inputs are
01:55:17 numbers typescript is able to infer that
01:55:20 the result of this will be a number and
01:55:22 since we return it that the return type
01:55:24 of this function therefore will be a
01:55:25 number if we would concatenate them as
01:55:28 strings here with two string for example
01:55:31 then typescript would correctly infer
01:55:34 that we return a string here now of
01:55:37 course we can also explicitly assign a
01:55:40 return type here by adding a colon after
01:55:42 the parameter list and then the type you
01:55:45 want to return like number this would be
01:55:49 the same type as inferred if a for
01:55:50 example set is 2 string I would get an
01:55:53 error here because obviously my
01:55:54 calculation here does not match my
01:55:57 described return type now just as with
01:56:00 variables it's a good idea to let
01:56:02 typescript do its job regarding type
01:56:04 inference and if you have no specific
01:56:07 reason for explicitly setting the type
01:56:10 you should therefore not set the type
01:56:12 and instead let typescript infer the
01:56:15 type regarding the return types though
01:56:18 there is one interesting type which we
01:56:20 haven't seen before and which might be
01:56:22 brand new to you if you have no
01:56:24 experience with other programming
01:56:25 languages because it is a type that
01:56:27 doesn't really exist in JavaScript it's
01:56:29 the wide type let's say we have the
01:56:32 print result method there we get a
01:56:34 number argument which should be a number
01:56:38 and in there i want to console.log num
01:56:42 and i want to console.log it as part of
01:56:44 a string where i say a result + num so
01:56:48 now this will be concatenated to one
01:56:49 long string and will be output and now i
01:56:52 can call print result and for example
01:56:54 pass to that the result of my add
01:56:57 function call with 5 plus let's say 12
01:57:00 so i am executing ad here with two
01:57:02 numbers and the result of that so what
01:57:05 ad returns is then passed as an argument
01:57:07 into print result and that should print
01:57:09 it to the console if we now compile this
01:57:13 and then have a look at that in our page
01:57:15 or on our page here we see result 17
01:57:18 which makes sense now the interesting
01:57:20 thing here is the return type of print
01:57:22 result what would you guess is the
01:57:25 return type here so maybe you think it's
01:57:28 string because I'm creating a string in
01:57:30 here but keep in mind we're not
01:57:31 returning this we're not returning
01:57:33 anything here and therefore this print
01:57:36 result function here has a special
01:57:38 return type void now you might know this
01:57:41 void return type from other programming
01:57:44 languages there you have something like
01:57:47 this javascript doesn't really know that
01:57:49 or doesn't really have a name for this
01:57:51 situation
01:57:52 typescript however does so indeed this
01:57:55 function here has a return type of white
01:57:57 and of course you don't need to specify
01:57:58 your typescript inference did its job
01:58:01 but
01:58:02 I want to make it really clear that this
01:58:03 has the wide return type which is why I
01:58:05 am adding it here for demo purposes now
01:58:09 why it really just means this function
01:58:12 doesn't have a return statement it
01:58:14 doesn't return anything it successfully

01:58:18 completes its that it does its job it
01:58:20 executes its code it does not yield an
01:58:23 error or anything like that but it then
01:58:26 does not return anything that's the wide
01:58:29 return type now technically in
01:58:31 JavaScript of course if we would console
01:58:34 lock the result of print result here and
01:58:37 I now compile this and we see what gets
01:58:40 output here on the page we see that
01:58:42 undefined is returned by that so
01:58:45 technically and that's reinter esting in
01:58:47 JavaScript if we use the return value of
01:58:51 a function that doesn't return anything
01:58:53 we get undefined as a value and as you
01:58:57 probably know undefined and JavaScript
01:58:59 is actually a real value a value you for
01:59:02 example also get if you try to access a
01:59:04 property on an object which doesn't
01:59:06 exist so here we get white even though
01:59:09 technically this returns undefined and
01:59:12 now to make it even more confusing
01:59:14 undefined actually is a type in
01:59:18 typescript you can have undefined as a
01:59:20 type and for example a brand new
01:59:23 variable some value can receive
01:59:27 undefined as a type and you'll not get
01:59:29 an error this variable will now just be
01:59:31 forever undefined how are useful that
01:59:34 might be is a different question but and
01:59:36 the find is a valid type and typescript
01:59:38 nonetheless here you see we're getting
01:59:41 an error and we're getting an error
01:59:43 because a function is not allowed to
01:59:45 return undefined technically it of
01:59:48 course does but typescript thinks about
01:59:50 functions a bit differently you should
01:59:53 use void here if a function returns
01:59:55 nothing and not undefined because with
01:59:58 wide you make clear that this function
02:00:01 deliberately does not have a return
02:00:02 statement if you would say undefined
02:00:05 here then typescript would expect that
02:00:08 you have a return statement where you
02:00:10 just don't return a value that's the
02:00:13 technical difference now you see I'm not
02:00:15 getting an error
02:00:16 from a javascript perspective this is
02:00:19 basically the same as this but
02:00:22 typescript makes a differentiation here
02:00:24 and therefore why does the type you want
02:00:26 to use if you don't have a return
02:00:28 statement undefined which you will
02:00:31 rarely need to be honest can be used if
02:00:33 you return without returning an actual
02:00:36 value but again this is a rare use case
02:00:39 and you could use white with a return
02:00:42 statement like this as well you would
02:00:43 not get an error and by default you
02:00:45 would actually also use white in this
02:00:47 scenario unless you really have a
02:00:49 function that should produce undefined
02:00:52 and you want to be clear about that but
02:00:54 again that will rarely be the case I
02:00:56 just want to make sure here that you
02:00:58 understand difference between white and
02:01:00 undefined that white is the standard
02:01:03 which you'll use in pretty much all
02:01:05 scenarios where you have a function that
02:01:07 does not return a value and that you can
02:01:10 assign it explicitly but of course types
02:01:12 would always able to infer it like it
02:01:14 would be able here as well I just added
02:01:16 this for demo purposes here
02:01:22 so you can use types for function
02:01:25 parameters and for the return value of
02:01:27 the function now to take it to the next
02:01:30 level
02:01:31 what if there also were a function type
02:01:34 itself now let me make it clear what I
02:01:36 mean let's say we have a variable
02:01:39 combine values and this variable by
02:01:43 default has a type of any now as you
02:01:45 learned any is not that useful what I
02:01:48 want to do eventually is I want you to
02:01:50 set combined values equal to add so I
02:01:53 want to store the add function a pointer
02:01:56 at this add function in combined values
02:01:59 so that in the end we can console.log
02:02:02 combine values and execute combined
02:02:04 values as a function to which I pass
02:02:06 eight and eight now if I save that and I
02:02:10 execute this after compiling it so if we
02:02:13 compile this file and then we let this
02:02:14 reload we get 16 here so that works and
02:02:17 we would expect it to work because that
02:02:20 is normal JavaScript code we can store a
02:02:22 pointer at a function in a number
02:02:24 variable and then therefore execute this
02:02:27 variable as a function because well it
02:02:29 points at that function right so we can

02:02:31 execute that function through that
02:02:32 variable the problem we have with this
02:02:35 snippet here from a typescript
02:02:37 perspective just is that combined values
02:02:40 is any so if I set combined values to a
02:02:43 number here thereafter of course we can
02:02:47 compile this unfortunately because types
02:02:49 could has no chance of detecting that
02:02:51 this is unwanted word that this could
02:02:53 cause a problem but at runtime we would
02:02:56 get an error because obviously we try to
02:02:58 execute combine values as a function
02:03:00 when it actually is a number now we want
02:03:03 to avoid this and for that we need to be
02:03:05 clear that combined values will hold a
02:03:08 function now first step into that
02:03:10 direction is that we set the type here
02:03:13 to function function is our type
02:03:17 provided by typescript in the end and
02:03:18 this makes it clear that whatever we
02:03:20 store in here has to be a function
02:03:22 therefore here I'm getting an error
02:03:24 because five is a number and not a
02:03:26 function and if I comment this out we
02:03:29 can compile this otherwise we would get
02:03:31 an error during compilation and now it
02:03:34 is again runs as
02:03:35 affected so that's good but it's not
02:03:38 perfect because now we say there should
02:03:41 be a function but it could also set
02:03:43 combined value is equal to print result
02:03:47 for example here and of course
02:03:48 typescript would not complain because
02:03:50 print result is a function but of course
02:03:53 it's not a function that takes two
02:03:54 arguments so again if I compile this
02:03:57 typescript will not complain but if we
02:04:00 reload we see undefined here and result
02:04:02 AIDS so I don't get the result I want
02:04:05 because I store it the wrong function in
02:04:08 there again it would be nice if types
02:04:10 could would tell us about that
02:04:11 typescript can't inform us about this
02:04:14 because all we said to typescript is
02:04:16 dead we want to store a function in
02:04:18 there and this is clearly the case so it
02:04:21 would be good if we could be more
02:04:23 precise regarding how the function
02:04:25 should look like that we want to store
02:04:28 and combine values and that's where
02:04:30 function types come into play function
02:04:33 types are types that describe a function
02:04:36 regarding the parameters and the return
02:04:38 value of that function a function type
02:04:41 is created with this arrow function
02:04:44 notation you know from JavaScript or at
02:04:46 least close to that notation you don't
02:04:50 add curly braces here because we aren't
02:04:52 creating an arrow function here we're
02:04:54 creating a function type instead now on
02:04:56 the right side of this arrow you
02:04:58 specified a return type of the function
02:05:00 you eventually want to be able to store
02:05:02 in here that should be number now with
02:05:05 dead were saying combined values accepts
02:05:08 any function that takes no parameters
02:05:10 and then returns a number now that's of
02:05:13 course not entirely what we want we want
02:05:15 to make sure that combined values takes
02:05:17 a function or is able to store functions
02:05:20 that take two numbers and return a
02:05:22 number now for that we can add
02:05:24 parameters here to this function type we
02:05:27 don't have to match the parameter just
02:05:28 names from up there just the types so we
02:05:31 could have a which should be of type
02:05:34 number and B which should be of type
02:05:35 number and now what we're saying to
02:05:37 typescript is that combined values
02:05:40 should accept any function that takes
02:05:43 two parameters where each parameter is a
02:05:47 number and where the function overall
02:05:49 then
02:05:49 returns a number and that's why
02:05:51 typescript does not complain about us
02:05:54 storing add-in combined values because
02:05:57 ad is a function that perfectly
02:05:59 satisfies this type definition but it
02:06:02 does complain about print result because
02:06:05 print result as it tells us here is a
02:06:08 function of type one argument which is a
02:06:11 number
02:06:11 nothing is returned whereas we actually
02:06:14 expect to get a function with two
02:06:16 arguments where each argument is a
02:06:18 number and we all return a number so we
02:06:21 have a mismatch here and if I would try
02:06:24 to compile this we therefore would get
02:06:26 an error here of course in the compiler
02:06:28 and we only can fix this by removing

02:06:31 this line of code now we are able to
02:06:34 recompile this without errors and now
02:06:36 this runs as expected so function types
02:06:40 allow us to describe which type of
02:06:43 function specifically we want to use
02:06:45 somewhere be that an expected value in a
02:06:48 parameter for create a function with
02:06:50 some callback or like here a variable
02:06:57 now speaking of callbacks and function
02:06:59 types there it works pretty much in the
02:07:01 same way let's say we have a new
02:07:04 function up there add and handle let's
02:07:09 say and there we expect to get two
02:07:13 numbers and then I also want to get a
02:07:16 callback function here so a function
02:07:18 which is passed in as an argument that
02:07:19 should do something with the result then
02:07:22 here we could generate the result of
02:07:24 course but now I'm not returning it but
02:07:26 instead I want to call the callback
02:07:28 function and pass in result now for that
02:07:31 I want to be really clear that callback
02:07:32 should be a function so again I'm using
02:07:35 that function type definition that maybe
02:07:39 does not return anything but that does
02:07:41 take a number as an argument because
02:07:45 we're passing at a number here so the
02:07:47 callback function the function we're
02:07:48 passing into this function as a
02:07:50 parameter should accept a number and now
02:07:54 down there we could call add and handle
02:07:56 pass in 10 and 20 and then pass in a
02:08:00 function for example an anonymous
02:08:02 function here so now here when we call
02:08:04 the function this is of course not a
02:08:05 function type but a concrete value we're
02:08:08 passing in for this third argument so
02:08:10 this now here is an anonymous function
02:08:13 creating here and there we know we'll
02:08:15 get a number
02:08:17 maybe name it result here and that we
02:08:19 can do with it what I really want but
02:08:21 now if we compile this we see this lock
02:08:24 down there 30 which is the result of our
02:08:27 callback function which we passed to add
02:08:29 and handle we're add and handle combines
02:08:32 the two numbers and then calls to call
02:08:34 back where the called egg has to meet
02:08:36 this condition here the advantage of us
02:08:39 defining the callback function
02:08:40 definition here is that inside of the
02:08:44 function we pass it as a callback
02:08:45 typescript is able to infer that result
02:08:48 will be a number and hence we could do
02:08:50 anything with result here what we could
02:08:52 do with a number without explicitly
02:08:54 stating the type here because typescript
02:08:57 knows result will be a number because we
02:08:59 made it really clear that the callback
02:09:01 will get one argument which is a number
02:09:03 hence also if we would expect the second
02:09:06 argument here in the callback we'd get
02:09:08 an error because we know well
02:09:11 the callback we expect in our ad and
02:09:13 handle function only should have one
02:09:15 argument so if we then pass in a
02:09:17 callback function which takes a second
02:09:18 argument that clearly is a mistake the
02:09:21 only thing Toph does not pick up is if
02:09:24 we return something here if a return
02:09:26 result then they call BEC does return
02:09:28 something even though we made it clear
02:09:30 that it shouldn't return anything this
02:09:32 however is not a mistake or a bargain
02:09:36 type script it actually happens on
02:09:37 purpose by specifying void here on our
02:09:40 callback type we're essentially saying
02:09:42 will ignore any result you might be
02:09:45 returning here so we're basically saying
02:09:47 in add and handle where we get that
02:09:50 callback function will not do anything
02:09:52 with a return type that's why you'll be
02:09:54 able to return something here without
02:09:56 punishment but you know because it's
02:09:59 clearly defined here on the callback
02:10:01 type that the callback will not do
02:10:04 anything with the value you might return
02:10:06 here so that add and handle inside of
02:10:08 the function will not do anything with
02:10:10 that value you might be returning and
02:10:12 that's of course a useful piece of
02:10:14 information you might expect it in here
02:10:16 we're doing something with the value
02:10:20 returned by the callback and by
02:10:22 specifying this type here we make it
02:10:24 really clear that inside of add and
02:10:26 handle we're not interested in any
02:10:28 return value so this does not force you
02:10:30 to pass in a callback that does not
02:10:32 return anything it just tells you that

02:10:34 anything you might return will not be
02:10:36 used for the parameters it's of course
02:10:38 different there this is enforced because
02:10:41 here it really matters that you know if
02:10:43 you're passing a callback that expects
02:10:45 more parameters well then you'll get an
02:10:48 error or you'll not get the result you
02:10:50 want because I only give you one result
02:10:52 so there we can't just ignore what you
02:10:55 might want as it's the case for the
02:10:57 return type we can ignore that here for
02:10:59 passing something in we're the add and
02:11:02 handle function is responsible for that
02:11:04 because that's where the call that gets
02:11:05 called this is why parameters are
02:11:07 enforced and in typescript is really
02:11:10 strict regarding the number and type of
02:11:11 parameters of callback functions and why
02:11:14 it doesn't really care about the return
02:11:16 type
02:11:20 we're almost done with the basics about
02:11:23 typescript and the core types there are
02:11:25 two more types which are good to be
02:11:28 aware of because they will matter from
02:11:30 time to time and the first type is the
02:11:33 unknown type for that I'll name this
02:11:37 file your functions TS net and you app
02:11:39 ts file and in there let's say we have a
02:11:43 new variable user input and this is of
02:11:48 type unknown it's not of type any which
02:11:52 would be the default but unknown which
02:11:54 is a different type introduced but hide
02:11:56 script it might be unknown because we
02:11:58 don't know yet what the user will
02:12:00 eventually enter if it's a number if
02:12:02 it's a string we don't know now the
02:12:05 interesting thing about the unknown type
02:12:07 is we can store any value in there
02:12:09 without getting errors so this is all
02:12:13 allowed if I now compile my file here
02:12:16 you see I get no compilation error so
02:12:19 thus far it's the same as if we wouldn't
02:12:21 have assigned a type here and hence we
02:12:23 have T any type or if we would have
02:12:24 explicitly set any as a type but still
02:12:27 unknown is different to any this here
02:12:31 works but we'll run into issues if I
02:12:34 have another variable let's say user
02:12:37 name which should be a string and that's
02:12:40 uninitialized here but then here i want
02:12:42 to set username equal to user input now
02:12:46 you see we're getting an error the type
02:12:48 unknown is not assignable to type string
02:12:51 so user name wants a string and of
02:12:53 course unknown is not guaranteed to be a
02:12:56 string here I assigned one but that's
02:12:58 just the case in this line user input
02:13:01 technically could hold any value because
02:13:03 it's unknown now the interesting thing
02:13:06 is if I switch unknown to any this error
02:13:09 goes away because any is the most
02:13:11 flexible type and typescript and it
02:13:13 basically disables all type checking and
02:13:15 type script just says I give up do
02:13:18 whatever you want
02:13:19 unknown is a bit more restrictive than
02:13:22 any with unknown we have to first of all
02:13:26 check the type that's currently stored
02:13:29 in user input before we can assign it to
02:13:32 for example a variable that one
02:13:34 a string so since a string is wanted
02:13:36 here we could check if type of user
02:13:39 input is equal to string and typescript
02:13:43 will detect this check and understand
02:13:45 that in here what I store it username
02:13:48 because it's inside of this if statement
02:13:50 where I check for a user input being of
02:13:52 type string user input is guaranteed to
02:13:55 be a string and therefore I can safely
02:13:57 assign it to username so I need such an
02:13:59 extra type check here with unknown to be
02:14:03 able to assign a unknown value to a
02:14:06 value with a fixed type and therefore
02:14:10 unknown is the better choice over any if
02:14:13 you know I can't tell exactly what type
02:14:17 I'll store in there it might be a number
02:14:19 it might be a string but I know what I
02:14:22 want to do with it eventually well just
02:14:25 add an extra check to make sure that
02:14:27 what you wanted you can be done so that
02:14:29 if you want to work with a string you
02:14:31 have a string and you're good and then
02:14:34 unknown is better than any because it
02:14:36 makes sure that you're not allowed to do
02:14:38 everything but you have at least some
02:14:40 type checking of course if you have a
02:14:43 chance of knowing in advance that user
02:14:45 input is always a string or always a
02:14:47 string or a number well then you should
02:14:49 use string or such a union type instead

02:14:52 of unknown so unknown still is a type
02:14:54 you shouldn't use all the time but it is
02:14:56 better than any for the reasons
02:14:59 described
02:15:04 the last interesting type
02:15:06 want to show in this module is to never
02:15:08 type now we saw a function that returned
02:15:11 white so that never returns anything
02:15:14 never is another type functions can
02:15:18 return and that might sound strange
02:15:21 let's have a look at how it works
02:15:22 let's say we have a function generate
02:15:25 error here I expect to get a message
02:15:29 which is a string and maybe some error
02:15:31 code which might be a number now inside
02:15:34 of this function let's say we throw an
02:15:36 error so this should essentially be a
02:15:38 utility function that generates error
02:15:41 objects and froze them so here we might
02:15:44 throw an object which we can do in
02:15:46 JavaScript we can throw any object or
02:15:48 any value as an error and that should
02:15:50 have a message property in which I store
02:15:52 the value of my message argument here
02:15:55 and I want to have an error code
02:15:57 property let's say where I store the
02:16:00 code argument in so now this would be a
02:16:03 valid function and we can call this with
02:16:06 an error occurred for example and a code
02:16:10 of 500 if we do that and we compile this
02:16:13 file here we see that once this reloads
02:16:17 we get our error well as an error here
02:16:20 and this might sound pretty abstract but
02:16:23 actually it isn't having utility
02:16:25 functions like this would be pretty
02:16:27 standard in bigger applications where
02:16:30 you don't manually want to throw an
02:16:32 error in ten different places of your
02:16:34 app but where you want to reach out to
02:16:35 one convenient function that builds the
02:16:38 error object for you and maybe also
02:16:40 froze it immediately so that you can
02:16:42 call this function with different inputs
02:16:44 but you always have an error being
02:16:45 thrown now the interesting thing about
02:16:47 this function is it does not just return
02:16:50 white I actually can specify that it
02:16:53 returns white because of course returns
02:16:56 nothing but actually it does not just
02:16:58 return nothing if we're totally honest
02:17:01 this function returns never this
02:17:05 function never produces a return value
02:17:07 if I would try to restore the return
02:17:10 value here and I console.log result and
02:17:13 I'd n
02:17:16 compiled my code and this execute we see
02:17:18 there is no undefined being locked here
02:17:21 because since an error is thrown this
02:17:24 essentially crashes our script you could
02:17:27 say it cancels our script and this will
02:17:29 always be the case for this function of
02:17:32 course we can wrap it and try catch so
02:17:34 that we can still continue in the script
02:17:36 but this function essentially never
02:17:38 produces a value this function always
02:17:41 crashes the script or this part of the
02:17:44 script if you're using try catch and
02:17:46 therefore never returns anything and
02:17:49 hence the return type of this function
02:17:51 actually is not just Wyatt but also
02:17:55 never now the interesting thing is if
02:17:58 you hover over it without assigning
02:18:00 never you see the inferred type is white
02:18:03 alls because never is a newer type it's
02:18:07 been around for some time now but it
02:18:09 wasn't built into the first versions of
02:18:11 typescript and therefore why it is
02:18:13 typically assumed and it's not horrible
02:18:16 to leave it at that but you can be very
02:18:19 clear and explicitly said never as the
02:18:23 return type to make it really clear that
02:18:24 this never returns anything so from a
02:18:27 code quality perspective this might be
02:18:29 clearer regarding your intentions and
02:18:32 make it really clear to our developers
02:18:33 reading your code that this function is
02:18:35 intended to never return anything and to
02:18:38 essentially crash or break your script
02:18:41 or that part of the script and now our
02:18:44 function that would never return by the
02:18:46 way would be a function with an infinite
02:18:48 loop so if we have while true in there
02:18:51 that creates an infinite loop and that
02:18:53 therefore all would be a function that
02:18:55 never returns the error function here or
02:18:58 the function Det generates and throws an
02:19:00 error probably is the more common use
02:19:02 case though so never also an interesting
02:19:06 type which you can use on functions for
02:19:08 cases like this one here

02:19:14 now with that we had a thorough look at
02:19:17 all the core types and types with basics
02:19:19 you hopefully now understand how we
02:19:22 create an assigned types how we assign
02:19:25 types to variables and to parameters and
02:19:28 why we do that how type assignments and
02:19:31 types could differ from JavaScript type
02:19:34 checks that JavaScript uses runtime
02:19:37 types and typescript uses static types
02:19:39 that matter during development that the
02:19:42 built JavaScript code therefore does not
02:19:44 include any type assignments it of
02:19:47 course includes any type checks because
02:19:49 that is regular JavaScript code but
02:19:51 something like this here this is simply
02:19:56 not allowed in JavaScript this is not
02:19:57 supported syntax that's typescript only
02:20:00 so that's hopefully clear and then we
02:20:02 had a look at numbers strings boolean's
02:20:04 at function types and setting return
02:20:07 types argument types and also describing
02:20:10 the type of an overall function which
02:20:13 can be helpful if you want to have a
02:20:14 variable that eventually holds a
02:20:16 function we had a look at objects and
02:20:19 arrays and enums and how that can be
02:20:21 interesting and help you the same is
02:20:23 true for Q 'pls and now we all had a
02:20:25 look at aliases type aliases where you
02:20:29 can merge complex types into Alice's
02:20:32 which you can reuse we had a look at
02:20:34 literal types and union types which can
02:20:36 be useful for scenarios where you expect
02:20:39 more than one possible type and now at
02:20:43 the end we all had a look at unknown and
02:20:45 never which are niche types but still in
02:20:48 their niche they can be very useful and
02:20:52 now with these basics we'll dive deeper
02:20:54 into individual aspects and of course
02:20:56 also explore other types and JavaScript
02:20:59 constructs where typescript can be
02:21:01 helpful
02:21:06 in this module we'll take a closer look
02:21:08 at the typescript compiler thus far we
02:21:11 always just used it by running TOC and
02:21:14 then pointing at a file which we want to
02:21:16 compile now whilst that of course works
02:21:19 it's not really feasible for bigger
02:21:21 projects where you have multiple files
02:21:23 or where you simply don't want to run
02:21:26 this command after every change you want
02:21:29 to see in practice in addition to that
02:21:32 convenience which we currently don't
02:21:34 have there also are a couple of
02:21:36 interesting things you can configure
02:21:38 regarding the compilation process which
02:21:40 actually change what is compiled and how
02:21:43 it is compiled and these are therefore
02:21:45 the things we'll take a closer look at
02:21:47 in this module
02:21:52 now to get started I want to make sure
02:21:54 that I don't have to rerun this command
02:21:57 here this TOC command where a point at a
02:21:59 file after every change I make because
02:22:02 right now whenever I change something
02:22:05 here in my typescript file and I wanna
02:22:08 reflect that in my output file and on
02:22:13 this web page here we have to save the
02:22:17 file run the compilation again and then
02:22:22 reload this file or if we have our npm
02:22:25 start process running which we should
02:22:27 have then at least our browser will
02:22:30 automatically reload if we don't
02:22:32 directly open the file but instead are
02:22:34 on localhost 3000 but nonetheless even
02:22:37 though winstead reloading automatically
02:22:39 we still have to manually rerun the
02:22:42 compilation command so to get rid of
02:22:44 that we can enter watch mode that means
02:22:47 we can tell typescript to watch a file
02:22:51 and whenever that file changes
02:22:53 typescript will recompile so for that we
02:22:55 can still run the same command but now
02:22:58 we add – – watch at the end or just
02:23:01 single – W if we do that then we are in
02:23:06 watch mode on that file and now whenever
02:23:09 we change anything in there and we save
02:23:11 that so that the file on the disk
02:23:14 technically changes as well you see this
02:23:16 automatically recompile and of course
02:23:18 this all to me instead if we would do
02:23:21 anything which is not allowed like for
02:23:23 example reassigning to a constant and
02:23:25 then a wrong type as well whenever we
02:23:28 try to do that of course it also
02:23:30 recompile but then just as if we
02:23:32 manually run the command we see the
02:23:34 compilation error down there so watch
02:23:37 mode is already a big improvement the
02:23:40 downside is that we still have to

02:23:42 specifically target this file here and
02:23:45 at the moment of course this is the only
02:23:47 file we're working with but typically in
02:23:50 bigger projects that's not necessarily
02:23:52 the case
02:23:57 so as I mentioned in the last lecture
02:23:59 watch mode is a great start but what if
02:24:01 we have more than one type script file
02:24:03 what if we also have analytics dot TS
02:24:07 file where we hypothetically send
02:24:11 analytics data to our server now here to
02:24:14 just have anything in there I'll just
02:24:17 put in a console log statement but of
02:24:19 course you could be sending HTTP
02:24:21 requests to your analytics servers here
02:24:23 as I said so let's say we also did
02:24:26 import this file here in our index.html
02:24:30 file if we point at analytics dot J's
02:24:35 here which does not exist yet but which
02:24:37 will exist after compilation then we
02:24:40 could be loading these two files and of
02:24:42 course we want to compile both files
02:24:44 whenever one of them changes now for
02:24:46 that it would be nice if we could enter
02:24:48 some general watch mode where we just
02:24:51 run tears see like this so without
02:24:53 pointing at a file and it just watches
02:24:56 our entire project folder and recompiles
02:24:58 any types could file that might change
02:25:01 well turns out that this is possible for
02:25:04 that we just need to tell typescript
02:25:06 dead this here is one project that
02:25:10 should be managed with typescript and we
02:25:12 do that by first of all and we all need
02:25:15 to do this once running TSC – – in it so
02:25:19 I'm not pointing at a specific file here
02:25:21 I just run TS C and then – – in it here
02:25:24 and again this is only required once it
02:25:26 will initialize this project in which
02:25:29 you run this command as a typescript
02:25:31 project that means it will now basically
02:25:34 tell typescript that everything in the
02:25:36 folder where you run this command and
02:25:38 therefore it's important that you
02:25:39 navigate it into the right folder before
02:25:42 you ran this command with the built-in
02:25:44 terminal here in vs code I'm
02:25:46 automatically in this project folder
02:25:48 where my files are so that this project
02:25:51 is now managed but that's good let's hit
02:25:53 enter and what this does is it creates
02:25:55 this Tia's conflict or JSON file this
02:25:58 basically is the indicator for
02:26:01 typescript at the project in which this
02:26:03 file lies and all subfolders of this
02:26:07 folder should be managed by the high
02:26:09 school now if we
02:26:10 look into this file we see there are a
02:26:12 bunch of options most of them and
02:26:13 commented out they're just there so that
02:26:15 you see that you could set them and you
02:26:17 got a short explanation here as well but
02:26:20 we don't have to worry about those right
02:26:21 now we'll dive into them in a second for
02:26:24 the moment let's just close this file
02:26:26 here and let's see what this gives us
02:26:30 because what it does give us is that we
02:26:32 can now run just TSC like this without
02:26:35 pointing at a specific file and what
02:26:38 this will do is it will tell typescript
02:26:40 to go ahead and compile all typescript
02:26:43 files so all dot TS files it can find in
02:26:47 this project if I hit entry here you see
02:26:50 this takes awhile and now what we got is
02:26:53 this analytic start J's file and this
02:26:56 app.js file now the analytics.js file
02:26:59 was just created by typescript because
02:27:02 it found that we have the analytics of
02:27:04 tears file and as I said it will now
02:27:06 compile all typescript files in the
02:27:09 project and of course this can always be
02:27:11 combined with watch mode you can run TS
02:27:13 c – w or – – watch as i showed before
02:27:18 and this will now enter watch mode for
02:27:20 all typescript files so now whenever I
02:27:23 change one of them and I save it it will
02:27:26 recompile and it will recompile that
02:27:28 file that changed and they are all to
02:27:30 reflect the change in the javascript
02:27:32 file and it's now here if I go back to
02:27:34 my page we see sending data here as well
02:27:36 because now the analytics TS file was
02:27:38 also compiled
02:27:43 so this is now how we can manage
02:27:46 multiple files with typescript now one
02:27:48 word about having multiple files when
02:27:51 you work with multiple files as we're
02:27:52 doing it here you can also import them
02:27:55 into each other with modules which you
02:27:57 might know from vanilla JavaScript there

02:28:00 we have modules as well
02:28:01 it is something I'll cover in a
02:28:03 dedicated section of this course though
02:28:05 so for now we just have two files which
02:28:07 are not imported into each other but
02:28:09 which are instead imported into
02:28:11 index.html now with that out of the way
02:28:14 though we know that we can manage this
02:28:16 as a project and that we can compile
02:28:19 multiple files here now let's have a
02:28:21 look at the tears conflict on JSON file
02:28:23 because this is a crucial file for
02:28:26 managing this project it essentially
02:28:28 tells typescript how it should compile
02:28:31 these files now before we dive into the
02:28:34 compiler options where we asked the name
02:28:37 suggests can configure how the compiler
02:28:40 behaves let's scroll down to the place
02:28:44 before the closing curly brace but after
02:28:46 this nested closing curly brace and
02:28:48 let's see some of the options we can add
02:28:50 here which don't affect the compiler or
02:28:54 the compilation step behavior but
02:28:56 instead how the compiler works with this
02:28:59 project because there for example you
02:29:02 can set a exclude option now if you add
02:29:06 exclude here that will be an array and
02:29:08 what you can enter here are paths to
02:29:11 files which should not be included in
02:29:14 compilation when you run TSC on the
02:29:17 entire project so for example here we
02:29:19 could say we want to exclude analytics
02:29:21 TS from compilation and of course this
02:29:24 does make much sense here but just to
02:29:25 show how this works if we do that and we
02:29:29 now rerun TSC and I first of all delete
02:29:32 analytics.js so that we can see if it is
02:29:34 recreated if we now are on tier C or TS
02:29:37 c in watch mode you see no analytics.js
02:29:40 file is created the reason for that is
02:29:42 that we're excluding that file now of
02:29:44 course for this file this does make a
02:29:45 lot of sense because I typically want to
02:29:48 include it but if you had a file that
02:29:50 for some reason shouldn't be compiled
02:29:52 you can exclude it like this you can
02:29:54 also work with wildcards and for example
02:29:56 if you had a
02:29:57 it's named analytics dot def dot TS and
02:30:02 you don't really want to compile that
02:30:04 you could say all files that end with
02:30:06 theft or TS should not be compiled and
02:30:09 you can do that by also adding an
02:30:10 asterisk here which is a wild-card
02:30:12 basically and now types could will
02:30:14 ignore any files that have dot theft or
02:30:16 TS included you could also add asterisk
02:30:20 asterisk slash here that would mean any
02:30:23 file with that pattern in any folder
02:30:25 will be ignored so these are things you
02:30:28 can set up here the only thing I wanna
02:30:30 set up here and that is a setting you
02:30:32 will often find instead I want to
02:30:34 exclude node modules and the idea here
02:30:38 is that I don't want to compile any
02:30:40 typescript files
02:30:41 I might have inside of node modules now
02:30:44 node modules is that folder that holds
02:30:47 all the dependencies we install here in
02:30:50 package Jason and the dependencies of
02:30:52 these dependencies and therefore these
02:30:54 are third-party libraries we're
02:30:56 importing which we don't want to attach
02:30:58 and if any of these libraries should
02:31:00 ship some typescript code then we
02:31:02 certainly don't want to compile it it
02:31:04 will just slow down our compilation
02:31:07 process and in the worst case it might
02:31:09 even break our project so therefore it's
02:31:11 quite common to exclude node modules
02:31:13 here though I will say if you don't
02:31:15 specify the X to 2 option at all node
02:31:19 modules is automatically excluded as a
02:31:21 default setting so you don't really need
02:31:24 to add this option here this would be
02:31:27 the default I just want to show that X
02:31:30 through the exists and how you could use
02:31:32 it if the only thing you want X to this
02:31:34 node modules you don't have to add the
02:31:36 exclude key at all if you do add it
02:31:38 though you should set node modules
02:31:40 because otherwise it will not exclude
02:31:42 that now besides exclude we also have
02:31:45 include and include allows you to do the
02:31:48 opposite it allows you to specifically
02:31:50 tell typescript which files you want to
02:31:52 include in the compilation process and
02:31:54 anything that's not listed here will not
02:31:57 be compiled so if I point at apt es here
02:32:00 you'll see if I rerun TSC we all will

02:32:03 get no Analytics TS file or no
02:32:05 analytics.js file I should say why
02:32:07 because analytics.js is not included in
02:32:10 include
02:32:11 as I said if we do set the include key
02:32:13 then we really have to include
02:32:15 everything we want to compile so of
02:32:17 course here we could then also add
02:32:20 analytics TS here and with that addition
02:32:23 we would start and compile it as you see
02:32:26 now we have the analytics chairs file or
02:32:28 as an alternative we specify a whole
02:32:30 folder here which typically holds the
02:32:32 files we want to compile exclude by the
02:32:35 way if set alongs to include will filter
02:32:38 down include so if we exclude some
02:32:40 subfolder of a folder that is part of
02:32:42 include then that excluded subfolder
02:32:45 will be excluded so basically we compile
02:32:48 include – exclude now of course here I
02:32:51 don't want to set include I want to
02:32:52 compile all typescript files and
02:32:54 therefore I don't have to worry about
02:32:56 that excluding node modules is all I
02:32:58 need and as I explained theoretically I
02:33:00 don't even need to add that because that
02:33:02 would be excluded by default now you
02:33:05 also have a files option this allows you
02:33:07 to point at individual files so it's a
02:33:09 bit like include with the difference
02:33:12 that here you can't specify whole
02:33:14 folders which you want to include
02:33:15 instead that you really just specify the
02:33:17 individual files you want to compile
02:33:19 that might be option for smaller
02:33:21 projects where you know you will only
02:33:23 work with free files and for some reason
02:33:26 you got a couple of our types good files
02:33:28 which you don't want to touch though
02:33:30 then you can set a list of files like
02:33:32 this in reality you might not need that
02:33:35 setting that often though and therefore
02:33:38 that's it with the basic compilation or
02:33:40 project management options here now of
02:33:43 course there is way more we can specify
02:33:45 though way more we can specify about the
02:33:48 compiler itself and how it behaves
02:33:50 during the compilation step
02:33:56 so now that we have a understanding of
02:33:59 how we can manage our files with the
02:34:01 compiler let's dive into the compiler
02:34:04 options because that's really
02:34:05 interesting this allows us to control
02:34:08 how our typescript code is compiled so
02:34:11 not only which files but also how the
02:34:14 files which are getting compiled are
02:34:16 treated by typescript and there you see
02:34:19 we have a bunch of options now you got
02:34:22 short explanations next to these options
02:34:24 some explanations arguably are a bit
02:34:26 cryptic others are quite clear and I
02:34:29 will say that a lot of these options
02:34:31 most of these options will not matter in
02:34:33 most project so you'll not set all of
02:34:36 these options not even close you
02:34:39 typically can ignore a lot of these
02:34:40 options now I will pick up on the
02:34:42 important options here throughout this
02:34:44 course because some options only make
02:34:46 sense when we learn about a certain
02:34:48 feature and I want to dive into some
02:34:50 options right now already though and for
02:34:52 that let's go through that file from
02:34:54 from top to bottom and see what we got
02:34:56 there and let's start with the target
02:34:58 option as you see this actually is set
02:35:01 by default it's not commented out and
02:35:04 what you do with this option is you tell
02:35:06 typescript for which target JavaScript
02:35:10 version you want to compile the code
02:35:11 because what typescript does is it does
02:35:14 not just compile new features like the
02:35:17 type annotations that don't exist in
02:35:19 JavaScript to JavaScript code so it does
02:35:22 not just take care that this here works
02:35:27 it also compiles the code to JavaScript
02:35:31 that runs in in a certain set of
02:35:35 browsers and you basically define which
02:35:38 browsers support the compiled code by
02:35:40 setting the target the default target
02:35:42 here in this project as you see the
02:35:44 initial target which is getting set up
02:35:46 is es5 which means all typescript code
02:35:49 is compiled down and we can actually see
02:35:52 that if I run TSC here to compile all my
02:35:54 files we see an apt es I'm using let and
02:35:57 Const but an app J s we see var and that
02:36:01 happens because we got a target of es 5
02:36:04 and in es5 world we don't have let and
02:36:08 Const so the good thing here is

02:36:10 that we can use typescript to generate
02:36:12 code that works in older browsers as
02:36:14 well but it still D up to us if we want
02:36:17 to do that
02:36:17 maybe we don't want to do that with
02:36:20 typescript because maybe we got some
02:36:21 other built tool that will then take
02:36:23 care about the JavaScript translation
02:36:25 and therefore we don't want to have
02:36:26 typescript do that or maybe we want a
02:36:29 ship code that only works in modern
02:36:31 browsers because we know our app only
02:36:33 will run in modern browsers and
02:36:36 therefore alternative options can be
02:36:38 seen here if you delete the value and
02:36:41 then here in vias code at least if you
02:36:43 hit control space to get the auto
02:36:45 completion you see a bunch of
02:36:48 suggestions and you see all available
02:36:50 values here now over time this of course
02:36:52 will change because we got new
02:36:55 JavaScript versions released you saw we
02:36:57 set this to e is 5 before if you don't
02:36:59 specify target at all then right now
02:37:02 typescript compiles to es free even so
02:37:04 it supports an even older version but
02:37:07 you can also go with es6 which is more
02:37:09 modern which for example supports
02:37:11 constant let or take even more recent
02:37:14 version es6 is the equivalent to es 2015
02:37:17 just for the record so if we set this to
02:37:21 es6 for example and I rerun DTS C
02:37:24 command after changing that here's
02:37:25 convict J's to file you will see that
02:37:28 now an abscessed we got LED and Const
02:37:30 because now that is supported there so
02:37:33 that is up to you of course the more
02:37:36 modern of a JavaScript version you pick
02:37:38 here the more concise your generated
02:37:42 code is because typescript has to
02:37:43 compile less and less code or it has to
02:37:46 work around non existing features in
02:37:49 less situations and therefore the
02:37:51 compiled code typically is then more
02:37:53 concise and shorter so that's the target
02:37:55 what about Diablo options
02:38:01 we also got module here now module is an
02:38:04 option I'll skip for now because it
02:38:06 really makes sense once we learn about
02:38:08 modules in typescript and how we can
02:38:11 connect multiple files so let's ignore
02:38:13 that for now Lib is an interesting
02:38:16 window Lib is an option that allows you
02:38:19 to specify which default objects and
02:38:23 features typescript knows with that I
02:38:25 mean things like working with the Dom
02:38:27 let's say in index.html we have a button
02:38:31 and on this button we say click me and
02:38:33 when we click this button we just want
02:38:35 to print a message now in apt yes we can
02:38:38 select this button we can get access to
02:38:40 this button with document query selector
02:38:44 for example selecting the first button
02:38:46 we find now if we do that then there's
02:38:50 works we get no times good error here so
02:38:52 if I go to my button and I add an event
02:38:55 listener here I get an error here
02:38:58 actually because typescript doesn't know
02:39:01 for sure whether we find a button here
02:39:03 for now we can work around that with an
02:39:05 exclamation mark after this line and
02:39:08 I'll come back to what exactly this does
02:39:09 in a future it basically tells
02:39:11 typescript don't worry
02:39:13 such a button will exist we will get a
02:39:15 value here so now we can add a click
02:39:18 event here and then to find some
02:39:20 anonymous function maybe we're a
02:39:21 console.log clicked now the interesting
02:39:25 thing here is not so much that I had to
02:39:27 add the exclamation mark as I said I
02:39:29 will come back to that but that if I run
02:39:31 here see this just compiles now
02:39:34 shouldn't types could complain that
02:39:37 document is unknown to it how does it
02:39:39 know that we have such a document
02:39:42 constant or variable available how does
02:39:45 it know that even if we have that
02:39:47 available that it holds an object which
02:39:49 has a curry selector method how does it
02:39:51 know that button is something which has
02:39:54 an event listener method how does
02:39:57 typescript know all of that now you
02:39:59 might say of course is nose because in
02:40:01 vanilla JavaScript this would be valid
02:40:03 code but keep in mind that when you
02:40:06 write a typescript code you don't
02:40:07 necessarily write it for the browser you
02:40:11 could be riding your node.js application
02:40:13 with typescript and

02:40:14 err indeed this would all not work so
02:40:18 the reason why this works is this lib
02:40:20 option and as you see it's not even set
02:40:23 here but if it isn't set then some
02:40:25 defaults are assumed if it's not set the
02:40:29 defaults depend on your JavaScript
02:40:31 target here and for es6 it by default
02:40:34 includes all the features that are
02:40:37 globally available in es6 for example
02:40:40 the map object which is available in
02:40:44 year 6 therefore it wouldn't complain if
02:40:47 you use map so it assumes all these
02:40:49 years six features which are made
02:40:52 available globally in JavaScript that
02:40:54 they are available in typescript as well
02:40:56 and in addition it assumes that all Dom
02:40:59 api's are available you'll find the
02:41:02 detailed descriptions about all these
02:41:04 options by the way in the official Docs
02:41:06 which are linked in lecture at the end
02:41:07 of this module so long story short if
02:41:10 the lip option is not set some defaults
02:41:12 are assumed and these are typically the
02:41:14 defaults you need to have typescript run
02:41:16 in the browser so all the Dom API ends
02:41:19 on if we comment this in and I now
02:41:23 compile everything I dare forget an
02:41:25 error because now by commenting it in we
02:41:27 don't have to default settings anymore
02:41:29 instead we now say hey please include
02:41:32 some default libraries so some default
02:41:34 type definitions you could say which I
02:41:37 will give you in this array and as you
02:41:40 see I'm not passing any description any
02:41:42 paths any values here and therefore what
02:41:45 I'm saying the typescript now is hey
02:41:47 regarding all the defaults you know
02:41:49 please take this into account and you
02:41:51 know nothing so only if that's commented
02:41:54 out it works because then times could
02:41:55 we'll assume some defaults if I set the
02:41:58 default explicitly well then types good
02:42:00 of course adheres to what I'm setting
02:42:01 here and hence here for example it
02:42:03 doesn't know document it doesn't even
02:42:05 know the console here so therefore we
02:42:09 want to set this to more reasonable
02:42:11 values and again if you hit control
02:42:13 space in here you get all the completion
02:42:14 and for example there we could add Dom
02:42:17 that's an identifier and there are some
02:42:20 predefined identifiers which types could
02:42:21 understand again you find a complete
02:42:24 list in the official docs the docs for
02:42:26 this option are attached to this
02:42:28 as well so this is identifier types
02:42:31 could understand it's an identifier
02:42:33 which basically unlocks all the Dom API
02:42:35 is in typescript so the typescript
02:42:37 understands what you're doing there so
02:42:39 now already you see it knows console it
02:42:42 knows document and so on so now since
02:42:45 we're working with next-gen JavaScript
02:42:47 we should also add two ears six option
02:42:50 so that types could also understands all
02:42:53 globally available es6 options and it's
02:42:56 also a good idea to add Dom iterable and
02:43:00 script host with that here we would
02:43:03 unlock all the core JavaScript features
02:43:05 you would want to work and this by the
02:43:07 way is the exact default setup you get
02:43:10 when you set target two years six
02:43:12 anyways so if you comment this in and
02:43:15 set it up like this you have exactly the
02:43:16 same behavior as if you don't specify
02:43:18 lib at all now here I will comment it in
02:43:21 though and with that this will compile
02:43:24 again setting this is a bit redundant
02:43:26 though just want to explain what it does
02:43:32 now although interesting is allowed Jas
02:43:36 with allow Jas and by the way all the
02:43:38 way of check chess you can also include
02:43:40 JavaScript files in the compilation now
02:43:43 with allow Jas a JavaScript file will be
02:43:45 compiled by typescript so even if it
02:43:48 doesn't end with dot TS types could will
02:43:50 compile it with check j s it will not
02:43:52 compile it but it will still check the
02:43:54 syntax in there and report potential
02:43:56 errors this could be nice if you don't
02:43:59 really want to use typescript but you
02:44:00 want to take advantage of some of its
02:44:02 features and as far as typescript can
02:44:05 help you with the any type only which is
02:44:08 effectively what you have in JavaScript
02:44:10 it will do so if you enable these
02:44:13 options now we don't need it for this
02:44:14 project and for this project we would
02:44:17 want to make sure we don't double
02:44:19 compile these javascript files which do

02:44:22 stem from tactical files so we would
02:44:24 have to tweak to include an ex to its
02:44:25 settings a bit but you could use that in
02:44:27 projects where you don't want to use
02:44:29 typescript at all or where for whatever
02:44:32 reason you have some vanilla JavaScript
02:44:34 files next to your typescript files and
02:44:37 you want to check the vanilla JavaScript
02:44:39 files as well now let's fast forward a
02:44:43 bit J's acts as an option that can help
02:44:45 you with react Jas which does not really
02:44:48 matter for us here declaration and
02:44:50 Declaration map is also not important
02:44:52 here DTS files are an advanced concept
02:44:55 which matter to you if you're shipping
02:44:57 your project as a library to other
02:44:59 people and you need very basically a
02:45:01 manifest file which describes all the
02:45:04 types you have in your project that's
02:45:06 such a DTS file source map is an
02:45:09 interesting one though
02:45:14 sourcemap helps us with debugging and
02:45:17 development so to show what this does
02:45:20 let me compile everything without that
02:45:22 source map setting if we now go to the
02:45:25 browser and we want to understand what
02:45:27 our code does we can go to the sources
02:45:29 tab here indie developer tools and there
02:45:32 we find our JavaScript files now we can
02:45:34 dive into these files and the good thing
02:45:36 is these files are fairly readable to us
02:45:39 humans of course because they contain
02:45:41 JavaScript code in the end now that's
02:45:44 good but what if we had more complex
02:45:47 typescript code and we want to debug our
02:45:50 typescript code and not the compiled
02:45:52 JavaScript code in our of words it would
02:45:54 be nice if we would see the typescript
02:45:56 files here and not JavaScript files with
02:45:59 the source map option you can get there
02:46:02 if you set this to true and you run the
02:46:04 TSC command again then you see we got
02:46:07 these dot J's not map files being
02:46:09 generated as well now if we look at them
02:46:12 they're pretty strange files but what
02:46:14 they do is they basically act as a
02:46:16 bridge which is understood by modern
02:46:18 browsers and the developer tools there
02:46:21 to connect the JavaScript files to the
02:46:24 input files so with these files
02:46:26 generated if I reload here you see in
02:46:30 the sources tab we now not just have our
02:46:32 JavaScript files we also see our
02:46:35 typescript files there and we can even
02:46:36 place breakpoints in the typescript
02:46:39 files and if I now click on that button
02:46:41 for example it pauses in the typescript
02:46:43 file which is of course super super
02:46:46 convenient because that really takes our
02:46:49 debugging process to the next level
02:46:51 because we can work directly in our
02:46:53 input files basically in our tax code
02:46:55 files instead of the JavaScript files
02:46:57 now nonetheless here I'll comment this
02:46:59 out because we have a fairly simple
02:47:01 project here and I don't want to have
02:47:03 these extra dot map files lie around
02:47:05 here but this is super useful in
02:47:07 projects because it simplifies debugging
02:47:14 let's move on we get the outfall option
02:47:17 here now this option does not matter to
02:47:19 us right now
02:47:20 it won't work right now more interesting
02:47:22 classes out der and route der
02:47:24 the bigger your project gets the more
02:47:27 you might want to organize your files
02:47:29 typically you don't just want to have
02:47:31 your files lie around here in your root
02:47:34 level project folder instead what you
02:47:37 often will see in projects is that you
02:47:39 have a source folder and you have a dist
02:47:41 folder next next
02:47:43 so the dist folder has the job of
02:47:46 holding all the output so all the
02:47:48 JavaScript files let's say and the
02:47:50 source folder might hold all our
02:47:52 typescript files so we can move the
02:47:54 typescript files into the source folder
02:47:57 and if I now delete the JavaScript
02:47:59 folder we have the problem that if we
02:48:01 compile everything these type code files
02:48:03 are compiled because typescript the
02:48:05 compiler does look into subfolders but
02:48:08 the output says next to our input files
02:48:11 and that's something we can control with
02:48:14 the outer for example if we set outer we
02:48:17 can tell the typescript compiler where
02:48:20 the created files should be stored we
02:48:23 could set this to disk now if we do that
02:48:27 then if you run TSC you will see that

02:48:30 the JavaScript files indeed are not
02:48:32 placed in the source folder but in the
02:48:34 dist folder now we just have to adjust
02:48:36 our index.html file and there point at
02:48:39 dist apt Reyes and dist analytics.js
02:48:42 or alternatively move the index.html
02:48:45 file into the dist folder but then our
02:48:47 dev server wouldn't work correctly
02:48:48 anymore right now so let's just adjust
02:48:50 these imports and with that we got a
02:48:54 working application still as you see but
02:48:57 now with a cleaner project structure now
02:49:01 the good thing is if we had a subfolder
02:49:03 here and analytics folder let's say and
02:49:05 we had our type could file in there then
02:49:07 if we recompile and it does not matter
02:49:10 if you do it with this command or in the
02:49:12 watch mode this folder structure you
02:49:14 have in a source folder will also be
02:49:16 replicated in the dist folder which is
02:49:18 of course very convenient because that
02:49:20 makes sure that you can import the files
02:49:22 basically as you would import them in
02:49:25 the source folder as well so that the
02:49:27 structure you said
02:49:27 there is Kent now you can also set the
02:49:30 root directory and set this specifically
02:49:32 at the folder where your files are
02:49:34 stored in like in this example source to
02:49:38 make sure that the typescript compiler
02:49:39 does not look in our folders that's also
02:49:43 something you could do with the include
02:49:44 option down there
02:49:45 right but with root directory the
02:49:49 typescript compiler will not just look
02:49:51 only at that source folder it also makes
02:49:54 sure that project structure you set up
02:49:57 there is kept in a dist folder now it
02:50:00 did so by default before as you saw but
02:50:02 keep in mind that before it would have
02:50:04 included any typescript files here all
02:50:06 the outside of source so for example if
02:50:09 we comment this out temporarily if we
02:50:11 had a user folder here on the top level
02:50:13 with a user TS file where we have a user
02:50:16 name of max let's say then if we compile
02:50:19 this you will also see that user folder
02:50:22 in the dist folder and now the source
02:50:24 folder is included as well because now
02:50:26 we have a type could file on a higher
02:50:29 level and therefore the types of
02:50:30 compiler things that our whole project
02:50:33 again is the input and it replicates the
02:50:35 folder structure it finds there in the
02:50:37 distal der now that's of course not what
02:50:39 we would want and that's where the
02:50:43 routier option helps us now if we set
02:50:45 this to source even if we had our
02:50:47 folders with typescript files in there
02:50:49 on the root level they would not be
02:50:51 included in the output and the source
02:50:53 folder itself would not suddenly end up
02:50:55 there so off new set both routes der and
02:50:58 outer to be really clear regarding where
02:51:00 your input files live and where your
02:51:02 output files should be generated in if
02:51:04 we move on we can ignore composite we
02:51:07 can have a look at remove comments
02:51:09 should be pretty clear if you set this
02:51:11 then any comments you might have in your
02:51:14 typescript files will be removed in the
02:51:18 compiled JavaScript files so if I
02:51:20 comment this in and I compile my code
02:51:23 you see an apt yes I have a comment in
02:51:25 app J's it's not there so you can do
02:51:27 that to make your files smaller and
02:51:30 therefore this might be a nice option
02:51:32 you can also set no Amit if you don't
02:51:35 want to generate any JavaScript files
02:51:37 now this might sound strange because
02:51:39 that's the idea of typescript
02:51:41 but if you just want to check whether
02:51:43 your files are correct but you don't
02:51:45 want to write all these output files to
02:51:47 save some time for example in a bigger
02:51:49 project then you could set this to true
02:51:51 to just have the types of compiler check
02:51:54 your files and report any potential
02:51:57 errors without actually creating an
02:51:59 output file import helpers is not really
02:52:02 important to us here we can ignore that
02:52:03 downlevel iteration is an advanced
02:52:06 option it is interesting when you
02:52:09 compile your code to older versions of
02:52:11 JavaScript and you work with for loops
02:52:14 then in some rare scenarios you could
02:52:17 run into issues where the compilation
02:52:19 doesn't work correctly this option if
02:52:22 you turn it on gives you a more exact
02:52:24 compilation which will work in these

02:52:26 niche cases so therefore you might think
02:52:28 you should always turn it on but it will
02:52:30 also output more verbose code so you
02:52:33 should only turn this on if you have
02:52:34 loops and you see that your generated
02:52:37 code suddenly behaves differently than
02:52:39 it should
02:52:39 regarding those loops
02:52:45 we can't ignore isolated modules but
02:52:48 there is one other option which is
02:52:49 actually not even mentioned here which I
02:52:51 still want to mention myself though and
02:52:54 that steed no omit on error option you
02:52:58 can set this to true or false and the
02:53:00 default is false and what does this do
02:53:03 if we set it to false let me show you
02:53:04 where this might be a problem it is a
02:53:06 problem if we introduce an error or it
02:53:10 can be a problem let's say here I do
02:53:13 have my button and I remove this
02:53:15 exclamation mark now even though we
02:53:16 don't fully understand what's going on
02:53:18 the problem here simply is that
02:53:19 typescript does not know that we
02:53:22 certainly have a button here after all
02:53:24 when querying for a button we might not
02:53:26 get one if there is no element in the
02:53:29 Dom sense satisfying this selector then
02:53:31 this will return null and that's
02:53:32 basically what types of complains about
02:53:34 here we access something on a potential
02:53:37 null object and that's not good
02:53:40 now that's an error we have here if we
02:53:43 compile our code we also get this error
02:53:45 here in the console nonetheless the file
02:53:50 is created so even if I delete the app
02:53:53 J's file it will be recreated so even if
02:53:55 we have an error typescript creates a
02:53:58 JavaScript file this might or might not
02:54:01 be wanted maybe you have an error in
02:54:03 your tab good file and you don't really
02:54:05 know how to work around it but you know
02:54:07 it will not be a problem in the final
02:54:09 app like here even if we don't know
02:54:11 about the exclamation mark well if we
02:54:13 don't know about the exclamation mark we
02:54:15 might not know how to disable this error
02:54:18 basically but still we know that this
02:54:20 will work in our page here so we might
02:54:23 be fine with compiling this despite
02:54:25 having an error but of course in reality
02:54:27 you should aim for error free projects
02:54:31 and Rober learn how you can work around
02:54:33 this issue then ignore it nonetheless
02:54:35 you could set this to false or not set
02:54:38 it at all because false is to default if
02:54:41 you are fine with generating JavaScript
02:54:44 files if you have an error if you set
02:54:46 this to true however what will happen is
02:54:48 that problematic files will not be
02:54:51 generated if I now rerun this
02:54:55 you see nothing is generated actually
02:54:58 even the analytics TS file is not output
02:55:01 there if we have some content in there
02:55:04 besides console.log
02:55:07 you see it's not getting generated and
02:55:10 the reason for that is that we have an
02:55:11 error in a file and if any file fails to
02:55:15 compile no files will be emitted so here
02:55:18 therefore we have to make sure we fix
02:55:19 this error before we then can get
02:55:21 typescript to again compile files for us
02:55:24 and therefore it is an option I
02:55:25 typically like to set because I'm not
02:55:28 interested in getting JavaScript files
02:55:30 if I still have errors in my type code
02:55:32 files
02:55:36 so that was an important first set of
02:55:39 options now let's dive into these strict
02:55:42 options because these are pretty
02:55:43 interesting there is this strict true
02:55:46 option and actually what this does is it
02:55:49 enables all strict type checking options
02:55:51 so effectively setting this is the same
02:55:54 as if you would set all these options
02:55:56 separately so you can either set all
02:55:58 these options one by one or just set
02:56:01 this option of course you want to set
02:56:03 the individual options if you want to
02:56:05 have some options set to false because
02:56:08 otherwise they're all set to true if you
02:56:10 want them all set to true then using
02:56:12 just this option is of course way
02:56:13 shorter now what do these options do
02:56:15 though let's start with no implicit any
02:56:18 no implicit any is a quite interesting
02:56:22 option that helps us write better code
02:56:24 let's go to our Analytics file here and
02:56:26 there let's add a function send
02:56:29 analytics that gets a data option let's

02:56:32 say and there we could send this to a
02:56:35 server but here I'm just console logging
02:56:38 it then I call send analytics with the
02:56:41 data so with the string now as you see
02:56:44 my IDE already complains here and so
02:56:46 does typescript the compiler because the
02:56:48 two of course are connected if I try to
02:56:51 compile this parameter data implicitly
02:56:54 has on any type so this seems to be
02:56:56 related to this no implicit any option
02:56:58 indeed if I set this to false so if I
02:57:02 set all strict options to true but I set
02:57:05 this option to false which I can do then
02:57:07 this error goes away both in the IDE and
02:57:10 when we compile the code so what does
02:57:12 this option do it ensures and I'll
02:57:15 comment it out again to turn it on again
02:57:17 because of strict truth it ensures that
02:57:20 we have to be clear about our parameters
02:57:24 about the the values we're working with
02:57:27 in our code here we don't give types
02:57:30 with any information about the type of
02:57:32 data we'll get as a parameter here and
02:57:35 we should if typescript is able to infer
02:57:38 this then of course it's fine but here
02:57:40 how what types could be able to infer it
02:57:42 from this line well keep in mind that
02:57:45 this function gets declared first before
02:57:47 this file executes so at the point of
02:57:49 time when the function is created there
02:57:50 no chance of knowing what will end up in
02:57:52 there so here we can fix this error by
02:57:55 simply declaring the type and being
02:57:57 clear about which type we use there now
02:58:00 please note that if you had a variable
02:58:03 locked and you set this to true here you
02:58:08 don't get an error about this
02:58:09 declaration even though it also gets a
02:58:11 default type of any four variables this
02:58:13 is okay for parameters it's not okay why
02:58:16 is it okay for variables because what
02:58:18 typescript asks for variables what is
02:58:20 possible for variables what's not
02:58:21 possible here because the function is
02:58:23 created first here types which is able
02:58:25 to track the values you assign you see
02:58:28 okay I got locked here like this now I
02:58:30 set it to true so therefore thereafter
02:58:33 if I console.log locked here
02:58:41 it's a boolean so typescript is here
02:58:44 able to understand the flow of your code
02:58:46 and they offer you don't need to be
02:58:49 precise regarding the type here of
02:58:50 course you want to be precise if you
02:58:52 want to avoid that you can freely assign
02:58:55 a new value which you can do here
02:58:56 because it is of type any so you want to
02:58:58 still assign a type to a white this but
02:59:01 typescript is at least able to find out
02:59:03 if the code you're calling works with
02:59:05 the type it currently holds that's not
02:59:07 the case here because there the function
02:59:09 is to find before you call it and
02:59:10 therefore typescript would have no
02:59:12 chance of knowing if what you pass in
02:59:14 there can be used inside of the function
02:59:18 strict null checks is another important
02:59:21 option it's actually related to our
02:59:22 button selection which we have here
02:59:24 remember I had to add this extubation
02:59:26 mark here to make it work otherwise I'd
02:59:28 get an error now we can also get rid of
02:59:30 that error without adding the
02:59:32 exclamation mark by setting strict null
02:59:35 checks to false so let's do that here
02:59:38 and let's save this and as you see this
02:59:41 error is now gone here and I can't
02:59:43 compile all files and what do is strict
02:59:46 null checks you they tell typescript to
02:59:49 be pretty well strict regarding how you
02:59:52 access and work with values that might
02:59:55 potentially hold a null value and button
02:59:58 here might be now it's not always
03:00:01 pointing at a button element it's not
03:00:05 always pointing at such an element
03:00:06 because even though you have such a
03:00:08 selector here a button might simply not
03:00:10 exist on the page on which this script
03:00:13 runs and therefore typescript can't tell
03:00:16 because it's not diving into your HTML
03:00:18 file and looking at that it can't tell
03:00:21 whoever it is will be successful or not
03:00:23 and if this fails to return a pointer at
03:00:27 a Dom node then it will return null or
03:00:30 undefined to be precise but that's
03:00:32 treated equally here so therefore then
03:00:35 button might hold a null value and
03:00:37 therefore this code could fail indeed if
03:00:39 I comment out this button here if I now
03:00:42 compile everything it works because I

03:00:44 disabled the null checks but idea for
03:00:48 now I have a runtime error because I
03:00:49 can't call event listener an event
03:00:52 listener on null and I got null here
03:00:54 because I got no button now this is a
03:00:56 mistake we could avoid by setting strict
03:01:00 null checks to true and that's
03:01:02 automatically set if we have strict set
03:01:04 to true where typescript anticipates
03:01:08 that this might happen and therefore
03:01:10 forces us to work around that
03:01:13 now one cheap workaround is this
03:01:16 exclamation mark operator here this
03:01:18 tells time script that you the developer
03:01:21 know that this button exists or that
03:01:24 this operation will yield a non null
03:01:27 value now maybe you do you certainly do
03:01:31 you know that you are working on the
03:01:33 HTML code and that there is a button
03:01:35 here that this selector here will work
03:01:38 so it would be fine to use the
03:01:40 exclamation mark in this scenario if you
03:01:43 have another scenario where you don't
03:01:45 know for sure if it works and you just
03:01:46 hope that it works then it might be
03:01:49 better to simply wrap the code that
03:01:51 might fail in an IFFT check which will
03:01:54 be there at runtime as well of course
03:01:56 you could simply check if button is
03:01:59 truthy which it won't be if it's null or
03:02:02 undefined and move that code into this
03:02:04 if check here now even without the
03:02:06 exclamation mark in strict null checks
03:02:09 mode we get no error because typescript
03:02:12 understands that this code is inside of
03:02:14 this if statement and that this if
03:02:16 statement make sure that button is not
03:02:19 null and that this will not fail so this
03:02:22 might actually be the cleaner workaround
03:02:24 however of course to save code if you
03:02:26 know with certainty that something does
03:02:28 exist using the exclamation mark is
03:02:31 shorter and an absolutely fine option
03:02:33 here I said both so that we see both of
03:02:35 course you just need one of the two
03:02:37 things eerily if check or the
03:02:38 exclamation mark strict function types
03:02:41 here is a little bit of a more advanced
03:02:44 setting catching some some nice box
03:02:47 which you might not have in many
03:02:48 applications it is related to well
03:02:51 function types you might be setting up
03:02:53 so not types inside of functions but if
03:02:56 you define how a function should look
03:02:58 like regarding its parameters and return
03:03:00 value and you create such a function
03:03:03 type which you learn about in the basics
03:03:04 module then there you can introduce box
03:03:07 if you work with classes and inheritance
03:03:10 which we have learned about yet which we
03:03:12 haven't used yet and therefore for now
03:03:14 let's ignore this strict bind call apply
03:03:17 that can be helpful if you do work with
03:03:19 bind call or applied for that let's
03:03:22 quickly see an example here we have our
03:03:25 our button and our function there now
03:03:27 let's say this would be a function which
03:03:30 we define here with the function keyword
03:03:34 or as an error function doesn't matter
03:03:36 I'll use the function keyword here click
03:03:40 handler and in there I
03:03:44 console.log clicked and now here we
03:03:47 point at clickhandler and for some
03:03:50 reason we want to make sure that when is
03:03:52 execute we pass in certain arguments or
03:03:54 we set the this keyword in there to a
03:03:57 certain value now let's say here we do
03:04:00 you expect a message argument which
03:04:02 should be a string and we wanna output
03:04:05 this here as well
03:04:07 now since clickhandler is passed to add
03:04:10 eventlistener like that so that the
03:04:12 browser basically executes this for us
03:04:13 if you want to pre configure the
03:04:15 arguments which will be passed in we can
03:04:17 use bind and bind as our first argument
03:04:20 takes what we want to bind the this
03:04:22 keyword to and here we could say it does
03:04:26 not matter to us because we're not using
03:04:27 this in this function so we bind it to
03:04:30 null now you see here i get an error i
03:04:33 get an error that can be avoided if i
03:04:36 set strict bind call and apply to false
03:04:42 now you see the error is gone now what
03:04:44 does this option do therefore it
03:04:46 basically checks on which function
03:04:48 you're calling bind call or apply and it
03:04:51 checks if what you are setting up here
03:04:53 makes sense
03:04:54 and here typescript sees we want

03:04:57 argument we want a parameter in click
03:05:00 handler with bind we're not configuring
03:05:02 that though and therefore here we get an
03:05:04 error if I set this back to true or I
03:05:07 just commented it out because of course
03:05:10 it is set to true by default by setting
03:05:12 strict to Dru we did forget the error
03:05:14 again now if we wouldn't expect an
03:05:16 argument here you see the error would be
03:05:18 gone down there if we all remove the
03:05:20 message because typescript understands
03:05:23 our code and sees you're not passing in
03:05:25 any arguments to that method or to this
03:05:27 function because it doesn't take any so
03:05:29 that's fine but of course here we want
03:05:31 one so we get an error
03:05:32 the solutionist who provide this second
03:05:35 argument here which is the first
03:05:37 argument we want to pass in now
03:05:39 typescript is really smart here and for
03:05:42 example if you pass in a number it would
03:05:43 still complain because it understands
03:05:45 that I need a string here if I pass in a
03:05:50 correct string though like you're
03:05:51 welcome then it does not complain
03:05:54 anymore because now it understands this
03:05:55 and it sees that this is matching my
03:05:58 function definition here so this is a
03:06:00 very useful behavior that makes sure
03:06:02 that you don't accidentally use fine
03:06:04 call or apply in a way that does not
03:06:06 work with your code now a strict
03:06:09 property initialization becomes
03:06:11 important once we work with classes we
03:06:13 can ignore it for now no implicit this
03:06:15 also does not matter right now it has to
03:06:17 do with the this keyword and typescript
03:06:19 basically tries to warn you if you use
03:06:21 to this keyword in a place where it's
03:06:23 not clear what it refers to and always
03:06:27 strict simply controls that the
03:06:28 JavaScript files which are generated are
03:06:30 using strict mode so that this is added
03:06:34 with that we covered all these strict
03:06:37 options
03:06:41 now if we move on we get more options no
03:06:43 unused locals no unused parameters no
03:06:46 implicit returns this helps you with
03:06:48 code quality basically typescript will
03:06:51 complain if you have certain unused
03:06:54 variables and so on so if we turn these
03:06:58 free options on for example this option
03:07:02 helps you have switched statements where
03:07:04 you might forget the break keyword but
03:07:06 if we turn these free options on what
03:07:08 typescript will complain about is for
03:07:11 example if you had a username variable
03:07:12 here locally in this function and you
03:07:15 don't use it you see this has yellow
03:07:18 squiggly lines because it's not an error
03:07:20 really it's more like a warning or a
03:07:22 hint so if I compile here
03:07:27 you see now however I do get an error
03:07:29 because typescript only knows errors and
03:07:31 there we see that user name is declared
03:07:33 but its value is never read because we
03:07:36 made sure that we don't want unused
03:07:38 local variables unused global variables
03:07:42 so if I had something like app ID here
03:07:45 are allowed though because typescript
03:07:48 can't know if you maybe need that
03:07:50 globally defined value in an average
03:07:52 crypt file so therefore this is allowed
03:07:54 but in a function where there is no
03:07:56 other place where you could need it
03:07:58 typescript will complain now if you have
03:08:00 unused code and that's generally a good
03:08:02 idea allows you to strip out such unused
03:08:05 code same goes for unused parameters if
03:08:08 you would take a age here for one of
03:08:11 course bind is broken now but even if we
03:08:13 pass this in this works but now again
03:08:16 typescript and therefore all to the IDE
03:08:18 tells us that this is unused and indeed
03:08:21 it is so maybe you should remove it or
03:08:22 start using it so that's no unused
03:08:26 parameters and no implicit returns means
03:08:29 that we'll get an error if we have a
03:08:33 function that sometimes returns
03:08:34 something and sometimes it does not
03:08:37 let's say we have an ever function add
03:08:40 where we get two numbers number and and
03:08:44 who is a number and of course we can
03:08:47 return + 1 + + 2 but
03:08:54 Saver for some reason checking if n1
03:08:56 plus n2 is greater than zero because we
03:08:59 only want to return if we have a result
03:09:01 greater than zero and then we want to
03:09:04 return the value otherwise we want to
03:09:05 return nothing we don't want to return

03:09:07 well then we get a warning because of
03:09:09 that extra setting with no implicit
03:09:11 returns typescript detects that not all
03:09:15 branches in this function lead to a
03:09:17 return statement and because of our
03:09:19 setting that's not allowed we at least
03:09:20 have to deliberately not return anything
03:09:23 here by adding the return keyword just
03:09:25 omitting it is not allowed here it is
03:09:28 allowed if you have a function that does
03:09:29 not return anything in no branch but if
03:09:32 you have at least one case where your
03:09:34 function does return something then you
03:09:36 have to make sure you return something
03:09:38 in all cases
03:09:41 and with dead were nearing the end of
03:09:43 this colloquy can ignore the module
03:09:45 resolution here all these options
03:09:47 actually are pretty advanced that don't
03:09:49 matter to us here don't matter to you in
03:09:51 a lot of projects source map options
03:09:54 allow you to tweak these source Maps we
03:09:56 had a look at earlier so these
03:09:58 translation files from JavaScript to
03:10:00 typescript typically default settings
03:10:02 should be fine here so if you don't know
03:10:04 what you're changing and why you're
03:10:06 doing it you typically don't need to
03:10:07 change anything here and regarding these
03:10:10 experimental options I'll have a look at
03:10:12 them specifically at experimental
03:10:15 decorators later in the decorators
03:10:17 module this basically enabled certain
03:10:20 features to be used in typescript which
03:10:23 are really experimental where it's not
03:10:25 sure if they will end up in JavaScript
03:10:28 at some time in the future and where you
03:10:31 still might want to work with them then
03:10:32 you explicitly have to tell typescript
03:10:34 that you want to work with these
03:10:36 features and you can do that with that
03:10:38 configuration but again I will come back
03:10:40 to that and therefore now we walk
03:10:43 through this file a lot of options you
03:10:44 can set there and as typescript grows
03:10:47 you typically also get more and more
03:10:49 options added here
03:10:50 therefore the official Doc's are of
03:10:52 course always a great place to dive
03:10:54 deeper and to make sure that you don't
03:10:56 miss an interesting option that might
03:10:58 help you in your project
03:11:04 so now that we have a properly
03:11:05 configured project let's dive a bit
03:11:07 deeper into how you can debug your
03:11:09 project or how you can have a great
03:11:11 development flow I show you my basic
03:11:14 idea is set up at the beginning of this
03:11:16 course really make sure you got the
03:11:18 right extensions installed there forward
03:11:21 type script it comes down to es lint
03:11:25 which can help you with linting your
03:11:27 typescript code so with improving the
03:11:30 code quality though you might need
03:11:32 additional configuration for is lint to
03:11:35 have an effect it can help you in more
03:11:37 advanced projects so but more
03:11:39 interesting than that you wanna really
03:11:42 use prettier to automatically format
03:11:45 your code and have a nicely formatted
03:11:46 code and you might want to give debugger
03:11:50 for Chrome a try because that allows you
03:11:53 to debug your typescript files even from
03:11:56 inside Lia's code through chrome but
03:11:59 without using the chrome dev tools of
03:12:01 course you can use those as well as you
03:12:04 learned if you do enable source Maps
03:12:06 here but you can of course always do you
03:12:09 get these translated files there as well
03:12:11 which is really nice but you can also
03:12:14 use vias code you can place breakpoints
03:12:18 here let's say in a click Handler and
03:12:19 now to launch your files here through
03:12:23 Mia's code you need to enable source
03:12:26 maps as well but we still will be able
03:12:29 to use Tia's code instead of the browser
03:12:31 dev tools so enable source Maps place
03:12:35 your breakpoint and then go to debug
03:12:39 start debugging now the first time you
03:12:42 run this it should ask you for an
03:12:43 environment and there with that debugger
03:12:46 for Chrome extension installed you
03:12:47 should be able to choose chrome it will
03:12:50 now go to a launch JSON file where you
03:12:52 configure how it should launch that and
03:12:55 there you should point it at localhost
03:12:58 3000 because that's where our
03:12:59 development server is running and of
03:13:02 course that process so the npm start
03:13:04 process should be up and running so

03:13:06 point at localhost 3000 here and as a
03:13:09 web root we you can leave that
03:13:10 placeholder here which means this
03:13:13 project folder is assumed to be the host
03:13:15 of your files which is the case and
03:13:17 now compile your code so that the source
03:13:20 maps also are generated after setting
03:13:22 the source maps conflict to true so then
03:13:25 do we now have T's in the JavaScript
03:13:26 code then with your breakpoint added
03:13:29 here and your launch chasing configured
03:13:30 let's run debugging here start debugging
03:13:33 now for real and it will open up a new
03:13:35 tab now automatically this tab will be
03:13:38 closed whenever you quit the debugging
03:13:40 process or if you close the tab the
03:13:42 debugging process will quit so now with
03:13:44 dead you entered this debugging view
03:13:46 here in vias code where you can track
03:13:48 variables watch certain expressions and
03:13:50 see the current call stack if you now
03:13:52 click on click me you should be taken
03:13:55 back into the editor and code execution
03:13:57 pauses at your breakpoint in the
03:14:00 typescript file and now you can walk
03:14:02 through the file here inspect local
03:14:04 values for this keyword or for the
03:14:07 message variable for example script wide
03:14:10 variables you might have and global
03:14:12 variables you got access to global
03:14:14 objects you can watch certain
03:14:16 expressions like message plus multiple
03:14:20 exclamation marks and well then you can
03:14:23 always track the value which is in there
03:14:26 here in this window if you wanted to use
03:14:28 that that would work and you can see the
03:14:31 current function call stack for example
03:14:33 that we're currently in a click Handler
03:14:34 and now you can step through your code
03:14:36 with these controls to step to the next
03:14:39 step
03:14:40 skipping over the next function call
03:14:41 stepping into the function call or
03:14:43 stepping out of the current function
03:14:45 call and the call stack of course here
03:14:48 will adjust according to that and with
03:14:51 that you can ignore this browsersync
03:14:53 thing here with that you can always
03:14:55 resume code execution by clicking the
03:14:57 play button and only pause whenever you
03:15:00 reach your breakpoint the next time so
03:15:02 this is how you can debug code you can
03:15:04 remove a breakpoint by clicking on it
03:15:06 this is how you can debug code from
03:15:08 inside vs code with the help of the
03:15:10 built-in debugging tools the chrome
03:15:13 debugger extension the right
03:15:15 configuration and source maps which are
03:15:18 set up in your typescript config
03:15:24 and that's it for this module we had a
03:15:26 very detailed look at the typescript
03:15:28 compiler how you can consider it and how
03:15:30 you can make sure that it really
03:15:32 compiles your code the way you want we
03:15:35 had a look at all these different
03:15:36 options especially the strict options
03:15:39 really allow you to write correct code
03:15:41 and not run into strange bugs strange
03:15:44 runtime bugs you might face for example
03:15:46 with the strict null checks and in
03:15:49 addition to that we had a look at
03:15:50 debugging how you can easily configure
03:15:52 drom and vias code such that you can
03:15:55 debug from inside various code debugging
03:15:57 from inside chrome with source maps and
03:16:00 the sources tab of course is always an
03:16:01 option the key here also are the source
03:16:04 maps which you are configuring to be
03:16:07 generated in the TS config file which
03:16:10 are these map files that live next to
03:16:12 your JavaScript files they basically act
03:16:14 as bridges for the debugger between your
03:16:17 JavaScript files and your typescript
03:16:19 files and with that we know a bit more
03:16:22 regarding how to manage our projects
03:16:24 let's now see what else we can do with
03:16:26 typescript and JavaScript
03:16:34 [Music]
03:16:36 you
03:16:37 [Music]

You may also like