Coding

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]