Downloaded 42 times
Uploaded byAndrei Sebastian Cîmpean
Typescript for the programmers who like javascript
TypeScript is an open-source, typed superset of JavaScript that transpiles to plain JavaScript, providing features like classes, modules, and interfaces. It helps with compile-time and runtime error checking, better auto-completion, and integration with third-party libraries through ambient definitions. Getting started with TypeScript is straightforward, with npm installation and transpilation options, although transitioning to TypeScript from JavaScript can present challenges.
More Related Content
Similar to Typescript for the programmers who like javascript
Typescript for the programmers who like javascript
- 1. Typescript for the programmerswho like JavaScript @Andrei_Cimpean
- 2. What will wecover ? What it is What's it useful for How to get started Using it
- 3.
- 4. Typescript is anopen source project started and maintained by Microsoft. It works on any OS.
- 5. Typescript is atyped superset of JavaScript that transpiles to plain JavaScript. It offers classes, modules, and interfaces.
- 6. What does transpilationmean ?
- 7. A transpiler takesthe source code of a programming language as its input and outputs the source code into another programming language
- 8. The typescript compiler Cangenerate JS valid down to IE8. Compile-time type checking. JS code is considered valid.
- 9.
- 10. transpiled to aJS type
- 11. It basically allowsyou to use features that are not available out of the box in the targeted language.
- 12. What does Typescripthelp with ?
- 13. Compile time errors Runtimeerrors ( traceur ) Better auto-completion Helps the JS VM in making better code optimizations Transpiles to ES3, ES5 or ES6
- 14.
- 15. Let's pick aES feature not available yet...
- 16. Decorators Proposed for ES7 Typescript1.5 adds support for ES7 like Decorators Decorators are not allowed when targeting ES3
- 17.
- 18. ES5 object literalssupport 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 isthe current stable version. The roadmap is planned until 2.0.
- 20.
- 21.
- 22. Classes. Public, private andprotected members.
- 23.
- 24.
- 25. The resulting Typeis a just a JS constructor + prototype trapped in a IIFE.
- 26.
- 27.
- 28. transpiled to …nothing
- 29. About interfaces No runtimecost. The type information is erased from a TypeScript program during compilation.
- 30. Suggestion: use interfaceseverywhere
- 31.
- 32.
- 33.
- 34. Libraries and frameworksare 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 createa 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.
- 36.
- 37. It's a commonpractice to create a reference file where you add the paths for all the definitions used in your project and just include that everywhere.
- 38.
- 39.
- 40. Declaring a modulein typescript
- 41. Declaring a modulein typescript
- 42. It's a goodidea to group things up into small modules and wrap interfaces together with classes / functions / etc. .
- 43. * you probablywon'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 useTypescript is easy
- 45. npm i -gtypescript
- 46. tsc source-code.ts >source-code.js
- 47. You usually havea source folder from where you transpile the code into a build / dist folder.
- 48. There are alot of projects around grunt or gulp that help you automate builds. ( in one file, in watch mode, etc. )
- 49. Gruntfile sample This grunttask creates a .js file for each .ts file and maintains the folder structure. It also creates source maps.
- 50. Caveat: each savemeans compile. You loose some speed, especially when you need to compile hundreds of files. It's fast, but it's noticeable.
- 51. Typescript in texteditors / IDEs
- 52. Example: online visualstudio
- 53. Baked in: Visual studio/ Visual studio code Plugins for: Intellij IDEA Sublime Text Atom Vim Emacs
- 54. Plugins usually workas 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 itis to find useful information ?
- 56. Just be carefulabout 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.
- 57.
- 58.
- 59. Typescript generates sourcemaps for your code. Sometimes you do have to go through the compiled code.
- 60.
- 61.
- 62. It's hard toadd 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.
- 64.