Typescript for the programmers who like javascript
12 likes1,489 views
An introduction to Typescript for programmers who use JavaScript. It goes through what it is, what's it useful for, how to start using it and some things I've observed while using it. Notes are not available but feel free to PM me if you have any question.
More Related Content
What's hot (20)
Viewers also liked (12)
Similar to Typescript for the programmers who like javascript (20)
Recently uploaded (20)
![Passive House Canada Conference 2025 Presentation [Final]_v4.ppt](https://cdn.slidesharecdn.com/ss_thumbnails/phcc2025presentationfinalv4-250512155835-5098a2a9-thumbnail.jpg?width=560&fit=bounds)
Typescript for the programmers who like javascript
- 1. Typescript for the programmers who like JavaScript @Andrei_Cimpean
- 2. What will we cover ? What it is What's it useful for How to get started Using it
- 3. What is Typescript ?
- 4. Typescript is an open source project started and maintained by Microsoft. It works on any OS.
- 5. Typescript is a typed superset of JavaScript that transpiles to plain JavaScript. It offers classes, modules, and interfaces.
- 6. What does transpilation mean ?
- 7. A transpiler takes the source code of a programming language as its input and outputs the source code into another programming language
- 8. The typescript compiler Can generate JS valid down to IE8. Compile-time type checking. JS code is considered valid.
- 10. transpiled to a JS type
- 11. It basically allows you to use features that are not available out of the box in the targeted language.
- 12. What does Typescript help with ?
- 13. Compile time errors Runtime errors ( traceur ) Better auto-completion Helps the JS VM in making better code optimizations Transpiles to ES3, ES5 or ES6
- 15. Let's pick a ES feature not available yet...
- 16. Decorators Proposed for ES7 Typescript 1.5 adds support for ES7 like Decorators Decorators are not allowed when targeting ES3
- 18. ES5 object literals support arbitrary expressions in the value position. ES6 classes only support literal functions as values. Decorators restore the ability to run code at design time, while maintaining a declarative syntax. https://github.com/wycats/javascript-decorators
- 19. Typescript 1.4 is the current stable version. The roadmap is planned until 2.0.
- 22. Classes. Public, private and protected members.
- 25. The resulting Type is a just a JS constructor + prototype trapped in a IIFE.
- 26. Interfaces
- 28. transpiled to … nothing
- 29. About interfaces No runtime cost. The type information is erased from a TypeScript program during compilation.
- 30. Suggestion: use interfaces everywhere
- 32. partial matching
- 34. Libraries and frameworks are described with interfaces. Interfaces are defined in files with the .d.ts extensions and are called ambient definitions. A repository for TypeScript type definitions: http://definitelytyped.org/ Check out https://www.npmjs.com/package/tsd
- 35. You usually create a folder in your project and dump typings there for the libraries and frameworks you use. You need to reference the files in the source code.
- 37. It's a common practice to create a reference file where you add the paths for all the definitions used in your project and just include that everywhere.
- 38. Modules
- 40. Declaring a module in typescript
- 41. Declaring a module in typescript
- 42. It's a good idea to group things up into small modules and wrap interfaces together with classes / functions / etc. .
- 43. * you probably won't want to do that; it depends on the target of the compiler and you'll loose the option of only compiling changes A module can* be spread across multiple files.
- 44. Starting to use Typescript is easy
- 45. npm i -g typescript
- 46. tsc source-code.ts > source-code.js
- 47. You usually have a source folder from where you transpile the code into a build / dist folder.
- 48. There are a lot of projects around grunt or gulp that help you automate builds. ( in one file, in watch mode, etc. )
- 49. Gruntfile sample This grunt task creates a .js file for each .ts file and maintains the folder structure. It also creates source maps.
- 50. Caveat: each save means compile. You loose some speed, especially when you need to compile hundreds of files. It's fast, but it's noticeable.
- 51. Typescript in text editors / IDEs
- 52. Example: online visual studio
- 53. Baked in: Visual studio / Visual studio code Plugins for: Intellij IDEA Sublime Text Atom Vim Emacs
- 54. Plugins usually work as a client for TSServer ( an editor service bundled into TypeScript ). It also outputs errors and warnings on save, gaining you back some dev speed.
- 55. How easy it is to find useful information ?
- 56. Just be careful about 0.9 stuff. It used to be hard to find things after because 0.9 and 1.0 are incompatible. You probably won't have issues.
- 59. Typescript generates source maps for your code. Sometimes you do have to go through the compiled code.
- 62. It's hard to add it slowly in your codebase. It's easier to transition towards the web and assume you don't need to learn JS. Tsc can fail miserably at catching typing errors when programming in a more functional style. You will end up writing ambient definitions for various – less popular – libraries.
- 63. Questions ?
- 64. Thank you !