Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScript for Regular Folks Like Me

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.


Michael Crump

October 16, 2015


  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

  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

  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