Effective PyCharm Transcripts
Chapter: Client-side web apps
Lecture: TypeScript tooling
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
One of the projects that I am interested in building some things with, is this one called Ionic. So this is really, really sweet,
0:11
it builds basically native iOS and native Android applications but using Javascript, HTML and CSS.
0:17
It has little widgets that look and adapt to the various OSs, that look like IOS widgets and look like Android widgets and so on.
0:24
Now, in order to use this, it's based on Angular 2 and TypeScript along with Javascript and HTML 5,
0:32
I think that's probably largely because Angular 2 itself is based on TypeScript but I have to play with this more to really understand why that is,
0:39
but if I want to work with TypeScript, TypeScript is a super set of Javascript, think of it as like what C++ is to C. So the idea what TypeScript is
0:50
that you start out with basically the TypeScript language and then you compile it down, you transpile it, if you will
0:57
down into Javascript which then runs on all the platforms. So let's see how this works in PyCharm. So we can go over here and let's just suppose
1:06
we're tired of our home js being written in Javascript, we're going to write it in TypeScript, you also see this CoffeeScript,
1:16
but if you look at the popularity of the TypeScript versus CoffeeScript, TypeScript is way more popular.
1:22
So we'll just call this app, and notice right away, it says do you want to compile TypeScript to Javascript,
1:28
notice also if you look over here, there's no little chevrony thing we have that you can expand this, just the TypeScript, I'll say okay, great;
1:38
now let's go write something, let's define a class and we get TypeScript intellisense, that's cool, I'll call this person,
1:48
and let's come down here and define a constructor which is a thing you do in TypeScript
1:53
and I can come and create some public elements, some public properties just by taking them here as public arguments,
2:02
that's the way it works in TypeScript, so let's have name, which is a string, public age, which is an int
2:11
sorry, this had number in Javascript, we can go like this; now that actually defines a class with two properties, name and age,
2:22
if we save this, notice right away that this little chevron is here, and if we expand it, we have an app.js, and we actually open it,
2:32
you can see that we define a person which an IIFE, the result of this IIFE, an immediately invoked function over here
2:41
and it defines a function, which takes two parameters, this is the constructor and then we're returning this thing and then that defines the type,
2:51
that's the way you do classes in base Javascript, and you can actually control what level of Javascript the compiler compiles against.
2:58
So this is pretty cool, we could come back over to our HTML and let's include our little app.js in the right location, like so
3:08
and go over to our site and let's just do this, we'll say let p = Person, and right there we got that,
3:17
and we could give it say a name, which is Tom and the age is 11, and then over here we could log out p. and what have we got,
3:29
p.name is p.age years old, and you probably want some plus action going on right here,
3:45
maybe put that back to var, I think the level of Javascript is not set that high
3:49
it's probably set to a much older version of Javascript where let was not supported, we can change that in the second.
3:56
But now, we should be able to create this object and run it, of course, we're running the wrong one,
4:02
let's go back over here and view this in the browser, view the console, p is not defined,
4:10
I made a minor mistake here, it's all the Python's fault, I blame them. So, of course in Javascript we need new when invoking these things,
4:19
so let's go over here and reload this, here you go, now we have Tom is 11 years old. And so what happened here is we can write our code in TypeScript
4:28
and maybe you can tall I don't write a ton of TypeScript but you know, I dabble in just enough when I need it.
4:34
And you'll write the TypeScript, just every save that we do automatically compiles this output here and then we're able to consume it over here,
4:45
as long as you don't forget the new. Now, the other thing I want to look at really quick is
4:52
we didn't get any help with things like let and const and so on and that's because the level of ECMAscript we're targeting,
4:58
we can come over here and say we're targeting ECMAscript 6, this is the shiny new one and this only runs in the newer browsers
5:05
and we can come over here and apply this and now we should be able to do things like define let
5:12
so what I tried to write before, p= new person, Jake and he is 14, now notice, PyCharm is now saying— you know, you should be more specific than var
5:27
and we can actually come over here and change this to a const if it is not changed or to a let,
5:33
so we can change that to a const, and change that one to a let. So, make sure you change your Javascript, you can even enable a file watcher
5:50
to transpile this to an older version of Javascript if you need to, but if you look over here in our modern browser
5:57
that should totally still work, and it does, so no need to change it for using modern browsers, so I am going to say no.