 Good evening. My name is Andy. I'm normally in Shanghai. I'm here for vacation. But if you find this talk interesting, please buy me a drink. And today I'm going to talk about TypeScript. A little bit background, JavaScript is dynamically typed, which means you can have a variable name A, and you can basically be anything you like. And the compiler, there's no compiler. The engine doesn't know what it is, and you as an author often don't know what it is. That also means when your program becomes larger and larger with many, many authors, the kind of variable that you can have, the content you can have, becomes very complicated. Sometimes you see something, some function like that, a config. At first it was one or two lines, then it grows and grows and grows. And in the end, when you take over, you don't really know what config can be. So that's where the people have this idea of introducing static type to JS, which is actually a very old news. Azure script, which was a dialect of ECMAScript. We already have that in 2006, but we all know that Apple killed Flash, and as collateral damage, Azure script is basically dead as well. And then it's also proposed in ECMAScript 4, which, as we all know, for political reasons, is also dead. So for 10 years, we don't have it. But meanwhile, we have also other similar ideas. Google's Web Toolkit, which transpiles Java to JavaScript, which is, of course, strongly typed. And then Dart, which was by Google, same idea. And HAC, which is by Facebook, is also about introducing static type to PHP. And Python is the most extreme one. They actually officially support static type, type hinting, really, in 3.5. Python is basically dynamic. Yeah, and I will talk about it. And then there comes TypeScript, which is a Microsoft product. And it is compiled down to ES6 or 5 for browser execution. And it supports, remember correctly, all ES6 features, and many ES7, ES8 features. And it gives you compile time type check, which means there's no runtime check. So you could still write 40 programs. And then Flow. Two very similar ideas. One is by Microsoft, the other by Facebook, very similar goals, very similar syntax and semantics. Unfortunately, not 100% compatible, which means your TypeScript program will likely work with Flow, but probably not. And the other way around. So you need some minor modifications to transform code between them. I believe that TypeScript has better tooling by ecosystem, but it's not a nice point. And I think either one is fine. Now, talk is cheap. Let's do some coding. So I'm going to use this Visual Studio code, which is also a Microsoft thing, if you don't mind. And let's do something. Let demo.ts. Okay. So, as I said, if it works in ES6, it's still, can you see it? So, as TR goes to hello, it works. But it has the added benefit that you got all this nice completion because the editor knows that it's a string. Also, if you try to assign a number to it, it will say, oh, no, it's not, no, it's not assignable. And also, you can explicitly declare something. You can say, as is a string, then you can do basically the same thing. And also, you can do something like, say, B is an array of Boolean. And then when you push stuff into it, it will check, oh, man, no, it's a one. It's not a Boolean. And also, you get something like, excuse me, like when you pop something out of it, the editor knows that it's a Boolean that's getting being popped out. Now, let's talk about functions. So, functions basically is input and output both can be typed. Let's say you had two numbers, which is A, which is a number. Then B, which is a number. Then the output is a number. And return A plus B. Okay? And this will work. And if you try to use that, say, oh, one plus two, you know, that works. If you try something crazy, like one plus two, you get an error because, you know, it doesn't conform with the definition. Then let's talk about objects. These are primitive types. Objects are defined by interfaces and types and classes. Interface is basically just something like, you know, you define a shape of an object. You say, oh, config is true. It's a Boolean. And something like ID is a number. Then you can declare something as that. And then you get a typing. You need an ID is a number. And you can't do this anymore. Hello? Because ID is a number and trying to assign it to a string. In addition, interfaces can be extended. So you don't have to do everything again. Let's say you somehow have an async config. I don't know why. Yes, it's done. Property, which is a Boolean. Then you can have async config, which is async config. Then this thing will have an async property. It will also have an ID property inherited from the config stuff. Interface is usually used to define something that doesn't exist before. And you can also use something like code type to usually to combine things that you already have. Let's say sometimes you have an ID which you don't know whether it's a number or string. But it has to be either a number or string. Then you can define something like this. And then you can define an ID variable, which is of that type. So it can be one. It can also be one. Both works. But it can't be a Boolean. True. It doesn't work because it's either a number or string. Types. Let's talk something more advanced. You can also use what's called generics in TypeScript. That basically means that your type is somewhat wearable, has some flexibility. One example is promise. When you use a promise in JavaScript, you don't really know what's going to be resolved into. But with TypeScript, you can. Let's say I'm going to make a type called number promise, which is a promise of a number. Then I'm going to define this thing as number promise. And for simplicity, let's just say it's resolved to 5, 42. Then the interesting thing is you can do this. And then you can say result console.log result. The compiler will know that result is a number. Because MP is a number promise. A number promise is a promise of a number. So when it is a number, then the result has to be a number. So here you can't say something like what can you do with a number? Let me see this. You can still do that. So this is going to be a number that the compiler knows. Another use of generics is to do something like a clone. So let's say when you want to write a function to clone an object. You don't know beforehand what's going to be cloned. But still you can try something like this. It's going to be cloned and it has to take a parameter called t, which is the type of the input. And the return is going to be t. And let's just define it as json.pass json.stringify.input. Let's just say this clone. Now you have, let's say you have an object is like this. A is one. Excuse me. B is two. And then you clone it. Cloned object equals to clone object. Now, although you didn't explicitly specify the type of cloned object, the compiler still knows that it has an a, which is a number, and it has a b, which is a number. No, error. Because the type doesn't work. Because it can guess from here. And then it flows into this and this and it shows in notes. What else can I talk about? Oh, let's talk about classes. So let's say you want to model a boy who's trying to get into the bar under age. And what you could do in JavaScript is use some crazy hacks to try to hide a, hide a property. Let's say an age, which is, you know, number. Let's call it 16. And it has a say age function, which returns age plus two. You know, he tries to, sorry, try to look 18, but couldn't. But then if you have a boy thing, every user of this variable can directly access his property. And if you try to hide it, you need to do some crazy maneuvers. In TypeScript, you don't have two. You can just do this. And you can error because age is private. You can't do that anymore. So you have to say age, which is, you know, 18. So this is about hiding data. Also interfaces can be combined with classes. So if you, this is very useful when you have a large team, so you need to, different team, different teammates need to cooperate with each other. You might want to define the interface first. Let's say, you know, we all want to build a guy, which has a first name, which is a string, then a family name, which is also a string. Then different people can implement different classes on it. Interface. And you can say it's implements guy interface, which is an error because I haven't implemented this too. Let's just copy it and say hello. Well, then it will work. Then, of course, some other guy can implement it differently as long as it fits the definition here. All right. Next, I want to show you about three-party libraries. So, of course, you don't write all your JavaScript program in one go. You will use other people's code. But other people's code are not written in TypeScript in general. And so what the community come up with is they have this thing called Definitely Typed. So everybody can contribute definition for the libraries that didn't have TypeShape that doesn't define their functions clearly over there. So let's say we want to use load dash. Normally, you init it and you install load dash. So this load dash is just a JavaScript version. It doesn't have the type definitions. But you can also do what you can also do is do this at types thing load dash, which downloads the TypeScript definition, which it does has one. So you can say something like import everything as underscore from load dash. Then you can use it as if it was written with TypeScript. That means, for example, you can say something like one, two, three. And let's say we want to square them. So first of all, the compiler knows that this parameter is a number. And array equals to this. So you also get this number because it knows that you are trying to convert square numbers to numbers. If you do this one, for example, then array will become an array of strings because every number will become strings. And also you got, let's call it let. Also, if you use this, let's stick with the squaring version. And you try to put something that doesn't make sense. You get an error because it shouldn't work because you can't time, say, a string to another string. So this is basically how TypeScript works. How much time do I have? Two minutes. Any React people? One, two, okay. Right. So let me show a little bit about how TypeScript works with React, which was what I've been doing in the past six months. So to do that first, we need a TSConfig file, unfortunately, which is as the name suggests, it configs the TSX. The good thing is compiler options, I think, JSX. It's smart enough that it actually autocompletes your options. And let's call it React. And so in React, you got this idea of components. Install React, let's install everything. And so in port, let's trace React from React. It has error because the type isn't done. And when it's installed, it's okay. So let's say you want to create something called MyView. You can say it's a React component. The interesting thing is it takes two parameters and prop types. Let's say id is string, state, types, whatever, number. So what you can do is you can, when you define this React component, you can fill in its props and states, state, types. And which means when you use it, you can boolean. Oh, sorry. True. When you try to do this, it's an error because you define it prop as a string. Oh, sorry. You define it as a string, but you are giving a boolean. So it won't work. Instead, you can say it's high. Then it will work. So that's how it works with React. And also the state can be typed. So when you are using state, if any, it can also help you to check your type. And that's all for my presentation. Yes, sir? Oh, good question. So first of all, there are many ways to do this. The most loose way to do this is to say that this object is of any type. So, you know, oh, sorry. It can be object. So it can be, you know, anything without an error. But that's stupid, right? So what you can further do is to say that, let's say your object, it's, the key is a string and everything is number. Let's say whatever. So you can, what you can do is to do this, who say it's an object. So what you can do is to say, you know, a is one, that's okay, but b is true. That won't be okay because you said that all things are numbered. But if you want to do it deeper, let's say, you know, a is, you want to define something that dynamically a is number and b is, so the shape is defined dynamically that it won't work because TypeScript only checks your type in compile time. When in dynamic time, all types are gone. Okay. Thank you. All right. Thank you.