Effective PyCharm (2021 edition) Transcripts
Chapter: Client-side web apps
Lecture: TypeScript support

Login or purchase this course to watch this video and the rest of the course contents.
0:00 If you're writing professional Javascript there's a good chance you're not writing javascript at all your
0:05 writing Typescript you haven't heard about it,
0:08 Typescript is basically like javascript but with a few other features and concrete type enforcement put
0:16 onto it and then it transpiles like compiles but doesn't go to binary,
0:20 goes down to your javascript. So here's an example that they're showing you the problem
0:25 on this page. So we've got this data structure called user.
0:29 It has a first name, a last name and a role.
0:31 But then down here you're using it.
0:34 Do you know what's wrong with user.name
0:35 is going to be a crash or runtime crash.
0:38 So it tells you instead how you can write code using typescript but well then compile
0:44 or transpile down to javascript and give you all sorts of run time checking.
0:48 It's really similar to type annotations and type hints and python except for it's actually enforced
0:54 as you kind of create the runtime file.
0:57 So let's see how we can work with this over in PyCharm.
1:02 So let's say we have this person here and I just said it's the name of
1:05 a person but what if we need to know more about them,
1:08 we might create a class. So let's create some typescript code that models a person
1:14 notice down here that we can go and choose typescript or some other options but typescript
1:19 is the one we want and I'm gonna call this person.
1:24 So over here in this one we work with class and other types of keywords from
1:29 the typescript language. And look at this.
1:32 guess how cool is that? It knows it's in a person.ts file or
1:35 creating class. Nothing else about person as the guest.
1:38 That's what I was going to write.
1:39 Come down here and then this is it.
1:42 We've created something but we probably want to have some properties like a first name,
1:48 last name and age. So let's create a constructor and with the public first name
1:55 it's the string, a public last name which is a string and a public
2:04 age, which is a number and that's it.
2:08 We've actually defined a lot about this public makes these public properties of this class.
2:13 Now, if you look over here,
2:15 see our person_ts I can't really work with typescript files.
2:19 This is not javascript remember it's a different language that becomes javascript when transpiled so
2:25 somehow I need to get this turned into a javascript file so that I can use
2:30 it in this javascript file or to include it in the page.
2:34 How do you do that? Well,
2:36 what we can do is we can come over here and type 'typescript' under language
2:43 and frameworks, go to typescript and notice this right here.
2:48 This is unchecked by default, at least on this version of PyCharm behave differently
2:52 in the past. But I'm going to check this,
2:55 make some minor change and hit save now notice right here this little chevron thing came
3:00 down and we got a person.js, Oh cool,
3:05 check it out. We've got the ugly javascript.
3:08 We would have to write to make this happen.
3:11 So let's see if I can put these side by side like this,
3:15 do the typescript and I'll wrap it around.
3:19 But here's what we wrote. It went through the typescript compiler or transpilor.
3:24 It created what's called an iffy an immediately invoked function which returns a new function that
3:30 creates one of these objects and returns it back.
3:33 Okay, so this is basically the way to create classes in traditional javascript.
3:38 Here's the way to do it in typescript.
3:41 So you can write nice typescript,
3:43 not write the stuff on the left.
3:45 Let's go and actually include our typescript file here at the bottom but above my site
3:56 and let's go use this instead of having this kind of person let's say let person
4:00 equals new person check that out what goes in their first name,
4:06 last name and age. All right.
4:07 The first name is going to be Sarah.
4:10 last name be James And the age is going to be 34.
4:19 All right, well there's our person.
4:20 You can even see the cool little type hints of what the fields represent and we're
4:26 going to comment that out and we could get something here.
4:29 Probably not exactly what we want.
4:31 We want first name, check that out
4:36 person.first name. Let's run it again,
4:41 Go to the console Sarah. Running this message by the way.
4:44 How it drives me crazy to get these fav icon errors.
4:47 I'm going to copy one I've got from down here for the same reason.
4:52 So that when we refresh this,
4:54 there are error messages gone. It's not even really one.
4:57 That's just something. So the 404 goes away.
4:59 Perfect. So there's our Sara.
5:01 What do we get if we don't put the first name,
5:02 let's just see what that looks like object object.
5:06 So we got to put something like a person If we want a little better message
5:23 There we go there Sarah age 34 running at startup.
5:27 That's a complicated or convoluted startup message but it doesn't matter what's the point.
5:32 The point is showing us how cool it is.
5:35 You can write our typescript as we make changes to it.
5:38 PyCharm will just notice that and automatically transpile that over to something we can include in our site and run.