00:0.04 If you're writing professional Javascript there's a good chance you're not writing javascript at all your
00:5.76 writing Typescript you haven't heard about it,
00:8.49 Typescript is basically like javascript but with a few other features and concrete type enforcement put
00:16.38 onto it and then it transpiles like compiles but doesn't go to binary,
00:20.45 goes down to your javascript. So here's an example that they're showing you the problem
00:25.76 on this page. So we've got this data structure called user.
00:29.46 It has a first name, a last name and a role.
00:31.7 But then down here you're using it.
00:34.14 Do you know what's wrong with user.name
00:35.51  is going to be a crash or runtime crash.
00:38.74 So it tells you instead how you can write code using typescript but well then compile
00:44.11 or transpile down to javascript and give you all sorts of run time checking.
00:48.34 It's really similar to type annotations and type hints and python except for it's actually enforced
00:54.73 as you kind of create the runtime file.
00:57.44 So let's see how we can work with this over in PyCharm.
01:2.44 So let's say we have this person here and I just said it's the name of
01:5.68 a person but what if we need to know more about them,
01:8.62 we might create a class. So let's create some typescript code that models a person
01:14.94 notice down here that we can go and choose typescript or some other options but typescript
01:19.94 is the one we want and I'm gonna call this person.
01:24.34 So over here in this one we work with class and other types of keywords from
01:29.04 the typescript language. And look at this.
01:32.18 guess how cool is that? It knows it's in a person.ts file or
01:35.32 creating class. Nothing else about person as the guest.
01:38.8 That's what I was going to write.
01:39.87 Come down here and then this is it.
01:42.32 We've created something but we probably want to have some properties like a first name,
01:48.22 last name and age. So let's create a constructor and with the public first name
01:55.26 it's the string, a public last name which is a string and a public
02:4.02 age, which is a number and that's it.
02:8.29 We've actually defined a lot about this public makes these public properties of this class.
02:13.54 Now, if you look over here,
02:15.17 see our person_ts I can't really work with typescript files.
02:19.35 This is not javascript remember it's a different language that becomes javascript when transpiled so
02:25.3 somehow I need to get this turned into a javascript file so that I can use
02:30.44 it in this javascript file or to include it in the page.
02:34.24 How do you do that? Well,
02:36.15 what we can do is we can come over here and type 'typescript' under language
02:43.86 and frameworks, go to typescript and notice this right here.
02:48.0 This is unchecked by default, at least on this version of PyCharm behave differently
02:52.87 in the past. But I'm going to check this,
02:55.24 make some minor change and hit save now notice right here this little chevron thing came
03:0.92 down and we got a person.js, Oh cool,
03:5.34 check it out. We've got the ugly javascript.
03:8.04 We would have to write to make this happen.
03:11.44 So let's see if I can put these side by side like this,
03:15.44 do the typescript and I'll wrap it around.
03:19.64 But here's what we wrote. It went through the typescript compiler or transpilor.
03:24.46 It created what's called an iffy an immediately invoked function which returns a new function that
03:30.99 creates one of these objects and returns it back.
03:33.92 Okay, so this is basically the way to create classes in traditional javascript.
03:38.89 Here's the way to do it in typescript.
03:41.44 So you can write nice typescript,
03:43.43 not write the stuff on the left.
03:45.64 Let's go and actually include our typescript file here at the bottom but above my site
03:56.04 and let's go use this instead of having this kind of person let's say let person
04:0.94 equals new person check that out what goes in their first name,
04:6.26 last name and age. All right.
04:7.94 The first name is going to be Sarah.
04:10.94  last name be James And the age is going to be 34.
04:19.44 All right, well there's our person.
04:20.83 You can even see the cool little type hints of what the fields represent and we're
04:26.21 going to comment that out and we could get something here.
04:29.93 Probably not exactly what we want.
04:31.61 We want first name, check that out 
04:36.15 person.first name. Let's run it again,
04:41.34 Go to the console Sarah. Running this message by the way.
04:44.67 How it drives me crazy to get these fav icon errors.
04:47.33 I'm going to copy one I've got from down here for the same reason.
04:52.04 So that when we refresh this,
04:54.34 there are error messages gone. It's not even really one.
04:57.05 That's just something. So the 404 goes away.
04:59.74 Perfect. So there's our Sara.
05:1.01 What do we get if we don't put the first name,
05:2.99 let's just see what that looks like object object.
05:6.02 So we got to put something like a person If we want a little better message
05:23.31 There we go there Sarah age 34 running at startup.
05:27.64 That's a complicated or convoluted startup message but it doesn't matter what's the point.
05:32.51 The point is showing us how cool it is.
05:35.54 You can write our typescript as we make changes to it.
05:38.3 PyCharm will just notice that and automatically transpile that over to something we can include in our site and run.
