- 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]