Introduction to TypeScript

Transcript

1. Introduction to TypeScript Michał Tęczyński
2. Introduction to TypeScript Michał Tęczyński Agenda • What is TypeScript? • TypeScript features • Migration from plain JavaScript • Using JavaScript libraries • Pros & Cons • Alternatives
3. Introduction to TypeScript Michał Tęczyński What is TypeScript?
4. Introduction to TypeScript Michał Tęczyński What is TypeScript? TypeScript is modern JavaScript + types. It's about catching bugs early and making you a more efficient developer, while at the same time leveraging the JavaScript community.
5. Introduction to TypeScript Michał Tęczyński What is TypeScript? • Developed by Microsoft • Most important M$ language alongside with C# and Visual Basic • Superset of JavaScript • Static typing • Open-Source
6. Introduction to TypeScript Michał Tęczyński TypeScript features
7. Introduction to TypeScript Michał Tęczyński Typescript features • Advanced static typing • Compiles to different ECMAScript standards (ES3, ES5, ES2015) • Compatible with JavaScript (it’s superset of JavaScript) • Latest ECMAScript features (arrow functions, classes, spread operator...) • Great support, tools and community
8. Introduction to TypeScript Michał Tęczyński Advanced static typing
9. Introduction to TypeScript Michał Tęczyński Advanced static typing • Basic types • Special types • Interfaces and types • Classes • Generics
10. Introduction to TypeScript Michał Tęczyński Basic types • Boolean • Number • String • Tuple • Array • Enum
11. Introduction to TypeScript Michał Tęczyński Basic types
12. Introduction to TypeScript Michał Tęczyński Special types • Void • Null • Never • Any (pure evil)
13. Introduction to TypeScript Michał Tęczyński Special types
14. Introduction to TypeScript Michał Tęczyński Interfaces and types • Interface is a basic structure for typings in TypeScript • Type is used alongside interface to speed up development
15. Introduction to TypeScript Michał Tęczyński Interfaces and types
16. Introduction to TypeScript Michał Tęczyński Interfaces and types
17. Introduction to TypeScript Michał Tęczyński Classes • Extends ECMAScript class specification with many features like: ◦ Function and properties modifiers (public, private, protected, readonly) ◦ Accessors ◦ Abstract classes • Can be mixed (extended) with interfaces
18. Introduction to TypeScript Michał Tęczyński Generics • Similar to generics in Java, C++, C# • Very powerful for creating advanced structures • Can be used with pretty much every TypeScript language construction (functions, types, interfaces, classes etc.)
19. Introduction to TypeScript Michał Tęczyński Migration from plain JavaScript
20. Introduction to TypeScript Michał Tęczyński Migration from plain JavaScript • Add proper flags to config • New modules - write in TypeScript • Old modules: ◦ If time > 0: migrate incrementally ◦ If time <= 0: add only typings to current JavaScript (to use it inside TypeScript code)
21. Introduction to TypeScript Michał Tęczyński Migration from plain JavaScript To allow compilation of plain *.js files To also check your JavaScript code inside (if you want more trouble while refactoring:)
22. Introduction to TypeScript Michał Tęczyński Migration from plain JavaScript Plain JavaScript module Declaration of module to be able to use inside TypeScript code
23. Introduction to TypeScript Michał Tęczyński Using JavaScript libraries
24. Introduction to TypeScript Michał Tęczyński Using JavaScript libraries • Using typings from JavaScript libraries (if written by author) • Using typings from central repo of types (DefinitelyTyped) • Writing needed typings inside our application
25. Introduction to TypeScript Michał Tęczyński Pros & cons
26. Introduction to TypeScript Michał Tęczyński Pros • More readable & predictable code • Much less bugs on production • Supports older browsers • Lots of configuration options • Easy migration from JavaScript • Great integration with IDE (VS Code, JetBrains)
27. Introduction to TypeScript Michał Tęczyński Cons • Can be helpful only if we are “strict” • Basically new language to learn • Compilation step • Cannot catch 100% of bugs (it’s only static types) • Not every JavaScript library has typings
28. Introduction to TypeScript Michał Tęczyński Alternatives
29. Introduction to TypeScript Michał Tęczyński Alternatives • Flow • Made by Facebook • Different syntax • Similar language features
30. Introduction to TypeScript Michał Tęczyński Resources • https://speakerdeck.com/michalv8/introduction-to-typescript • https://stackoverflow.com/questions/12694530/what-is-typescript-and-w hy-would-i-use-it-in-place-of-javascript/35048303#35048303 • https://www.typescriptlang.org/ • https://github.com/Microsoft/TypeScript • https://www.ecma-international.org/default.htm • https://definitelytyped.org/ • https://github.com/michalv8/introduction-to-typescript • https://github.com/holokron • https://flow.org/ • https://areknawo.com/typescript-vs-flow-with-react-in-the-background/
31. Introduction to TypeScript Michał Tęczyński Thanks!