Slide 1 TypeScript * This presentation is to show TypeScript's major feature and the benefit that it brings to your JavaScript projects. * Our main objective is just to spark interest especially to those not familiar with the tool. Slide 2 - What is TypeScript * go to next slide Slide 3 - Is a superset of JavaScript * it simply means an extension to JavaScript - Use JavaScript code on TypeScript * JS code naturally works on TypeScript * Which also means your beloved JavaScript libraries such as JQuery, or your fancy interacive plugins would work as well. - TypeScript compiles to plain old JavaScript * TS code compiles to simple and clean JS. Slide 4 - Screenshot of TS compiled to JS * In this example, compiling a TS class code would result to a JS version, and a regular JavaScript function when compiled is basically untouched. Slide 5 - TypeScript's Main Feature * So what does TS provide us with? What does it actually do? Slide 6 - Static Type Checking * TypeScript allows us to enable type checking by defining data types to your for ex. variables, function parameters and return types. Slide 7 - Screenshot of basic Static Type Checking * In this example… * What I've done here was to assign supposedly wrong values for what the variables or parameters were meant to hold * As JavaScript is a dynamic and untyped language these expressions would either fail or be okay when you run it on your browser. * In TypeScript by enabling static type checking these potential errors are caught earlier (see the red marks on the expressions) and wouldn't even allow you to compile unless these are resolved. * In addition you can also type arrays and object literals Slide 8 - Effects of Static Type Checking * As TS code is statically type-checked a side effect of such... - Allows IDEs to perform live error checks - Exposes auto-completion and code hinting Slide 9 - Screenshot of code hinting * Say I was coding JQuery on regular JavaScript code there would be no natural way to help me identify its class properties, methods and parameters... except through reading the API documentation or a separate plugin. * As a result of static type checking this allows IDE's to access these class members as code hints * So if this was a 3rd party library how much more if you are just referencing your own JavaScript/TypeScript files within your project. Slide 10 - A few of the other cool features * That was only the basic feature of TypeScript * A few of the other cool features are... Slide 11 - End