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