TypeScript for Regular Folks Like Me

If you're like me, you've probably heard of TypeScript but never used it. This talk provides a down-to-earth look at TypeScript, a statically typed superset of JavaScript that compiles to plain JavaScript. TypeScript also adds optional static types, classes, interfaces, and modules to JavaScript. This session will consist of a guided tour of TypeScript, showing how the language and toolset makes it easier to write cross-platform, large-scale JavaScript applications.

Transcript

1. TypeScript For Regular Folks Like Me Michael Crump | Telerik | @mbcrump
2. What will we cover? • Why TypeScript? (and some gotchas) • What is it? • How to get started using it. • Demos (from the syntax, to debugging, interfaces and classes) • Resources and Q&A
3. Why TypeScript?
4. • Large and difficult to maintain JavaScript codebases • Compile Time Error • Runtime Errors • Better Auto-Completion • Transpiles to ES3, ES5 or ES6 Where does it shine?
5. Keep in Mind…
6. Gotchas • Takes time to add TypeScript to an already existing large JavaScript project. • Don’t go into this with the mindset that you will never need to learn JavaScript. • You will write ambient definition for various libraries if your team adopts this.
7. TypeScript 1.6.x is the latest Stable Version, but you will find they have features planned to 2.0. https://github.com/Microsoft/TypeScript/wiki/Roadmap
8. What is TypeScript?
9. TypeScript is an open source project by Microsoft. Any browser, Any host, Any OS.
10. TypeScript is a typed superset of JavaScript that transpiles to plain JavaScript.
11. Very easy to learn for those coming from C based languages such as Java, C#, C++.
12. JS code is already valid.
13. Getting Started with TypeScript
14. TypeScriptLang.org
15. Others • Baked In: Visual Studio / Visual Studio Code • Support for: – WebStorm – Sublime Text – Node.js – Vi – Emacs
16. Mac Users npm i –g typescript
17. Windows Users Ships with Visual Studio or you can add it from NuGet
18. This happens in the background: tsc typescript.ts > javascript.js
19. Integrating 3rd Party Libraries
20. 3rd Party Libraries • Typings are defined in files with the .d.ts extension. • lib.d.ts file is built-in for the DOM and JavaScript • The repository for TypeScript type definitions can be found at http://definitelytyped.org/
21. Demo: TypeScript Syntax Sugar and Integrating 3rd Party Libraries
22. Debugging TypeScript
23. Debugging • Visual Studio has one of the most powerful debugging experiences with TypeScript. • TypeScript generates source maps for your code. – You will see these in javascript.ts.map files. • Sometimes you do have to go through the compiled code.
24. Interfaces Helps us keep our programs error-free by providing information about the shape of the data that we are going to work with.
25. A TypeScript Interface TypeScript File Generated JavaScript File
26. Interfaces • Wasn’t transpiled • No runtime cost • Helps you find errors
27. Classes Classes act as containers for different members of your application.
28. A TypeScript Class TypeScript File Generated JavaScript File
29. The resulting Type is just a JS Constructor + prototype trapped in a IIFE (Immediately-invoked function expression)
30. Demo: Debugging TypeScript and Taking a look at Interfaces and Classes
31. Resources • http://www.typescriptlang.org - Official Site • http://definitelytyped.org/ - Type File Definitions • https://speakerdeck.com/mbcrump - Slides from this presentation. • https://github.com/mbcrump/TypeScriptTut - Code from this presentation.
32. Questions? Michael Crump | Telerik | @mbcrump