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